ご好評いただいている「Blogger にも…」「Blogger でも…」シリーズなんですが、今回はトップページやアーカイブページに各記事の冒頭部分だけを載せて、記事の全文は記事単独ページで読んでもらう、いわゆる「続きを読む」「Read More」機能の導入方法を解説したいと思います。
この「続きを読む」機能は、Blogger の標準の機能ではありませんが、Blogger Help にちゃんと導入の仕方が書いてあります。 けれど内容がやはり「上級者向け」ということで少し難解なので（タイトルからして難しいですね…）、このブログであらためて紹介しようというわけなのです。
テンプレートの設定
１．表示切り替えスタイルシート
Blogger 管理画面「テンプレート」から、テンプレート head 要素内（
２．「続きを読む」リンク
同じく「テンプレート」から
Blogger 管理画面「テンプレート」から、テンプレート head 要素内（
<head> と </head> の間）に、次のコードを貼り付けます。他のスタイルシートとのかねあいもあるので、</head> の直前がいいかと。
<style type="text/css">
<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage>
span.fullpost {display:inline;}
</ItemPage>
</style>
<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage>
span.fullpost {display:inline;}
</ItemPage>
</style>
２．「続きを読む」リンク
同じく「テンプレート」から
<$BlogItemBody> を見つけ出し、その直後に次のコードを貼り付けます。
<MainOrArchivePage>
<br />
<a href="<$BlogItemPermalinkURL$>">[続きを読む]</a>
</MainOrArchivePage>
赤字の部分は「Read More!」など、好きな言葉でかまいません。テンプレートが設定できたら、ブログ全体を再構築してください。
<br />
<a href="<$BlogItemPermalinkURL$>">[続きを読む]</a>
</MainOrArchivePage>
記事を投稿するときにすること
投稿本文中の、トップやアーカイブページでは省略したい部分を
<span class="fullpost"> と </span> ではさんで投稿します。はさむ部分は記事の途中から最後までになると思います。こんな感じ↓。
今回はトップページに各記事の冒頭だけ載せて、全文は記事単独ページで読んでもらう、いわゆる「続きを読む」「Read More」機能を解説したいと思います。
<span class="fullpost">この「続きを読む」機能は、Blogger の標準の機能ではありませんが、Blogger Help にちゃんと導入の仕方が書いてあります。……</span>
<span class="fullpost">この「続きを読む」機能は、Blogger の標準の機能ではありませんが、Blogger Help にちゃんと導入の仕方が書いてあります。……</span>
ちなみに
以上の手順で「続きを読む」機能が Blogger でも使えるようになると思います。ご不明な点はコメント欄にお願いします。
この「続きを読む」機能を導入すると、以降は投稿の際に省略する部分を意識する必要が出てくると思います。そこでお勧めなのが投稿フォーマットの編集。
新記事を投稿する際に最初から
投稿テンプレートの設定は Blogger 管理画面「設定 ＞ フォーマット」の「投稿テンプレート」欄で行えるので、上記のコードを入力しておくといいと思います。
この「続きを読む」機能を導入すると、以降は投稿の際に省略する部分を意識する必要が出てくると思います。そこでお勧めなのが投稿フォーマットの編集。
新記事を投稿する際に最初から
<span class="fullpost"></span> というコードが書いてあれば、省略部分の設定を忘れることもないし、コード入力の手間も省けるというわけ。投稿テンプレートの設定は Blogger 管理画面「設定 ＞ フォーマット」の「投稿テンプレート」欄で行えるので、上記のコードを入力しておくといいと思います。
参考：コンディショナルタグとスタイルシート
関連：投稿に表示/非表示のリンクを設定するにはどうすればよいですか
9 comments:
クリボウさん、こんにちは。
"Bloggerにも「続きを読む」機能"を取り上げてくださってありがとうございます＆お知らせまでいただき恐縮しています。
トライしてみてから
またご報告に伺いますねー！
テンプレートを設定すると、「投稿を復活」機能が使えなくなってしまいますね。
とは言うものの、この方式だとトップページは「続きを読む」でも Atom には全文入るので全文フィード推進派の私としても安心して勧められます。
＞ Hit さん
情報ありがとうございました。実は「投稿を復活」機能自体どんなものか知らなかったので、大変勉強になりました。
フィードはたしかに全文がいいですね。
こちらを参考に「続きを読む」をつけてみました。
ありがとうございました。
それでも、最後に表示されたままというのは、まさに「仕様です！」といった感じなんでしょうか。（笑
仕方ないですね。
コメントありがとうございます。たしかにここで紹介した方法だと、記事内容の長短にかかわらず、トップおよびアーカイブページ上の全ての記事に「続きを読む」リンクが表示されてしまいますね。
気づかれたかも知れませんが、この記事自体の「続きを読む」は別の方法をとっていて、テンプレートではなく投稿内に自分自身の記事単独ページへのリンクを入れるということをしています。記事省略部分がトップやアーカイブページで表示されないのとちょうど反対に、トップやアーカイブページでしか表示されない「続きを読む」リンクをつけるというわけ。
うまく説明できるか心配ですが、またあらためて記事にしようと思っているのでしばらくお待ち下さいませ。
おかげさまで、うまく機能しています。
「続きを読む」を取り入れてみたら、だらだら書いちゃいけないんだなと（初めて）気づかされました。なーんて、これは自分の問題なんですね。
これからもよろしくお願いいたします。
ブログ見てみたよ。
なんだかものすごいね。
？？？？？ ばっかしだよ。
クリボウさんの新たな一面を
今になって知ったよ。
また、覗きにきます。
クリボウさん、はじめまして。
数日前からBloggerを使い始めたばかりで、クリボウさんの記事を大いに頼りにさせて頂いております。
今回、「続きを読む」機能のわかりやすいご説明のおかげで何とか機能させることができました！
有難うございます。
リンクも勝手に貼らせて頂いてしまいました。
どうぞ宜しくお願い致します。
＞ cavacavien さん
良かったですね。この記事を書いた甲斐がありました。また Blogger で分からないことがあったら Blogger リング掲示板か、コメントで言って下さいね。
＞ あきさん
旧友にブログを見られるというのは、気恥ずかしいものですね。あまりおもしろくないかもしれませんが、またどうぞ。
はてな出張所の方が、ばかばかしくておもしろいかもしれません。
＞ Mo-Waage さん
はじめまして。リンクもコメントも大歓迎です。こちらこそ、よろしくお願いします。
Post a Comment