<   2013年 04月 ( 2 )   > この月の画像一覧

ももクロ緑 ディズニーに公認される

e0223652_15582222.jpg
ヴァネロペちゃん(*^ω^*)

ヴァネロペでありやーす(*’-^*)

なっちってー(テヘペロ

なんとコレ♪
ディズニーさんから貰ったんだよー

e0223652_15585777.jpg

私が映画の感想とかblogに勝手に書いてたのを見てくださったみたいで、

事務所に
ヴァネロペちゃんのお人形と、このトレーナーを
送ってきてくれたんだよー


[PR]
by killingmoon581 | 2013-04-06 16:00 | ももクロ

エキサイトブログスキン「スクエアベーシック」を魔改造してみた

http://squarebasi.exblog.jp/

エキサイトブログはシンプルなスキンが多くデザインが秀逸なものがたくさんあります。

そんなエキブロスキンのなかでも個人的にお気に入りなのが「スクエアベーシック」です。

ところがこのスキン。

エキブロ開設当初にリリースされているのでいかんせん設計が古い・・・

・いまだにテーブルレイアウトを使っている(画像の読み込みが遅い)
・レイアウトが左に片寄っている
・フォントサイズがちょっと小さい
・フォントがメイリオ・ヒラギノじゃない

ってことでアウトオブデートな部分をカスタマイズしてみました。

主な改造点は

・テーブルレイアウトを止めてfloatレイアウトに
・レイアウトを中央寄せに
・横幅を拡大(横幅960pxに)
・メニューを右側に移動
・視認性の向上

変更方法は

スキン編集で、メイン画面編集エリアに以下を入れ替え

<div id="wrapper">

<DIV ID=TOP>
<h1 CLASS=HEADER><$header$></h1>
<DIV CLASS=URL><$blogurl$></DIV>
<DIV CLASS=USERMENU><$adminmenu type=1$></DIV>
</DIV>
<DIV CLASS=TOPLINE></DIV>

<DIV ID=RIGHT>
<$post$>
<center>
<$prepage type=1$>
<$nextpage type=1$>
</center>

</DIV>

<DIV ID=LEFT>
<DIV CLASS=PROFILE>
<DIV CLASS=PROFILE_BODY>
<CENTER><$logoimage type=1$></CENTER>
<$description$><$nick$>
</DIV>
</DIV>
<$calendar type=1$>
<DIV CLASS=MN>
<$menuleft$>
</DIV>

<$banner type=1$>
<$xml$>
<div class="XML">modified by <a href="http://killingmoo.exblog.jp/" target="_blank">killingmoo.exblog.jp</a></div>
</DIV>

</div>

次に本文部分に以下を差し替え

<DIV CLASS=POST>
<DIV CLASS=POST_TOP><$postdate$></DIV>
<DIV CLASS=POST_BODY>
<DIV CLASS=POST_HEAD>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR><TD WIDTH=600><h2 CLASS=POST_TTL><$postsubject$></h2></TD>
<TD WIDTH=100 ALIGN=RIGHT><$postadmin type=1$></TD></TR>
</TABLE>
</DIV>
<DIV CLASS=POST_BODY_SUB><$postcont$></DIV>
<DIV CLASS=POST_TAIL><$posttail$></DIV>
<$cmtjs$>
</DIV>
</DIV><DIV CLASS=POST_EM></DIV>

最後にCSS編集エリアに以下を追加

/****以下 追加したCSS****/

/*フォント*/
BODY,TD,DIV,LI {
color: #555555;/*フォントの色*/
font-family:'メイリオ','meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','meiryoKe_PGothic','Verdana','MS Pゴシック',Arial, Helvetica,sans-serif;/*使用フォント*/
}

/*ブロック構成*/
#wrapper {
width:960px;
margin:0 auto;
}

/*メニュー*/
DIV#LEFT {
font-size:.875em;
float:right;
}

/*コンテンツ*/
DIV#RIGHT {
float:left;
width:730px;
}

/*記事タイトル*/
h2.POST_TTL {
font-size:1.125em;/*フォントサイズ*/
}

/*個別記事部分*/
DIV.POST_BODY_SUB {
WIDTH: 660px;
margin:0 20px;
color:#333333;/*フォントの色*/
font-size:1em;/*フォントのサイズ*/
line-height:1.7;/*1行の高さ*/
}

/*引用の修飾*/
blockquote {
margin:10px 0;
padding:10px;
border:solid 1px #cccccc;
background:#fafafa;
}

/*関連記事画像の調整*/
img.thumnail_next_bbs {
width:100px !important;
height:auto !important;
margin-right:5px !important;/*お好みで*/
box-shadow: 0 0 3px #AFA199;/*お好みで*/
}


/*コメント部分の修正*/

/*コメント本文*/
DIV.COMMENT_BODY {
border:solid 1px #cccccc;/*罫線*/
margin:5px 10px 15px;/*余白*/
padding:10px;/*余白*/
background:#f5f5f5;/*背景色*/
}

/*コメント テキストエリア*/
.COMMENT_INPUT {
width:380px;
margin:20px auto 0;
}

/*コメントボタン*/
div.COMMENT_INPUT input[type="SUBMIT"] {
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #DDD url(http://pds.exblog.jp/pds/1/201108/16/52/e0223652_21562334.gif) repeat-x 0 0;
border-color: #BBB #BBB #999;
border-style: solid;
border-width: 1px;
cursor: pointer;
font-size: 12px;
margin: 0;
padding: 0 6px 0 15px;
letter-spacing:12px;
}

/*コメント欄入力エリア*/
div.COMMENT_INPUT input[type="TEXT"],input[type="password"] {
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background: #DDD url(http://pds.exblog.jp/pds/1/201108/16/52/e0223652_21562334.gif) repeat-x 0 0;
border:solid 1px #cccccc;
font-size: 12px;
margin: 0;
padding:4px 3px;
}

/*コメント欄高さ変更など*/
TEXTAREA.TXTFLD {
height:14em;
border: 2px solid #cccccc;
color: #666;
background-color: #ffffff;
color: #666;
padding: 2px;
margin-bottom: 10px;
}

/*エキサイトバナー*/
DIV.BANNER {
WIDTH: 150PX;
MARGIN:10px auto;
TEXT-ALIGN: CENTER;
}

DIV.XML {
WIDTH: auto;
MARGIN:0 auto 10PX;
TEXT-ALIGN: CENTER;
}

「各部分別横幅」で本文横幅を「660px」に変更

これで終了です。

[猫的]横アングル研究会
小西が批判していた内容もひどかった

よく見に行くエキブロユーザーさん(スクエアベーシック使用)のブログにTBさせてもらいました。


※ 2013/04/15 追記 ※

変更の仕方

管理画面の「基本設定」 → 「スキン変更(PC)」をクリック

e0223652_1116173.jpg

スクエアベーシックを使っている方は上のような状態になってるはずです。

「編集」ボタンをクリックします。

e0223652_1118547.jpg

一番外側がオレンジの枠になっているのを確認して当ページの最初のhtmlタグをコピペして保存ボタンをクリック

e0223652_1121230.jpg

次に「本文」をクリックして編集画面を切り替えます。

当ページの2番目のhtmlタグをコピペして保存。

e0223652_11223370.jpg

最後に「CSS編集」エリアに当ページの3番目のタグ(CSS)を最下行に追加して保存。

e0223652_11235832.jpg

一番上の「■ 各部分別横幅」の「変更」ボタンをクリック

e0223652_11245480.jpg

「本 文横幅」を660pxに変更して修正ボタンをクリック


以上で終了です。

メニューを左側にする

CSSの以下の部分を
/*メニュー*/
DIV#LEFT {
font-size:.875em;
float:right;
}

/*コンテンツ*/
DIV#RIGHT {
float:left;
width:730px;
}

このように変更します
/*メニュー*/
DIV#LEFT {
font-size:.875em;
float:left;
}

/*コンテンツ*/
DIV#RIGHT {
float:right;
width:730px;
}



[PR]
by killingmoon581 | 2013-04-01 15:40 | エキサイトブログ
LINK LINK LINK LINK LINK

Page Top