クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

> > Blogger beta にも「続きを読む」機能

Blogger beta にも「続きを読む」機能

Posted at: 2006-12-05 Label: 4

追記: Blogger の「続きを読む」機能については、
クリボウの Blogger 入門: Blogger にも「続きを読む」機能
にまとめてあります。最新の情報はそちらをご覧下さい。

Blogger ブログに「続きを読む」機能をつける方法として、以前 Blogger にも「続きを読む」機能 と、Blogger にも「続きを読む」機能、その2 という2つの記事を書きました。

この仕組みは、トップページやアーカイブページで表示する内容と、記事単独ページで表示する内容とを、スタイルシートによって切り替えるという方法で実現しています。

Blogger だと head 要素内にコンディショナルタグを入れて、ページの種類によってスタイルシートを書き換えるということが簡単に出来たんですが、Blogger beta では、head 要素内での条件分岐ができません(if 構文はウィジェット内でのみ有効なので)。

そのため Blogger beta のスタイルシートの切り替えはどうしても body 要素内の、どこかのウィジェット内で行うことになります。そこで目をつけたのが、ヘッダーウィジェット。今回はここに書き込むことにしました。


導入方法

1.Blogger beta 管理画面「テンプレート > HTML の編集」ページを開き、「ウィジットのテンプレートを展開」のチェックボックスにチェックを入れます。

2.テキストエリアの中から次のコードを見つけ出し(青字部分は各ブログで異なります)、
<b:widget id='Header1' locked='false' title='BLOG NAME (Header)' type='Header'>
<b:includable id='main'>
  <div class='titlewrapper'>
    <h1 class='title'>
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <data:title/>
      <b:else/>
        <a href='http://blogger-beta-widgets.blogspot.com/'><data:title/></a>
      </b:if>
    </h1>
  </div>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
</b:widget>

次の赤字で示したコードを挿入します。
<b:widget id='Header1' locked='false' title='BLOG NAME (Header)' type='Header'>
<b:includable id='main'>
  <style type='text/css'>
    <b:if cond='data:blog.pageType == "item"'>
      .fullpost {display:block;}
      .readmore {display:none;}
    <b:else/>
      .fullpost {display:none;}
      .readmore {display:block;}
    </b:if>
  </style>

  <div class='titlewrapper'>
    <h1 class='title'>
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <data:title/>
      <b:else/>
        <a href='http://blogger-beta-widgets.blogspot.com/'><data:title/></a>
      </b:if>
    </h1>
  </div>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
</b:widget>

3.「テンプレートを保存」ボタンをクリックすればおしまいです。


投稿の書き方

記事の書き方については、Blogger にも「続きを読む」機能、その2 の「記事を投稿するときにすること」を参考にしてください。


beta に移行してから「続きを読む」が機能しなくなった!という方はぜひお試し下さい。

 参考:Envy Inc.: 「続きを読む」をベータに継承


スポンサードリンク:
お願い:
「この記事役に立った!」と思ったら、ぜひフィード登録をお願いします。 

Comments:4

  1. 確かにポスト内でスタイルを指定すると投稿のたびに同じものが書き出されてしまいますが、ヘッダなら常に一ヵ所で指示できますね。なるほど。
    早速私も試してみます。

    ReplyDelete
  2. まだコードを見ても、何がなんだかさっぱり分からないのですが、参考にさせていただきました。Envyさんとクリボウさんのおかげで設定できました。ありがとうございます。

    ReplyDelete
  3. 今更ですが「続きを読む」の機能を探ってみました。
    「続きを読む」リンクの
    <div class="readmore"> と </div> 、
    そしてリンクする URL は、記事を一度投稿して、記事の URL を確かめてからあらためて書き入れる必要がなくなりました。
    紆余曲折ありましたが詳細はこんな感じです。

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.