Blogger のテンプレートをカスタマイズ - GarlandBloggerTemplateを使って

Blogger に標準で用意されているテンプレート以外のデザインに変更する のつづき

1. カスタマイズの内容

前回、Blogger のテンプレートを Garland Theme に変更した。

このテンプレートを、次のようにカスタマイズしたい。

1. 全体を 3 カラムから、2 カラムにする
2. 記事のタイトルが見にくいので、区切りが分かりやすいデザインにする
3. 本文の文字が小さいので、普通の大きさにする
4. 全文検索フィールドがなくいので、表示する。
5. 右上のリンクを変更する。

 

2. 2カラムに変更

全体を 3 カラムから、2 カラムにするには、

• テンプレート > 要素

において、右のカラムを使わないようにする。

次に、テンプレートの編集を行う。

• テンプレート > HTMLの編集

を選択する。

変更する対象を検索するには、 Firefox では Ctrl + F で検索する。

body.sidebars #squeeze を探し、 margin の値を次のように変更した。

margin: 0px 10px 0px 210px;

 

3. タイトルの区切りを明確にする

.post-title に、次の要素を追加する。

border-bottom: solid 1px; border-left: solid 20px;m; padding: 5px; border-color: #0070A7;

 

4. 文字を普通サイズにする

body の font を次のように変更する。

font: medium Verdana, Arial, Helvetica, sans-serif;

 

5. 全文検索フィールドの表示

次に示す #navbar-iframe を削除する

#navbar-iframe { height: 0px; visibility: hidden; display: none; }

 

6. リンクの変更

以下の要素を探し出す。 ( About Us などを入力して検索する)

<ul class='links primary-links'> <li class='page_item'><a href='#about'>About Us</a></li> <li class='page_item'><a href='#contact'>Contact Us</a></li> </ul>

、太文字の部分を、メインメニューとして使用したい文字列とリンク先に変える。

 

7. 変更した結果

HTML をカスタマイズした結果、以下の表示になった。

修正対象を絞り込む方法は、以下を参照。

• cf. HTML, CSS の動的な編集 - Firebug, Internet Explorer Developer Toolbar を使って