2015/09/05

Bloggerの記事一覧やカレンダーを自動作成

Bloggerの記事一覧（目次・サイトマップ）を自動的に表示するJavaScriptを作成しました。

記事やページとして、カテゴリ別のサイトマップ、年別・月別のサイトマップ、記事の一覧を表示することもできますし、ガシェット（ブログパーツ）として、最近の記事リスト、カテゴリ一覧、年別・月別の記事一覧、カレンダーを表示（※4）することもでき、ブログのナビゲーション性を大幅に向上させることができます。

※1 スクリプトは非同期で実行されます。ページの表示速度にほとんど影響を与えません。
※2 記事にラベルが設定されていない場合、カテゴリ別に出力するとその記事は一覧に表示されません。
※3 こちらの記事を一部参考にさせていただきました。
※4 2016/01/28 カレンダー機能を追加しました。
※5 2016/08/09 スクリプトのホスティングURLが変更になりました。使用されている方は変更をお願いします。
※6 2016/10/06 httpsでもスクリプトを呼び出せるようになりました。

【基本的な使用方法】

記事やページの場合はHTMLのソースに、ガシェットの場合はHTML/JavaScriptガシェットのソースに以下を書き込んでください。赤字が、カスタマイズ可能な部分です。

スクリプトは、「メインスクリプト」と「オプション部」と「HTML出力部」に分かれています。メインスクリプトとオプション部は1ページに1ヶ所（複数記載しても構いません）、HTML出力部は記事一覧を表示したい場所に記載してください。

<!--メインスクリプト-->
<script type="text/javascript" src="https://www.basho.net/public/pagelist.js"></script>

<!--オプション部-->
<script>pagelist_StartIndex=1;</script>    // 記事の読込開始位置
<script>pagelist_DateFormat="ja";</script> // 日付形式 "ja"/"us"/"gb"
<script>pagelist_NewHtml="";</script>      // NEW!マークのHTML
<script>pagelist_KugiriHtml="";</script>   // 区切り線のHTML

<!--HTML出力部-->
<script>
出力コマンド(
    引数
);
</script>

それでは、詳しく解説していきます。

【メインスクリプト】

<script type="text/javascript" src="https://www.basho.net/public/pagelist.js"></script>

1ページに1ヶ所で構いません（複数記載しても構いません）。ガシェットとして設置する場合は、一番上のガシェットに記載してください。記事やページの場合は、モバイル表示などガシェットが読み込まれない場合があるので、それぞれの記事やページ内にも記載してください。httpでもhttpsでも使えます。

【オプション部】

オプションを設定します。省略できます。メインスクリプトの直後に必要に応じて記載してください。

<script>pagelist_StartIndex=1;</script>    // 記事の読込開始位置

記事の読込開始位置を指定します。通常は1を指定してください。未来の日付の記事を投稿してトップページを固定している場合は、2を指定すると最初の記事が無視されます。

<script>pagelist_DateFormat="ja";</script> // 日付形式 "ja"/"us"/"gb"

日付の形式を指定します。省略すると日本式になります。
"ja" 日本式（年/月/日）。
"us" アメリカ式（月/日/年）。
"gb" イギリス式（日/月/年）。

<script>pagelist_NewHtml="";</script>      // NEW!マークのHTML

NEW!マークのHTMLコードを設定します。省略するか""でデフォルト（NEW!）。

<script>pagelist_KugiriHtml="";</script>   // 区切り線のHTML

pagelist_Output*Page系で出力する目次と記事一覧の間の区切り線のHTMLコードを設定します。省略するか""でデフォルト（<p><hr></p>）。

【HTML出力部】

記事一覧を表示したい場所に記載してください。

<!--記事一覧を出力-->
<script>
pagelist_OutputEntries(
    10,    // 記事数 0=全て
    "",    // カテゴリの限定 ""=全カテゴリ
    "new", // ソート順 "new"/"old"
    "off", // 日付の表示 "on"/"off"
    0      // 新着記事数 0=NEW!表示しない
);
</script>

<!--カテゴリ別に出力-->
<script>
pagelist_OutputCategory(
    "new", // ソート順 "new"/"old"/"num"/"cat"
    "",    // カテゴリ名のリンク先 ""=デフォルト/"none"=リンクしない
    "on",  // 記事数の表示 "on"/"off"
    "on",  // 展開 "on"/"off"/"all"
    "off", // 日付の表示 "on"/"off"
    10     // 新着記事数 0=NEW!表示しない
);
</script>

<!--年別に出力-->
<script>
pagelist_OutputYear(
    "new", // ソート順 "new"/"old"
    "",    // 年名のリンク先 ""=デフォルト/"none"=リンクしない
    "on",  // 記事数の表示 "on"/"off"
    "on",  // 展開 "on"/"off"/"all"
    "off", // 日付の表示 "on"/"off"
    0      // 新着記事数 0=NEW!表示しない
);
</script>

 <!--月別に出力-->
<script>
pagelist_OutputMonth(
    "new", // ソート順 "new"/"old"
    "",    // 月名のリンク先 ""=デフォルト/"none"=リンクしない
    "on",  // 記事数の表示 "on"/"off"
    "on",  // 展開 "on"/"off"/"all"
    "off", // 日付の表示 "on"/"off"
    0      // 新着記事数 0=NEW!表示しない
);
</script>

<!--カテゴリ別の記事一覧ページを出力（目次付き）-->
<script>
pagelist_OutputCategoryPage(
    "new", // ソート順 "new"/"old"/"num"/"cat"
    "",    // カテゴリ名のリンク先 ""=デフォルト/"none"=リンクしない
    "on",  // 記事数の表示 "on"/"off"
    "on",  // 日付の表示 "on"/"off"
    10     // 新着記事数 0=NEW!表示しない
);
</script>

<!--年別の記事一覧ページを出力（目次付き）-->
<script>
pagelist_OutputYearPage(
    "new", // ソート順 "new"/"old"
    "",    // 年名のリンク先 ""=デフォルト/"none"=リンクしない
    "on",  // 記事数の表示 "on"/"off"
    "on",  // 日付の表示 "on"/"off"
    10     // 新着記事数 0=NEW!表示しない
);
</script>

<!--月別の記事一覧ページを出力（目次付き）-->
<script>
pagelist_OutputMonthPage(
    "new", // ソート順 "new"/"old"
    "",    // 月名のリンク先 ""=デフォルト/"none"=リンクしない
    "on",  // 記事数の表示 "on"/"off"
    "on",  // 日付の表示 "on"/"off"
    10     // 新着記事数 0=NEW!表示しない
);
</script>

<!--カレンダーを出力 2016/01/28追加-->
<script>
pagelist_OutputCalendar(
    0 // 開始曜日 0=日曜開始 1=月曜開始
);
</script>

【出力コマンドのパラメータの解説（共通）】

  • 記事数
    表示する記事の数。0で全ての記事を表示。
  • カテゴリの限定
    表示するカテゴリを限定する。""で全カテゴリの記事を表示、"?"でURLの?以降から取得。
  • ソート順
    "new" 新しい順。
    "old" 古い順。
    "num" 記事数順。
    "cat" カテゴリ名順。
  • カテゴリ名/年名/月名のリンク先
    カテゴリ名/年名/月名クリック時のリンク先を指定します。""がデフォルト、"none"でリンクしない、#?=で終わる場合はURLの後ろにカテゴリ名を追加します。 
  • 記事数の表示
    "on"  カテゴリ名/年名/月名の右に記事数を表示する。
    "off" 記事数を表示しない。
  • 展開
    "all" 全ての記事一覧を展開する。太字になってアンカーが追加されます。
    "on"  記事一覧を自動的に展開する。
    "off" 記事一覧を展開しない。
  • 日付の表示
    "on"  記事名の右に日付を表示する。
    "off" 日付を表示しない。
  • 新着記事数
    ここで設定した数の新着記事にNEW!マークを表示する。0で表示しない。

【使用例】

右上のガシェットの「カレンダー」、「最近の記事」、「カテゴリ」、「バックナンバー」でも使用しています。

※ カレンダーの土日の文字の色を変えるには次のようにします。
<style type="text/css">
.MyCalendar .DayTitle0{ color:#ff0000;}
.MyCalendar .Day0     { color:#ff0000;}
.MyCalendar .DayTitle6{ color:#0000ff;}
.MyCalendar .Day6     { color:#0000ff;}
</style>

投稿者 0 件のコメント:
カテゴリー:
登録: 投稿 (Atom)