Blogger ClassicMacOS9のテーマへ、続きを読むボタンを追加する短いコード

ClassicMacOS8.5~9くらいのテーマを自作している当ブログ。Topページやラベル、アーカイブページなどの一覧ページにて、個別記事のすべて本文が表示されてスクロールが大量に発生するので、つづきを読むページを設置することにしました。

続きを読む ボタンを<more>やjsを使用しないで表示する

こちらのコードを適当なところ（後述）へコピペください。

<b:if cond='data:blog.pageType == &quot;index&quot;  or data:blog.pageType == &quot;archive&quot;'>
  <span class='pageMore'>
    <!-- page more in index pages -->
    <style>
    .entry .post-body{
      height: 180px;
      overflow: hidden;
      }
    </style>
    <a expr:href='data:post.url'>続きをよむ</a>
  </span>
</b:if>     

とっても短いコードになりますがこのように機能しています。コードでやっていることは以下です。

• トップページ、ラベルページ、アーカイブ、検索結果などのpageType = indexのページにて、
• 記事要素の高さを180pxにして溢れたものを非表示にし、
• <a href="記事URL">続きを読む</a>を追加

他の方が作成したBloggerThemeを色々眺めていて面白いと思ったのが、<b:if cond='data:blog.pageType == "index"'>（もし現在表示しているページがindexなら）でpageTypeを判定したあとに<style>を記述して、個別記事のみで適用させるcssを指定する方法。真似させていただきました。

CSSのセレクタを間違うと機能しないかも・・・・

<style>
    .entry .post-body{
      height: 180px;
      overflow: hidden;
 }
</style>

.post-bodyが私のテーマでは投稿本文になっているので、ちょうどよく記事を途中で端折ってくれています。もしお使いのテーマによっては本文のクラスが異なることがあるかもなので適宜読み替えください。おそらくですが、.post-bodyも.post-footerも、どのテーマにも存在すると思われます。

テンプレートのどこにコピペすればいいのか？？

 上記コードはキチンと動作するのですがコピペする位置が難しい。私は<div class='post-footer'> 〜 </div>に上記コードを設置してみました。

「<a>続きを読む</a>タグが、どこにあれば適切か？」
を考えて.post-footerに。ブチャラティ厳しすぎ。htmlエディタを開き、エディタ内にフォーカスがある状態でctrl + f 。検索小窓にclass='post-footer'と打ち込めば当該箇所までジャンプ。御コピペ納くださいませ。さいごまでおよみいただきありがとうございました。