Blogger にも「続きを読む」機能
トップページやアーカイブページに、各記事の冒頭部分だけを載せ、記事の全文は記事単独ページで読んでもらうという、いわゆる「続きを読む」「Read More」機能について、このページで説明します。
この機能は Blogger 標準のものにはなっていませんが、Blogger Help にちゃんとその導入の仕方が書いてあります。
そこで、今回は以下のページを参考にします。
テンプレートタグを用いて、トップページやアーカイブページと、記事単独ページとで、スタイルシートを書き分けることで、それぞれのページに表示される内容の見栄えを変化させるというのが、この「続きを読む」機能の仕組みです。導入方法と記事の投稿の仕方を下に示します。
テンプレートのカスタマイズ
レイアウトテンプレートとクラシックテンプレートとで、テンプレートの変更箇所が異なります。
記事を投稿するときにすること
ちなみに
この機能は Blogger 標準のものにはなっていませんが、Blogger Help にちゃんとその導入の仕方が書いてあります。
そこで、今回は以下のページを参考にします。
テンプレートタグを用いて、トップページやアーカイブページと、記事単独ページとで、スタイルシートを書き分けることで、それぞれのページに表示される内容の見栄えを変化させるというのが、この「続きを読む」機能の仕組みです。導入方法と記事の投稿の仕方を下に示します。
テンプレートのカスタマイズ
レイアウトテンプレートとクラシックテンプレートとで、テンプレートの変更箇所が異なります。
レイアウトテンプレートの場合、
１．管理画面「テンプレート ＞ HTML の編集」ページを開き、「ウィジットのテンプレートを展開」のチェックボックスにチェックを入れます。
２．テキストエリアの中から次のコードを見つけ出し（青字部分は各ブログで異なります）、
１．管理画面「テンプレート ＞ HTML の編集」ページを開き、「ウィジットのテンプレートを展開」のチェックボックスにチェックを入れます。
２．テキストエリアの中から次のコードを見つけ出し（青字部分は各ブログで異なります）、
<b:widget id='Header1' locked='false' title='BLOG NAME (Header)' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a href='http://blogger-beta-widgets.blogspot.com/'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
下の赤字で示したコードを挿入して、「テンプレートを保存」ボタンをクリックしてください。
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a href='http://blogger-beta-widgets.blogspot.com/'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
<b:widget id='Header1' locked='false' title='BLOG NAME (Header)' type='Header'>
<b:includable id='main'>
<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
.fullpost {display:block;}
.readmore {display:none;}
<b:else/>
.fullpost {display:none;}
.readmore {display:block;}
</b:if>
</style>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a href='http://blogger-beta-widgets.blogspot.com/'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
<b:includable id='main'>
<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
.fullpost {display:block;}
.readmore {display:none;}
<b:else/>
.fullpost {display:none;}
.readmore {display:block;}
</b:if>
</style>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a href='http://blogger-beta-widgets.blogspot.com/'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
クラシックテンプレートの場合には、管理画面「テンプレート」から、テンプレート 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 を確かめてからあらためて書き入れるのが一番確実です。<div class="fullpost">
ここにはトップやアーカイブページで省略される（記事単独ページでだけ表示される）文章を書きます。
</div>
<div class="readmore">
<a href="この投稿自体の URL">[続きを読む]</a>
</div>
・記事本文を省略しない場合
前項の fullpost および readmore クラスの div 要素を使わずに、普通に投稿すれば全文が表示されます。
ちなみに
この「続きを読む」機能を導入すると、以降投稿の際に省略する部分を意識する必要が出てくると思います。そこでお勧めなのが投稿フォーマットの編集です。
新記事を投稿する際に最初から上記のコードが書いてあれば、省略部分の設定を忘れることもないし、コード入力の手間も省けるというわけです。
投稿テンプレートの設定は Blogger 管理画面「設定 ＞ フォーマット」の「投稿テンプレート」欄で行えるので、上記のコードを入力しておくといいと思います。
新記事を投稿する際に最初から上記のコードが書いてあれば、省略部分の設定を忘れることもないし、コード入力の手間も省けるというわけです。
投稿テンプレートの設定は Blogger 管理画面「設定 ＞ フォーマット」の「投稿テンプレート」欄で行えるので、上記のコードを入力しておくといいと思います。
