Bloggerに「続きを読む...」を追加

Bloggerに「続きを読む...」機能を追加してみました。

これ、全くの他力本願で人様のサイトの内容 I saw seashells.: Blogger で「続きを読む」機能を。-- 3.5 をそのまま実行しただけです。

I saw seashells. さんの所では色々模索した結果、テンプレートに細工 + JavaScript で落ち着いたようですが、私の所では敢えて没になった テンプレートに細工 + CSS(コレもテンプレート内ですけどね) の方式でやりたいと思います。

ブラウザによってうまく表示されない事があるようですが、そもそも誰も見ていないようなページなのでお構いなしです。

変更手順は以下の通り

1. 「レイアウト」→「HTMLの編集」 ページを開く
2. 「ウィジェットのテンプレートを展開」チェックボックスをチェックする
3. 「</head>」を検索して直前に

   <style type="'text/css'">
    <b:if cond="'data:blog.pageType">
      .fullpost {display:block;}
      .readmore {display:none;}
    <b:else/>
      .fullpost {display:none;}
      .readmore {display:none;}
      .fullpost + .readmore {display:block;}
    </b:if>
   </style>

   を挿入する
4. 「<data:post.body>」を検索して

   <p><data:post.body/></p>

   を

   <p>
    <data:post.body/>
    <b:if cond='data:blog.pageType != "item"'>
      <div class='readmore'>
        <a expr:href='data:post.url'>
          続きを読む...
        </a>
      </div>
    </b:if>
   </p>

   に置き換える

後は各記事の中で一覧に表示しない部分を <div class="fullpost"> と </div> で囲むだけ。
注意点は記事の最後に書いた </div>の後ろには何も書かない事、改行もダメって事です。
(途中を省略する事は出来ません)
先人たちの知恵のおかげでとっても簡単に設定できたのでした！
なお、何でこうなるのかは I saw seashells. さんの所を見てください(^^;)