Bloggerの見栄えチューニング

1）始めに，自分の「Wiki:SrJrSwim」のCSSを読み込ませる。

• Bloggerのポスト・ページをブラウザで見ながら，
  • 「デザイン→テンプレート・デザイナー→アドバンスト→CSSを追加」を順番にクリックして，
  • 「Wiki:SrJrSwim」のCSSを読み込む；

2）サイドバーにあるgadgetsのタイトルが大きいのと，ポストのタイムスタンプの形状も大きすぎるので，調整する。

• Bloggerのポスト・ページをブラウザから「ページのソースのソースを見る」をクリックして，その「html」のソース・ファイルを開く。

3）サイドバーのタイトルの変更

• 「html」のソース・ファイルで，「選択したGadzet名」検索すると，例えばギャゼット名「ポスト」を探すと；

</div><div class='widget BlogArchive' id='BlogArchive1'>
<h2>ポスト</h2>

• Bloggerのポスト・ページをブラウザで見ながら，
• 「デザイン→HTML編集→テンプレートすべてダウンロード」をクリックし，
• 自分のコンピュータにDLした「.xml」ファイルをエディタで開き，
  • 「title='ポスト'」で検索し，その下の方に

<b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>

• 上で，「h2」→「h5」と変更。

4）タイムスタンプの変更

• 「html」をブラウザで見て，そのタイムスタンプ部分を探す；

<h2 class='date-header'><span>2011年6月8日水曜日</span></h2>

• 先に自分のコンピュータにDLした「.xml」ファイルで
  • 「class='date-header'」を検索し，「h2」→「h6」；
    • 「<h2 class='date-header'><span><data:post.dateHeader/></span></h2>」を
    • 「<h6 class='date-header'><span><data:post.dateHeader/></span></h6>」 

5） CSSに適当な「h5，h6」を追加定義する。

ーーーー
このポストの履歴

1. 開始 2011-06-09 (木) 00:25