初心者でも簡単に出来るブログの”プチ”カスタマイズ方法 vol.01
先日、沖縄の地方ブログTI-DAブログで書いているブログのテンプレートを変更（2カラム→3カラム）した際に貼り付けている画像や広告のサイズ等が合わなかったで、横幅などを広げてテンプレートを“プチ”カスタマイズしました。
ほんのちょっとの事。どうでもいい人にはどうでもいい事。だけど、このほんのちょっとのことが結構重要だったりもするわけで・・・
初心者さんは結構悩んでる方が居るんではないかと言う事で、「このポイントを抑えておけばいける！」って所をお教えします。
カスタマイズ法
今回はブログの「幅を広く」します。
説明するブログは沖縄地方ブログの「TI-DAブログ」
1.まず、TI-DAの管理画面に入り、左のメニューにある「テンプレート」をクリック
2.テンプレートの編集・再選択の所にある「カスタマイズ」をクリック
3.スタイルシートの中身を「メモ帳」に「コピー＆ペースト」しましょう
4.「編集」から「検索」をクリックし、検索する文字列に「width」と記入します
「width」は直訳すると「幅」どんどん検索していって、まず確認。
変更する箇所。
#container{
#content{
#links{
#links2{
.blog{
.main{
この中に含まれている「width」のサイズを変更すればオッケー。
つまり、#container{ の「width」が「1000」だった場合、
#content{ #links{ の合計が「1000」になればいいのだ。
ただここで気をつけなければいけないのが、「padding」と「margin」だ。
まず #container{ の中身を見てみると、
#container{ font-size:12px; width:860px; margin:10px auto; text-align:left; border-top:10px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid #ccc; }
あるね。
これはどういうことかというと、
上の部分に隙間が空いているのがわかる？
margin padding とは空白部分のこと。違いは「内側の空白」か「外側の空白」かだ。
ということは、先ほどの#container{ のmargin:10px auto; は、「上下に10pxの空白」「左右は自動で調整」ということになる
なぜ、上下と左右なのかというと、
本来は margin:10px auto 10px auto; （上 右 下 左）となるのを簡略化しているのだ。
これが margin：10px； になると、「上下左右に10pxの空白」となる。
逆にこれが padding だと「内側の空白」になる。
なんか難しくなってしまった感じがあるが、要するに、ソースの中の width の数字を書き換えるだけで幅の変更は出来るのだ。
数字を書き換える際には、margin padding の数字も考慮に入れましょう。
＊margin padding の数字は変更しない。
参考程度に自分のソースを載せておく
#container{ font-size:12px; width:860px; margin:10px auto; text-align:left; border-top:10px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid #ccc; }
#content{ width:510px; float:left; padding:0px 5px 20px 5px; }
#links{ width:160px; float:left; text-align:left; margin:20px 0px 0px 0px; padding:0px 5px 20px 5px; overflow:hidden;
}
.blog{ width:510px; margin:0px 0px 0px 0px; }
.main{ width:470px; color:#767676; font-size:12px; padding:30px 16px 15px 16px; overflow:auto; line-height:190%; }
