"Blogger"でトップページに省略版の投稿記事を表示させる方法。

BloggerGoogleが提供するブログサービスです。

フリーなのは良いんですが、何かと個性的でして・・・。 他のブログに慣れてしまったからなのでしょうか、Bloggerを扱うのは厄介だと感じている今日この頃です。 例えば、TrackBack機能がないとかです(笑)

もう1つ気になっているのは、ブログのトップページの表示方法。 なぜいきなり記事全部を表示させるんだよ! ヾ(- -;) マァマァ

ここに省略版を作る方法が書かれていました。

省略版の投稿の要約部分を作成するにはどうすればよいですか?(42215)

 【省略表示とは?】

 −それぞれの投稿記事の最初の数行だけが表示する
 −続きはリンクをクリックすることで読むことができる

【省略表示の利点とは?】

 −1ページに長文の記事をいくつも表示する場合に便利です

なるほど!でもそのくらい自動的にやってほしいよぉ。

Beginning Google Blogger
著者: Heather Wright-porto
言語: 英語(English)
ペーパーバック: 192ページ
出版社: Apress
発売日: 2010/7/31
参考価格: 2,187円

Table of Contents
1: Introduction
2: Getting Started
3: Blog Layout and Design
4: Making the Most of Your Blog
5: Setting Up a Custom Domain
6: Working with Images
7: Advanced Design and Layout
8: Setting Up a Blog Store
9: Troubleshooting and Blog Help

少し面倒でしたので、その手順メモを残しておきます。 参考までに。

【準備】 投稿ページを有効にする。
【手順1】 スタイルシートに条件分岐を追加する。
【手順2】 "Read more!"リンクを追加する。

【仕上げ】 投稿記事に省略表示用コードを埋め込む。

---

まず、投稿ページを有効にします。 デフォルトで有効になっていると思いますので、この部分は確認するだけでOKです。

【準備】 投稿ページを有効にする。

 ヽ(。_゜)ノヘッ? ←いきなりこんなでしたw

投稿ページを有効にするにはどうすればよいですか?(42049)

  設定
 →アーカイブ
 →投稿ページを有効にしますか?
「はい」
 →設定を保存します

補足説明。 「はい」が選択不可になっている場合もありますが、「いいえ」になっていなければ大丈夫です。 選択できない理由は、おそらく「設定→コメント→プレースメントからのコメント」の設定が「下記の投稿を埋め込みました」となっているからです。 これを「フル ページ」もしくは「ポップアップ ウィンドウ」に変更すれば、選択可能になります。

次に、テンプレートを編集し、2つの特殊なコードを追加します。

【手順1】 スタイルシートに条件分岐を追加する。

 デザイン
 →HTMLの編集
 →ウィジェットのテンプレート展開

  ここにチェックを入れます

 テンプレートに書かれたコードからスタイルタグ…
 …「<style」または「</style>」…を検索し、
 その間に指定されたコードを挿入します。

(レイアウトの場合)
<b:if cond='data:blog.pageType == "item"'>
   span.fullpost {display:inline;}
<b:else/>
   span.fullpost {display:none;}
</b:if>

このコードでは、ブログの記事ページの種類を見て、本文をインライン展開するかどうかを決めます。 ここでは新たに"fullpost"クラスを定義することで、省略表示をするかどうかを区別します。

【手順2】 "Read more!"リンクを追加する。

 同様にテンプレートから「<data:post.body/>」タグを探し、
 その直後に指定されたコードを挿入します。

(レイアウトの場合)
<b:if cond='data:blog.pageType != "item"'><br />
   <a expr:href='data:post.url'>Read more!</a>
</b:if>

このコードでやっていること…本文をインライン展開しない場合には、記事ページの最後に"Read more!"リンクを追加します。 この"Read more!"という文字は自由に変更することもできます。

最後に、それぞれの投稿記事に省略表示用コードを埋め込みます。

【仕上げ】 投稿記事に省略表示用コードを埋め込む。

 投稿
 →HTMLの編集

 先ほど定義した"fullpost"クラスを使ったコードを埋め込みます。

(ここに記事の要約を書きます)
<span class="fullpost">(ここに残りの本文を書きます)</span>

この省略表示用コードをテンプレートに書いておけば、新しい投稿記事を書くたびにコードが挿入されるので便利です。

 設定
 →フォーマット
 →投稿テンプレート

(ここに記事の要約を書きます)
<span class="fullpost">(ここに残りの本文を書きます)</span>

挿入するコードは緑の部分だけでOKです。 この"fullpost"クラスを指定した<span>タグから</span>タグまでの間に書かれた文章はすべて省略され、その代わりに"Read more!"リンクが挿入されます。

以上。

この方法だと、既存の投稿すべてに省略表示用コードを挿入する必要があり、非常に手間が掛かります。 他に良い方法はないものでしょうか・・・^^:

---

応用として、こんな方法もあるようです。

投稿に表示/非表示のリンクを設定するにはどうすればよいですか?(42214)

び、微妙…。