2011年6月9日木曜日

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

0 件のコメント:

コメントを投稿