2008年12月30日火曜日

Bloggerに「続きを読む」リンクを導入する方法

以前の記事「関連記事リストを追加してみた」で、BloggerのTips的なものを書いたので、iPhone工房に導入している、他のBlogger Tipsも少しずつまとめてみることにしました。

今回は、“「続きを読む」リンクを導入する方法”です。

Bloggerには、他のブログによくある、記事一覧ページでは記事の先頭(要約)部分のみ表示し、「続きを読む」リンクで記事個別ページ(全文表示)へジャンプする、といった構成が標準ではサポートされていません。

もっとも、Bloggerの投稿フォームや設定フォームではできない、というだけで、Bloggerのヘルプに一応やり方は載っています。

ただし、このヘルプに記載されている方法には、
  • 常に「続きを読む」リンクが表示されてしまう(続きがなくても)
  • 記事の「続き」の部分をいちいち“<span class='fullpost'>...</span>”で括らなければならない
という問題点があります。

このうち、1番目の問題点“常に「続きを読む」リンクが表示されてしまう”を改善した方式をここで説明します。
# ここで説明するのはレイアウトテンプレートでの組み込み方です。クラシックテンプレートの場合は、Bloggerのヘルプを参照して、適宜読み替えてください。
  1. Bloggerの[設定]-[アーカイブ]で「投稿ページ」を有効にします。
    # 普通は有効になっているはずですが、念のため。

  2. テンプレートに「続きを読む」リンク用のタグを追加する
    Bloggerの[レイアウト]-[HTMLの編集]ページで、[ウィジットのテンプレートを展開]にチェックを入れ、テンプレートを以下のように変更します。変更箇所は2箇所あります。

    一つ目は、「続きを読む」リンク用のスタイルシートです。普通、スタイルシートはHTMLヘッダー部(<head>...</head>)に入れるのですが、別のテンプレートに変更した場合でも引き継がれるように、「ページヘッダー」ガジェットの中に入れています。
    <b:widget id='Header1' ... type='Header'>
    ・・・
    <b:includable id='main'>
      <!-- add by Magica -->
      <style>
      <b:if cond='data:blog.pageType == "item"'>
        span.fullpost {display:inline;}
      <b:else/>
        span.fullpost {display:none;}
      </b:if>
      a.readmore {visibility:hidden;}
      </style>
      <!-- /add by Magica -->

      <b:if cond='data:useImage'>
    上のように、<b:widget id='Header1' ... type='Header'>タグの下の最初の<b:includable id='main'>タグの直下に、斜体字のコードを挿入します。

    二つ目は「続きを読む」リンク表示用のコードです。
    <b:includable id='post' var='post'>
    ・・・
    <div class='post-body entry-content'>
      <data:post.body/>
      <!-- add by Magica -->
      <b:if cond='data:blog.pageType != "item"'><br/>
        <a class='readmore' expr:href='data:post.url'>続きを読む...</a>
      </b:if>
      <!-- /add by Magica -->

      <div style='clear: both;'/> <!-- clear for photos floats -->
    上のように、<data:post.body/>タグの直下に斜体字のコードを挿入します。

  3. 「続きを読む」リンク表示切替用のJavaScriptを追加する
    Bloggerの[レイアウト]-[ページ要素]ページで、HTML/JavaScriptガジェットを追加して、下のJavaScriptコードを「ブログの投稿」ガジェットの下に追加します。
    <!-- ReadMore begin -->
    <script language="javascript" type="text/javascript">
    <!--
    {
        var elms=getElements(document.body,"div","post-body");
        for(var i=0; i<elms.length; i++) {
            var e=elms[i];
            var es=getElements(e,"span","fullpost");
            if(es.length>0) {
                var er=getElements(e,"a","readmore");
                if(er.length>0) {
                    if(document.documentElement.getAttribute("style") == document.documentElement.style) {
                        er[0].style.visibility="visible";
                    } else {
                        er[0].setAttribute("style","visibility: visible;");
                    }
                }
            }
        }
    }

    function getElements(elm, tagName, className){
        var arRslt = new Array();
        var elms = (tagName == "*" && elm.all)
                        ? elm.all : elm.getElementsByTagName(tagName);

        className = className.replace(/\-/g, "\\-");
        var re = new RegExp("(^|\\s)" + className + "(\\s|$)");

        for(var i=0; i<elms.length; i++){
            var e = elms[i];      
            if(re.test(e.className)){
                arRslt.push(e);
            }  
        }
        return arRslt
    }

    //-->
    </script>
    <!-- ReadMore end -->
    #このスクリプトは“Bloggerに「関連記事リスト」を。”で使われているスクリプトを参考にしています。

  4. 記事の「続き」の部分を“<span class='fullpost'>...</span>”で括る
    例えば、
    記事の要約です。
    <span class="fullpost">残りの本文です。</span>
    のようにします。
これで、記事一覧の表示時には、記事の要約(“<span class='fullpost'>...</span>”で括られて無い部分)と「続きを読む」リンクが表示され、「続きを読む」リンクをクリックすると、個別記事ページで記事の全文が表示されるようになります。

記事一覧で全文を表示したい場合は、単に“<span class='fullpost'>...</span>”を使わずに記事を投稿するだけです。この場合、Bloggerヘルプで説明されている方法とは違って、「続きを読む」リンクも表示されません。

なお、2番目の問題点「いちいち“<span class='fullpost'>...</span>”で括らなければならない」については、うまい解決方法が見つかっていないのですが、「投稿テンプレート」に“<span class='fullpost'></span>”を設定しておくことで、ある程度は軽減されます。

関連する記事

5 コメント:

kysmyg さんのコメント...

はじめまして。Blogger初心者です。
検索でこちらの記事を参考に、[続きを読む]の設置ができました。
ありがとうございます。

Magica さんのコメント...

お役に立ててなによりです(^^)。
Bloggerはくせが強いですが、色々弄れる所も多いですので、頑張って下さい。
では、今後ともよろしく。

bBeegle さんのコメント...

はじめまして。
参考にさせていただきうまくできました。
わかりやすくてすごい助かりました。

TABE さんのコメント...

Magicaさん、こんにちは。

Google検索でたどり着きました。
「続きを読む」導入、一番簡単な方法に思えます。
助かりました。今後も参考にさせていただきます。
Twitterもフォローさせてください。

kick さんのコメント...

最近Bloggerに切り替えたばかりでよく分からないことばかりだったので「続きを読む」の追加設置が出来ました。
ありがとうございます。

BlogPeople People