Blogger 記事 を 一覧 表示 する ページ の 作成方法

40 件のコメント

Blogger の 記事 一覧 を表示する ページ を作成します。 ここで紹介する方法では、ソート順(タイトル名、公開日付、更新日付)、表示方法(一覧、ラベル別)を任意に指定できます。 また、各要素に クラス名 が割り振られているので、好きな表示を簡単に実現できます。

とりあえず自分のブログで試したい方は こちら(つたない英語)

(…いくつかの ブログ で "記事一覧を表示する方法" が記載されていましたが、 個人的にしっくりこなかったので新しく作ってしまえ、という経緯です。。)

目次

作成手順

  1. Blogger の 左メニュー から [ページ] を選択します。

  2. [新しいページ] を選択します。

  3. 編集ページにおいて、以下の ソースコード を コピー して貼り付けます。

    <script type="text/javascript">
    var POSTSTOC_SETTINGS = {
        blogURL: 'garafu.blogspot.jp',  // Blogger の ドメイン を設定
        maxResults: Infinity,           // 最大受信記事数 を設定。Infinity ですべての記事を受信
        sort: {
            key: 'published',           // ソートキー [title, published, updated]
            order: 'default'            // ソート順 [default, asc, desc]
        },
        printby: 'title',               // 表示方法 [title, label, label.nameorder, label.contentsorder]
        newPost: {
            enabled: true,              // 新着記事アイコンを表示するかどうか
            symbol: 'NEW !',            // 新着記事の表示文字列
            term: 30                    // 新着記事判定する日数
        },
        thumbnail: {
            enabled: true,              // サムネイル表示するかどうか
            noImageURL: 'http://garafu.github.io/blogger.toc/release/0.0.5/noimage.png'
                                        // サムネイルが存在しないときに割り当てる画像
        },
        published: {
            enabled: true,              // 公開日を表示するかどうか
            format: 'yyyy/MM/dd'        // 公開日のフォーマット
        },
        updated: {
            enabled: true,              // 更新日を表示するかどうか
            format: 'yyyy/MM/dd'        // 更新日のフォーマット
        }
    };
    </script>
    <link rel="stylesheet" type="text/css" href="http://garafu.github.io/blogger.toc/release/0.0.9/simple.css" />
    <script type="text/javascript" src="http://garafu.github.io/blogger.toc/release/0.0.9/blogger.toc.min.js"></script>
    
  4. 以下の設定を変更します。細かな設定に関しては後述の説明をご確認ください。

    blogURL
    Blogger の ドメイン を設定します。
    sort.key
    記事ソート順を [title, published, updated] から設定します。デフォルト published。
    • title : 記事の名前をキーとしてソート
    • published : 投稿日をキーとしてソート
    • updated : 更新日をキーとしてソート
    printby
    表示方法を [title, label, label.nameorder, label.contentsorder] から設定します。デフォルト label。
    • title : 記事を一覧
    • label : ラベル別に記事を一覧
    • label.nameorder : ラベル別に記事を一覧。ラベルはラベル名の昇順にソート。
    • label.contentsorder : ラベル別に記事を一覧。ラベルはラベルに含まれる記事が多い順にソート。
    thumbnail.enabled
    サムネイルを表示するかどうか を設定します。デフォルト false 。
    published.enabled
    公開日を表示するかどうか を設定します。デフォルト false 。
    updated.enabled
    更新日を表示するかどうか を設定します。デフォルト false 。
  5. 保存して公開します。

説明

とりあえず試したい方は デモページ(つたない英語) をご参照ください。 試した結果が出力されるので、そのコードをコピペすると簡単に "Blogger 記事 の 一覧表示" を作成できます。

リスト出力設定

{
  blogURL: 'garafu.blogspot.jp',
  maxResults: Infinity,
  keyword: 'JavaScript',
  sort: {
    key: 'published',
    order: 'default'
  },
  printby: 'label',
  newPost: {
    enabled: false,
    symbol: 'NEW !',
    term: 30,
    target: 'published'
  },
  thumbnail: {
    enabled: false,
    noImageURL: 'http://garafu.github.io/blogger.toc/release/0.0.5/noimage.png'
  },
  published: {
    enabled: false,
    format: 'yyyy/MM/dd HH:mm:ss'
  },
  updated: {
    enabled: false,
    format: 'yyyy/MM/dd HH:mm:ss'
  }
}
プロパティ 説明
blogURL string ブログのドメインを指定します。
maxResults number 受信する最大記事数を指定します。すべての記事を対象とする場合 Infinity を指定します。
keyword string 絞り込みたいキーワードを指定します。
sort object ソート方法に関する設定を指定します。
sort.key enum ソートキーを指定します。指定できる値は以下の通りです。
title 記事タイトル をキーとして並べます。
published 記事タイトル をキーとして並べます。
updated 記事の更新日をキーとして並べます。
sort.order enum ソート順を指定します。指定できる値は以下の通りです。
default ソートキーの種類により自動でソート順を決定します。title は 昇順 (あいうえお順)、publishedupdated は 降順 (新しいもの順) に並べます。
asc ソートキー を 昇順 に並べます。
desc ソートキー を 降順 に並べます。
printby enum 表示方法を指定します。指定できる値は以下の通りです。
title 記事タイトル が平面リストになるような表示を行います。
label ラベル別 に 記事一覧 を表示します。 ラベルの順序は "ソート順" で設定された順に表示される記事に設定されたラベル順です。 (…説明しづらい。。)
label.nameorder ラベル別 に 記事一覧 を表示します。 ラベルの順序は ラベル名 の 昇順 です。
label.contentsorder ラベル別 に 記事一覧 を表示します。 ラベルの順序は ラベルが設定されている記事数 の 降順 です。
newPost object 新着記事表示に関する設定を指定します。
newPost.enabled boolean 新着記事アイコンを表示するかどうかを指定します。
newPost.symbol string 新着記事アイコンとして表示する文字列を指定します。
newPost.term number 新着記事として判定する期間(日数)を指定します。
newPost.target enum 新着記事として判定するとき、比較対象とする日付を指定します。指定できる値は以下の通りです。
published 現在日時と公開日時を比較します。
updated 現在日時と更新日時を比較します。
thumbnail object サムネイル表示に関する設定を指定します。 サムネイルは記事中の一番最初にある画像が使用されます。 サムネイルは通常 72px × 72px の大きさです。
thumbnail.enabled boolean サムネイルを表示するかどうかを指定します。
thumbnail.noImageURL string サムネイルが存在しない場合に表示する画像へのパス(URL)を指定します。
published object 公開日に関する設定を指定します。
published.enabled boolean 公開日を表示するかどうかを指定します。
published.format string 公開日を表示する場合、どのように表記するかを指定します。 利用できる制御文字は (*1) 日付フォーマット をご参照ください。
updated object 更新日に関する設定を指定します。
updated.enabled boolean 更新日を表示するかどうかを指定します。
updated.format string 更新日を表示する場合、どのように表記するかを指定します。 利用できる制御文字は (*1) 日付フォーマット をご参照ください。

(*1) 日付フォーマット

制御文字 説明 サンプル
d 月の日にち (1 ~ 31)。 3
dd 月の日にち (01 ~ 31)。 03
E 曜日の省略名。
EE 曜日の完全名。 火曜日
G 時期または時代 (年号)。 西暦
h 12時間形式の時間 (1 ~ 12)。 5
hh 12時間形式の時間 (01 ~ 12)。 05
H 24時間形式の時間 (1 ~ 24)。 8
HH 24時間形式の時間 (01 ~ 24)。 08
m 分 (0 ~ 59)。 2
mm 分 (00 ~ 59)。 02
M 月 (1 ~ 12)。 6
MM 月 (01 ~ 12)。 06
MMM 月の省略名。 1
MMMM 月の完全名。 1月
s 秒 (1 ~ 59)。 6
ss 秒 (01 ~ 59)。 06
t AM/PM 指定子。 午前
yy 2桁の年。 98
yyyy 4桁の年。 1998
z UTCを基準とする時間単位のオフセット (先行ゼロなし)。 -8
zz

UTCを基準とする時間単位のオフセット (先行ゼロ付きの 1桁の値)。

-08
zzz UTCを基準とする時間および分単位のオフセット。 -08:00

スタイルシート設定

スタイルシート

各要素に対してできるだけ クラス名 を割り振るよう作成されています。 あらかじめある スタイルシート で思うような表示ができていない場合、 <link /> を利用せず、自前で stylesheet を記述することができます。

不具合、ご要望等はこの記事にレスしていいただくか、こちら(Github garafu/blogger.toc Issues) までご連絡いただけると幸いです。

更新履歴

2016/10/09 v0.0.11
keywordオプション追加。microdataの自動生成機能を追加。
2016/05/14 v0.0.10
https対応。
2016/05/14 v0.0.9
記事フィードが正しく受信できない不具合を修正。
2015/10/10 v0.0.8
新着記事にアイコンをつける機能を追加。手順の画面キャプチャを更新。説明欄の拡充。
2015/08/30 v0.0.7
ソートの降順、昇順を制御する機能を追加
2015/07/12 v0.0.6
公開日、更新日を制御する機能を追加
2015/07/12 v0.0.5
サムネイル表示機能を追加
2015/05/09 v0.0.4
一部のサイトで正しく表示されない不具合修正
2014/04/28 v0.0.3
ブログテンプレートの種類によりスクリプトが正しく動作しない不具合修正
2014/04/27 v0.0.2
ブログ記事をすべて読み込めるよう修正

参考記事

  1. はじめまして
    こちらのscript?を使わせていただきたく、設置してみましたが、
    LOAD DATA ...
    で止まったままになってしまいます。。

    html編集とかあまりいじってないテスト用アカウントのブログで試してみたら表示されたので、
    表示されない方もhtml編集をデフォルトに戻せば恐らく表示されるのかも?しれませんが、
    それをせずに表示できる方法が何かあれば、、教えていただきたく思います。
    よろしくお願いします。

    返信削除
    返信
    1. Yomi さん、ご連絡ありがとうございます。

      私のプログラムに問題がありました。お手数おかけして申し訳ありませんでした。
      不具合修正にあわせてmaxResults: Infinity 設定で すべての記事 を読み取れるようにしました。
      この修正にあわせて、このブログ記事も修正しました。

      ご質問の利用方法についてですが、
      記事中手順3 ソースコードのコピペ、手順4 設定 のやり直しを試してみてもらえますでしょうか?
      ※手順3 は スタイルシート、スクリプト の URL が新しいもの(不具合修正済みのもの)に変わっています。
      ※手順4 は maxResult: Infinity 設定ができるようになっています。

      よろしくお願いいたします。

      削除
    2. garafuさん、こんばんは。
      プログラム修正していただきありがとうございます。
      ですが、、やはりLOAD DATA ...で止まってしまいました。

      私も他の方の"記事一覧を表示する方法"より、
      こちらのラベル関係なくタイトルだけ一覧表示できる方が個人的には好みなので、
      出来れば、使わせていただきたいと思ったのですが・・・。
      プログラム修正していただいても表示されないってことは、
      やはり私のテンプレートhtmlに何か問題があるんですかね。。(^^;
      お手数おかけして申し訳ありませんでした。
      ありがとうございました。

      削除
    3. Yomiさん、こんにちは。

      確かにテンプレートhtmlと干渉していますね…
      他のスクリプトと干渉しない修正を行ってみました。(…応急対応 (^^; )
      Yomiさんのサイトを確認していただけますでしょうか?

      たびたびお手数おかけして申し訳ございませんが、よろしくお願いいたします。

      削除
  2. garafuさん、こんばんは。
    今度はちゃんと表示されました!
    諦めかけていたのですごく嬉しいです^^
    何度もお手数おかけして申し訳ありません。
    本当にありがとうございます。。

    返信削除
  3. またこれからも色々参考にさせていただきます。
    これからも宜しくお願いします^^
    ありがとうございました。

    返信削除
  4. garafu様
    投稿一覧表示方法を探して、たどり着きました。
    希望どうりにでき、感謝感謝です。
    ありがとうございました。
    今後もよろしくご指導ください。 

    返信削除
  5. 使わせていただきました!ありがとうございます〜〜(*´ω`*)
    記事一覧があることで、ブログの訪問者にとって便利になりますからね〜♪

    この記事、とってもわかりやすくてよかったです〜♪

    返信削除
  6. 記事一覧、使わせていただきました。
    ありがとうございます!

    返信削除
  7. 使わせて頂きました!
    ありがとうございます!

    返信削除
  8. 使わせて頂きました!
    ありがとうございます!

    返信削除
  9. 2ブログで使用させていただいています。ありがとうございます。
    ひとつだけ、変だなあと思っていることは、published順でタイトル順のスティールタイルを選んだ場合に、ブルーのタイルが表示されず、「・」になってしまうことです。Label順にしたほうは、ちゃんとタイルが表示されています。
    ですが、こちらのデモページでやってみると、ちゃんとタイルが出ます。
    このブルーのタイルのデザインが気に入っているので、これが表示されないことが、残念なのですが、どうして表示されないのか、理由がわかりません。

    返信削除
    返信
    1. Michiko さん

      ご連絡ありがとうございます。

      スタイルがうまく適用されない件について調査しました。
      原因は Blogger デフォルト で 設定されている スタイル との干渉のようでした。
      対応として Bloggerスタイルを上書きするよう 修正しました。

      お手数おかけいたしますが、ご確認のほどよろしくお願いいたします。

      削除
    2. 表示を確認いたしました。
      使わせていただいただけで有難いのに、わざわざ、ありがとうございました。ひたすら感謝しております。

      削除
  10. はじめまして
    ブログにて記事一覧と使わせてもらっています
    ありがとうございます

    つきましては、要望と言うか質問と言いますが
    現在の記事一覧はタイトルを羅列するタイプになっておりますが
    これを記事の中で使われている画像を自動で使っての一覧表示というのは難しいでしょうか?

    私自身はjavaやCSSなどはさっぱり知識がありませんので、これがどれほどの技術になるのかも想像がつきません
    もし、簡単にできるようであればご指南いただきたいです

    返信削除
    返信
    1. ぼえぼえ さん

      サムネイルは考えたことがありませんでした…
      貴重なご意見ありがとうございます!

      早速ですが、当初のままでは対応できなかったので、
      プログラムに機能追加を行いました。
      設定項目(thumbnail.enabled)を追加しているのでご確認ください。
      今回のサムネイル表示対応を反映して、この記事も更新していますので、
      詳細は記事中の該当箇所をご確認いただければと思います。

      なお、記事の中で使われている画像の選択についてですが、
      利用している仕組み上、記事の一番最初の画像が利用される点はご注意ください。

      その他、何かございましたらご連絡ください。
      よろしくお願いいたします。

      削除
  11. はじめましてこちらの記事一覧を利用させていただいております。
    ありがとうございます。

    要望なのですが公開日の新しい順で表示されますが
    これを古い順から表示することは可能でしょうか?
    またタイトルの前に「 ・ 」ではなく1、2、3…と数字で表示したいです。
    よろしくお願いします。

    返信削除
    返信
    1. 小鹿 さん

      貴重なご意見ありがとうございます!

      日曜プログラマーなので少し時間がかかりましたが…
      いただいたご要望に対応してみました。

      ソート順に関してはそのまま対応できなかったので、
      プログラムを修正して対応しました。→ "sort.key"、"sort.order" の追加。
      タイトル前の「・」については、スタイルシートで対応できそうでしたので、
      特に実装は変えていません。→ CSS の "list-style-type: decimal" で対応。

      で、結論ですが…
      いただきましたご要望を実現するには以下のようなコードになると思います。
      設定回りは最低限しか記載していませんので、必要に応じて修正いただければと思います。

      ------------------------------------
      <script type="text/javascript">
      var POSTSTOC_SETTINGS = {
          blogURL: 'YOUT_BLOG_DOMAIN',
          sort: {
              key: 'published',
              order: 'asc'
          },
          printby: 'title'
      };
      </script>
      <link rel="stylesheet" type="text/css" href="http://garafu.github.io/blogger.toc/release/0.0.7/simple.css" />
      <style>
      #main .poststoc-list {
      list-style-type: decimal;
      }
      </style>
      <script type="text/javascript" src="http://garafu.github.io/blogger.toc/release/0.0.7/blogger.toc.min.js"></script>
      ------------------------------------

      その他、何かございましたらご連絡ください。
      よろしくお願いいたします。

      削除
  12. 早速入れ替えました。
    考えていたどおりの仕様でばっちりです。

    ありがとうございました。

    返信削除
  13. 初めまして。こちらの記事一覧を使用させて頂きました。
    とても分かりやすく、簡単に設置ができました。ありがとうございます!

    返信削除
  14. はじめまして。
    bloggerでの記事一覧の表示方法をさがしていたところ、こちらのページにたどり着きました。
    少し手間取りましたが、設置することができました。
    ありがとうございます。

    返信削除
  15. はじめまして。
    一覧表示ツールを使わせていただいております。大変素晴らしいです。ありがとうございます。
    さて,当方ではブラウザとしてFirefox(Windows版)を常用しているのですが,かなりの確率でLOAD DATA... のまま止まってしまう(?)ことがあります。
    ほかの主要ブラウザやMac版Firefoxではそのような問題は起きないようです。何か回避策等ありましたらご教示ください。

    返信削除
    返信
    1. 七篠さん

      ご連絡ありがとうございます。

      私の環境(Windows7+Firefox46、Windows8.1+Firefox46)にて確認を行いましたが、
      ご連絡いただいた現象を再現させることができませんでした。

      Windows版Firefoxでのみ起こる現象とのことですので、Firefox固有の問題かと思います。
      具体的には以下のような原因を考えております。

      ・Firefoxに入れているアドオンの影響?
      ・FirefoxのバージョンによってJavaScriptの実行がうまくいかない場合がある?

      これら原因への対策としては以下になるかと思います。

      ・Firefoxのプラグインをすべて切ってみる
      ・Firefox46にしてみる(←私の環境で動いていたため)

      まずは上述の対策を試していただけないでしょうか。
      もし、上述対策を行っても問題が起こるようであれば、事象を再現させて原因分析を行いたいので、
      環境(OSバージョン、ブラウザバージョン、導入しているアドオン)について教えていただけないでしょうか。

      よろしくお願いいたします。

      削除
    2. garafuさん ご返信ありがとうございます。

      いくつか試してみましたので,ご報告いたします。

      なお,当方の環境は以下のとおりです。
      ●OS: Windows 10
      ●Firefox46.0.1
      ●「常に有効化する」に設定されているFirefoxアドオン
        ●OpenH264 Video Codec (Cisco Systems, Inc. 提供) 1.5.3
        ●Primetime Content Decryption Module (Adobe Systems, Incorporated 提供) 17
        ●Shockwave Flash 21.0.0.213

      このマシンで下記を試しましたところ,いずれも効果はありませんでした。
      ●上記3点を含め,すべてのアドオンを手動で無効にする。
      ●セーフモード(アドオンを無効化して再起動)起動する。
      ●Firefoxをリフレッシュしてから起動する。

      しかし,
      同じマシンで,新規アカウントを作成して試したところ,
      今のところLOAD DATA... のまま止まってしまうという現象は起こっておりません。

      というわけで,当方の常用環境に固有の問題と思われます。

      常用環境もいずれクリーンインストールしたいと思います。お騒がせしました。

      今後ともよろしくお願いいたします。

      削除
  16. ブログをBloggerに移転し、ラベル別のタイトル一覧表を付けたいと思っています。
    貴ブログ紹介のScriptで処理できることがわかり、順次投稿を移動させています。

    しかし公表日付が2か月より前の投稿は、タイトル一覧表に表示されないことから、困っています。

    とりあえず古い日付はやめて、現在の日付にすれば、この問題を回避できるので、そうしています。しかしこれでは、公表日を2か月ごとに変更しないといけないので、問題解決にならず、悩んでいます。

    Bloggerの仕様によるもので、解決できないものか。それとも指定の仕方で解決するものか、よくわかりません。アドバイスをいただけるとありがたいです。

    返信削除
    返信
    1. umebocy さん

      ご連絡ありがとうございます。

      ご指摘いただいた内容について確認したところ、
      プログラムに不具合(フィードが正しく取得できない不具合)があったことが分かりましたので、
      該当の不具合修正を行い、最新版を公開いたしました。

      おそらく現在は正しく表示されていると思いますので、
      ご確認をお願いできますでしょうか。

      削除
    2. ありがとうございます。
      古い日付の投稿もちゃんと表示されるようになりました。ありがたく利用させていただきます。

      削除
  17. ある1つのラベルの記事だけを表示させることは可能ですか?

    返信削除
    返信
    1. Axel さん

      ご質問いただきました件についてですが、
      解決方法は以下の2通りがあるかと思います。

      ①"keyword"オプションで指定する
       今回ご質問いただいた件はそのままでは実現できなかったので、
       "keyword"オプションを追加することで対応しました。
       「説明」を更新していますのでご確認ください。

      ②ラベルURLを利用する
       以下のようなURLで指定されたラベルの記事一覧(内容も含む)を取得できます。
       
       https://[ブログURL]/search/label/[ラベル名]
       
       ただし、ラベル名に日本語は指定できないので URLエンコード して指定するようにしてください。
       URLエンコードするツールは、
       以下の記事のおまけで「/-/LABELNAME」に記載していますので参考にしてください。
       
       https://garafu.blogspot.jp/2013/07/blogger-url.html#labelname

      目的に合った方法で利用いただければと思います。
      よろしくお願いいたします。

      削除
    2. 素早い対応ありがとうございます。

      削除


  18. nice post im blogger indonesia.. your post help for me, article very insteresting.. for indonesian Cara Membuat Blog

    返信削除
    返信
    1. Thank you for your comment.
      I am glad that this post seemed helpful.

      削除
  19. 明けまして
    おめでとうございます

    いつもありがたく
    参考にさせていただいております。

    今年も
    どうぞ宜しくお願い致します。

    返信削除
    返信
    1. あけましておめでとうございます。
      自分の記事が参考になっているようで嬉しいです。
      また、これからも役立つ記事を書いていくので
      よろしくお願いします。

      削除
  20. 漢字が正しくソートされないのは、
    http://blog.jnito.com/entry/2014/12/03/185146らしいのですが、
    素人でして、どうしたらいいか知恵を下さい!

    返信削除
  21. http://alpha-netzilla.blogspot.jp/2016/09/sort.html
    こっちかな?

    返信削除
    返信
    1. gViUuKh9WItHqcwqQ8AOAZcstCBBさん
      ご連絡ありがとうございます。
      私も少し調べてみたのですが…
      漢字は文字コードでソートされるため、意図した(思った)通りの並び順にはならないようです。
      何か別の方法もないか考えてみましたが…
      思いついたのは「タイトルにインデックス(連番)を追加しておく」くらいでした。
      あまりお役に立てず申し訳ございません…。
      よろしくお願いいたします。

      削除
  22. garafuさま

    初めまして、南場北と申します。
    Bloggerでのタイトルのリスト表示ができずに彷徨っておりましたらこのオアシスに辿り着きました。
    事後報告ですが早速使わせていただいております。
    ソースコードなどチンプンカンプンなので本当に助かりました。
    ありがとうございます!!

    返信削除
    返信
    1. 南場北 さん

      コメントありがとうございます。
      お役に立ったようで何よりです!!

      削除
  23. はじめまして、たけももと申します。
    デモページのコードで表示されるようになりました。
    ありがとうございます。

    返信削除