2010年6月27日日曜日

全ての記事の最初や最後に、決まり文句や固定リンクを追加する方法 - Blogger

Bloggerブログの見栄えを変更する
全ての記事の最初や最後に決まり文句を入れたい時は、テンプレートを変更する方法があります。後で変更する事も、簡単に出来ます。

但し、テンプレートデザイナーを使うと、最初からやり直しになるかもしれません。この方法を使う時は、デザインが完全になってから行う事をおすすめします。


**** 手順
o テンプレートを編集する画面を開きます。
   + 手順は「Blogger をCSSカスタマイズする方法」の2番(徹底的にカスタマイズする方法)です。
o 念の為、テンプレートをバックアップします。
o 入力欄の右上にある、「ウィジェットのテンプレートを展開」にチェックを入れます。
o 「<data:post.body/>」が書かれている行を見つけて、その前後辺りに文字等を追加します。
   + 具体的な方法は、この下にある「変更の例」をご覧下さい。
o 変更が終わりましたら
   + 「プレビュー」ボタンを押して、トップページを確認。
   + 「テンプレートを保存」ボタンを押して、他のページの内容も確認します。


**** 変更の例
変更前(= ここでは、左の空白を詰めて表示しています。)
----------------
<div class='post-body entry-content'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>
----------------

o 変更後の例1。文の最初に決まり文句を入れて、改行します。
----------------
<div class='post-body entry-content'>
タイが曲がっていましてよ。<br />
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>
----------------

o 変更後の例2。記事が単独表示された時だけ、下に、「この頁の上に戻る」リンクを入れます。
----------------
<div class='post-body entry-content'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='xDataEnd'><a href='#' rel='nofollow'>↑この頁の上に戻る</a></div>
  </b:if>
</div>
----------------
o 後ろに追加する場合、clear: both; の行の後ろに入れる事をおすすめします。
   + clear: both;は、CSSの、位置に関する特殊設定を無効にする命令です。
o b:ifタグは、Bloggerの専用タグです。この例のように、特定ページの時だけ表示させる事が出来ます。
o rel='nofollow'はお好みで。検索エンジンに「このリンクは意味が無いよ」と伝えます。
o classタグを指定しておくと、CSSを使って、見栄えを大幅に変える事が出来ます。
----------------
.xDataEnd { text-align: right; } /* 右寄せしたくなった時 */
----------------


==
関連ページ:
    ▼Bloggerブログの見栄えを変更する
    ▼Blogger
    ▼制作メモ
    > BloggerのHTMLカスタマイズに関する公式情報の在り処
    Blogger in Draft = Bloggerの最新機能を試用する
    HTMLの編集やHTMLモードで入力する時に、変換が必要になる記号