クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

> | > 複数投稿表示ページでタイトル一覧をまず表示する

複数投稿表示ページでタイトル一覧をまず表示する

Posted at: 2009-06-15 Label: , 18

Blogger - 複数投稿表示ページでタイトル一覧をまず表示する

あ、これいいなと思った Blogger カスタマイズ。

ラベルページや検索ページ、アーカイブページといった複数の投稿が並ぶページ(トップページ除く)で、各投稿の内容を表示する前に、まず投稿タイトルの一覧を見せることができます。導入方法は上記リンクからご確認下さい。


クリボウだとこんなの

完全に便乗なんですが、クリボウが使うとしたらこんな感じにするかな?というのも上げておきます。

Blogger - 複数投稿表示ページでタイトル一覧をまず表示する

変更点

  • タイトル一覧から日付を削除 … <data:post.dateHeader/> で表示される日付は、同じ日付に複数の投稿があると片方にしか表示されず、レイアウトが崩れてしまうため。
  • リンク先をページ内に … 複数投稿が表示されている場合、一覧からパーマリンクに飛ぶよりページ内で移動する方が好みなので。パーマリンクを作成していなくても使えるし。
デモ

ここはレイアウトテンプレートじゃないので、動作は「写真日記」でご確認を。こんな感じになります。

導入方法

Blogger 管理画面「レイアウト > HTML の編集」で「ウィジェットのテンプレートを展開」にチェックを入れ、<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> で始まる「ブログウィジェット(投稿表示ウィジェット)」の中に、下記のコードを貼り付けます。

このウィジェット内ならどこでもいいんですが、おすすめは「ステータスメッセージ」の後。セクションが、ウィジェットが、インクルーダブルがと難しく考えずに <b:include data='top' name='status-message'/> を検索して、その次の行へ挿入してしまうのが吉です。

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
  <span>このページの記事一覧</span>
  <ul id='post-title-navigation'>
  <b:loop values='data:posts' var='post'>
    <li>
    <b:if cond='data:post.title'>
      <a expr:href='"#" + data:post.id'><data:post.title/></a>
    <b:else/>
      <a expr:href='"#" + data:post.id'><data:post.id/></a>
    </b:if>
    </li>
  </b:loop>
  </ul>
</b:if>
</b:if>

ということでよかったら一度お試し下さい。
最後になりましたが、面白いアイデアを教えてくださった naminorito さんに大感謝です!


スポンサードリンク:
お願い:
「この記事役に立った!」と思ったら、ぜひフィード登録をお願いします。 

Comments:18

  1. クリボウさま
    いつも参考にさせてもらっています。
    これはいい!と思い、記されているように挿入してみたのですが、なぜか表示されません。
    テンプレートによるのでしょうか…

    ReplyDelete
  2. 素晴らしいです~いつもありがとうございます

    ReplyDelete
  3. > toto さん
    この投稿タイトル一覧が表示されるのは、ラベルページや検索ページ、アーカイブページといった、トップページ以外の複数の投稿が並ぶページです。

    toto さんのブログのラベルページにも表示されているようですので、ご確認下さい。

    > ひろりひろり。さん
    どういたしましてです。
    コメントありがとうございます。

    ReplyDelete
  4. クリボウさま
    すいません。勘違いしておりました。
    これは便利ですね。
    どうもありがとうございました。
    今後ともよろしくお願いします。

    ReplyDelete
  5. 紹介して頂いてどうもです。

    ずっとほったらかしてあったBloggerを1ヶ月くらい前から使い始めたのですが、実は…

    「クリボウの Blogger Tips」で勉強していました!

    Blogger関連の記事よりも、素人サイト運営日記がメインなのですが、今後とも当ブログをごひいきにしてください(^^)

    ReplyDelete
  6. > toto さん
    見つかったようでよかったです。

    > naminorito さん
    読んでくださっていたんですね、ありがとうございます。
    またブログにも寄らせてもらいまーす。

    ReplyDelete
  7. 使用させていただきました。

    本当にいつもお世話になっております。
    ありがとうございました。

    ReplyDelete
  8. クリボウさま
    関連記事リスト表示とともに導入させていただきました。当方のブログでも紹介させていただきました。ありがとうございました。

    ReplyDelete
  9. > pon さん
    どういたしましてです。
    こちらこそ、いつもコメントしていただいてありがとうございます。

    > ちょうろくさん
    ブログで紹介してもらってありがとうございます。
    これからも気軽にコメントしてもらえたら嬉しいです。

    ReplyDelete
  10. ありがとうございます、すごく便利ですね。参考にさせていただきました。

    ReplyDelete
  11. > mizuki さん
    記事がお役に立ったようでよかったです。コメントありがとうございます。

    ReplyDelete
  12. ブログの使い勝手がよくなりました!ありがとうございます!

    ReplyDelete
  13. クリボウ様
    いつも参考にさせていただいております。
    ありがとうございます。
    「投稿タイトル一覧を先頭に表示」についてなのですが、トップページに表示する事は可能でしょうか?

    何か解決策がございましたら、よろしくお願いいたします。

    ReplyDelete
  14. > moto54re さん

    よかったです。
    またお気軽にコメントしてくださいね。


    > 航(Wataru) さん

    試してはいないんですが、この記事のコードの最初から 2 行目、最後から 2 行目をそれぞれ削除して貼り付けるといいと思います。

    ReplyDelete
  15. クリボウさま
    すぐに解決いたしました!
    すごい!!さんざん悩んだのですがやはり聞いてよかったです!ありがとうございました。
    素人なので、また疑問がありましたらよろしくお願いいたします。

    ReplyDelete
  16. クリボウさん、お世話になってます。

    この記事を参考にして、タイトル一覧は表示できたのですが、タイトル一覧のすぐ下に、次のページに移動、ホーム、前のページに移動を表示させたいのですが、可能ですか?
    (つまりNewer Posts、Older Posts、Homeを表示させたいわけです。)

    画面下まで移動するが大変でして。

    また、前のページに移動、後ろのページに移動という表示形式ではなく、ページ番号での表示も可能なんでしょうか?

    ReplyDelete
  17. ありがとうございます。
    今日から本格的に作り始めて、まず実現したかったことが、こちらのブログ記事で大体解決しました。
    これからもよろしくお願いします。

    ReplyDelete
  18. クリボウさま

    こんにちは。Blogger初心者の者です。
    質問させて頂きたいのですが、投稿した記事を「ページ」に自動的に反映させる事は可能でしょうか?
    投稿した記事がカテゴリごとに、apple、iphone・・・などの「ページ」に自動で反映できるようにしたいのです。
    イメージしているのはこちらの立花さんのブログの様な感じです。(立花さんのブログはBloggerではなく、wordpressですが・・・Bloggerでこのような技術は可能でしょうか?)→http://www.ttcbn.net/no_second_life/

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.