Okinawa LOVE-TV.com

沖縄の気になる情報等を発信していきます。

web

初心者でも簡単に出来るブログの"プチ"カスタマイズ方法 vol.01

2016/06/26

先日、沖縄の地方ブログTI-DAブログで書いているブログのテンプレートを変更(2カラム→3カラム)した際に貼り付けている画像や広告のサイズ等が合わなかったで、横幅などを広げてテンプレートを"プチ"カスタマイズしました。

ほんのちょっとの事。どうでもいい人にはどうでもいい事。だけど、このほんのちょっとのことが結構重要だったりもするわけで・・・

初心者さんは結構悩んでる方が居るんではないかと言う事で、「このポイントを抑えておけばいける!」って所をお教えします。

 

カスタマイズ法

今回はブログの「幅を広く」します。

説明するブログは沖縄地方ブログのTI-DAブログ」

 

habacas1

1.まず、TI-DAの管理画面に入り、左のメニューにある「テンプレート」をクリック

 

habacas2

2.テンプレートの編集・再選択の所にある「カスタマイズ」をクリック

 

habacas3

3.スタイルシートの中身を「メモ帳」に「コピー&ペースト」しましょう

 

habacas4

4.「編集」から「検索」をクリックし、検索する文字列に「width」と記入します

「width」は直訳すると「幅」どんどん検索していって、まず確認。

 

habacas5

変更する箇所。

#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; }

あるね。

これはどういうことかというと、

 

habacas6

上の部分に隙間が空いているのがわかる?

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%; }

-web
-,