Blogger にも「続きを読む」機能、その２ 
先日、Blogger にも「続きを読む」機能という記事を書きました。クリボウの記事を読んで導入された方から多く出されたのは、「つねに続きを読むリンクが出るんですね」という声。そうなんです、先日紹介した方法だと投稿内容の長短に関わらず、必ず「続きを読む」リンクが表示されるのです。
そこで今回紹介するのは、「続きを読む」リンクをつけたりつけなかったりする方法について。この方法なら、特に長くなった投稿にだけ「続きを読む」リンクをつけ、短い投稿の場合はそのまま全文表示するということができます。
「続きを読む」機能は、Blogger のコンディショナルタグを使い、トップページ（アーカイブページも）と記事単独ページのスタイルシートとを書き分けることで、記事の表示される内容（の見た目）を変化させています。
今回は、「続きを読む」リンク自体を投稿本文に含むことで、本文が省略されているときにはリンクを表示し、展開されているときにはリンクを非表示にします。省略部分の表示非表示とリンクの表示非表示とがちょうど逆になる感じ。リンク自体を投稿に含む方法なので、投稿ごとに「続きを読む」にするかどうかを設定しやすくなります。
まあいつものことながら、仕組みを完全に理解していなくても、次の手順で導入することが出来ますので、ぜひやってみてください。
テンプレートの設定
記事を投稿するときにすること
以上、「続きを読む」機能を投稿ごとに設定する方法でした。前回の記事で「続きを読む」機能を導入された方は、前回したテンプレートの変更部分を今回のものと差し替えて、やってみてくださいね。
参考：PrestonCafe: Blogger.comで追記のあるものだけMore...と表示する方法
そこで今回紹介するのは、「続きを読む」リンクをつけたりつけなかったりする方法について。この方法なら、特に長くなった投稿にだけ「続きを読む」リンクをつけ、短い投稿の場合はそのまま全文表示するということができます。
「続きを読む」機能は、Blogger のコンディショナルタグを使い、トップページ（アーカイブページも）と記事単独ページのスタイルシートとを書き分けることで、記事の表示される内容（の見た目）を変化させています。
今回は、「続きを読む」リンク自体を投稿本文に含むことで、本文が省略されているときにはリンクを表示し、展開されているときにはリンクを非表示にします。省略部分の表示非表示とリンクの表示非表示とがちょうど逆になる感じ。リンク自体を投稿に含む方法なので、投稿ごとに「続きを読む」にするかどうかを設定しやすくなります。
まあいつものことながら、仕組みを完全に理解していなくても、次の手順で導入することが出来ますので、ぜひやってみてください。
テンプレートの設定
表示切り替えスタイルシート
Blogger 管理画面「テンプレート」から、テンプレート head 要素内（
Blogger 管理画面「テンプレート」から、テンプレート head 要素内（
<head> と </head> の間）に、次のコードを貼り付けます。貼り付ける位置は </head> の直前がいいと思います。テンプレート編集後には、ブログを再構築します。
<style type="text/css">
<MainOrArchivePage>
div.fullpost {
display: none;
}
div.readmore {
display: block;
}
</MainOrArchivePage>
<ItemPage>
div.fullpost {
display: block;
}
div.readmore {
display: none;
}
</ItemPage>
</style>
<MainOrArchivePage>
div.fullpost {
display: none;
}
div.readmore {
display: block;
}
</MainOrArchivePage>
<ItemPage>
div.fullpost {
display: block;
}
div.readmore {
display: none;
}
</ItemPage>
</style>
記事を投稿するときにすること
記事本文を省略する場合
投稿本文中の、トップやアーカイブページで省略したい部分を
「続きを読む」リンクは
記事本文を省略しない場合
前項の fullpost および readmore クラスの div 要素を使わずに、普通に投稿すれば全文が表示されます。
投稿本文中の、トップやアーカイブページで省略したい部分を
<div class="fullpost"> と </div> ではさみます。「続きを読む」リンクは
<div class="readmore"> と </div> ではさんで投稿してください。投稿する本文は下のようになると思います。
ここには記事冒頭の、トップやアーカイブページでも表示される文章を書きます。
<div class="fullpost">
ここにはトップやアーカイブページで省略される（記事単独ページでだけ表示される）文章を書きます。
</div>
<div class="readmore">
<a href="この投稿自体の URL">[続きを読む]</a>
</div>
リンクする URL は、記事を一度投稿して、記事の URL を確かめてからあらためて書き入れるのが一番確実です。記事投稿時点で、記事単独ページの URL を予想して書き入れる場合には、投稿のタイトルと URL の関係を参考にしてください。<div class="fullpost">
ここにはトップやアーカイブページで省略される（記事単独ページでだけ表示される）文章を書きます。
</div>
<div class="readmore">
<a href="この投稿自体の URL">[続きを読む]</a>
</div>
記事本文を省略しない場合
前項の fullpost および readmore クラスの div 要素を使わずに、普通に投稿すれば全文が表示されます。
以上、「続きを読む」機能を投稿ごとに設定する方法でした。前回の記事で「続きを読む」機能を導入された方は、前回したテンプレートの変更部分を今回のものと差し替えて、やってみてくださいね。
参考：PrestonCafe: Blogger.comで追記のあるものだけMore...と表示する方法
Post a Comment