今回は、“「続きを読む」リンクを導入する方法”です。
Bloggerには、他のブログによくある、記事一覧ページでは記事の先頭(要約)部分のみ表示し、「続きを読む」リンクで記事個別ページ(全文表示)へジャンプする、といった構成が標準ではサポートされていません。
もっとも、Bloggerの投稿フォームや設定フォームではできない、というだけで、Bloggerのヘルプに一応やり方は載っています。
ただし、このヘルプに記載されている方法には、
- 常に「続きを読む」リンクが表示されてしまう(続きがなくても)
- 記事の「続き」の部分をいちいち“<span class='fullpost'>...</span>”で括らなければならない
このうち、1番目の問題点“常に「続きを読む」リンクが表示されてしまう”を改善した方式をここで説明します。
# ここで説明するのはレイアウトテンプレートでの組み込み方です。クラシックテンプレートの場合は、Bloggerのヘルプを参照して、適宜読み替えてください。
- Bloggerの[設定]-[アーカイブ]で「投稿ページ」を有効にします。
# 普通は有効になっているはずですが、念のため。 - テンプレートに「続きを読む」リンク用のタグを追加する
Bloggerの[レイアウト]-[HTMLの編集]ページで、[ウィジットのテンプレートを展開]にチェックを入れ、テンプレートを以下のように変更します。変更箇所は2箇所あります。
一つ目は、「続きを読む」リンク用のスタイルシートです。普通、スタイルシートはHTMLヘッダー部(<head>...</head>)に入れるのですが、別のテンプレートに変更した場合でも引き継がれるように、「ページヘッダー」ガジェットの中に入れています。<b:widget id='Header1' ... type='Header'>上のように、<b:widget id='Header1' ... type='Header'>タグの下の最初の<b:includable id='main'>タグの直下に、斜体字のコードを挿入します。
・・・
<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:includable id='post' var='post'>上のように、<data:post.body/>タグの直下に斜体字のコードを挿入します。
・・・
<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 --> - 「続きを読む」リンク表示切替用のJavaScriptを追加する
Bloggerの[レイアウト]-[ページ要素]ページで、HTML/JavaScriptガジェットを追加して、下のJavaScriptコードを「ブログの投稿」ガジェットの下に追加します。<!-- ReadMore begin -->#このスクリプトは“Bloggerに「関連記事リスト」を。”で使われているスクリプトを参考にしています。
<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 --> - 記事の「続き」の部分を“<span class='fullpost'>...</span>”で括る
例えば、記事の要約です。
のようにします。
<span class="fullpost">残りの本文です。</span>
記事一覧で全文を表示したい場合は、単に“<span class='fullpost'>...</span>”を使わずに記事を投稿するだけです。この場合、Bloggerヘルプで説明されている方法とは違って、「続きを読む」リンクも表示されません。
なお、2番目の問題点「いちいち“<span class='fullpost'>...</span>”で括らなければならない」については、うまい解決方法が見つかっていないのですが、「投稿テンプレート」に“<span class='fullpost'></span>”を設定しておくことで、ある程度は軽減されます。
関連する記事
5 コメント:
はじめまして。Blogger初心者です。
検索でこちらの記事を参考に、[続きを読む]の設置ができました。
ありがとうございます。
お役に立ててなによりです(^^)。
Bloggerはくせが強いですが、色々弄れる所も多いですので、頑張って下さい。
では、今後ともよろしく。
はじめまして。
参考にさせていただきうまくできました。
わかりやすくてすごい助かりました。
Magicaさん、こんにちは。
Google検索でたどり着きました。
「続きを読む」導入、一番簡単な方法に思えます。
助かりました。今後も参考にさせていただきます。
Twitterもフォローさせてください。
最近Bloggerに切り替えたばかりでよく分からないことばかりだったので「続きを読む」の追加設置が出来ました。
ありがとうございます。
コメントを投稿