Blogger に標準で用意されているテンプレート以外のデザインに変更する のつづき
1. カスタマイズの内容
前回、Blogger のテンプレートを Garland Theme に変更した。
このテンプレートを、次のようにカスタマイズしたい。
- 全体を 3 カラムから、2 カラムにする
- 記事のタイトルが見にくいので、区切りが分かりやすいデザインにする
- 本文の文字が小さいので、普通の大きさにする
- 全文検索フィールドがなくいので、表示する。
- 右上のリンクを変更する。
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 をカスタマイズした結果、以下の表示になった。
修正対象を絞り込む方法は、以下を参照。
0コメント:
コメントを投稿