2013/11/24

Blogger でアーカイブページを作る方法

Bloggerでアーカイブページを作る方法をご紹介します。

ラベル単位で記事をざーっとリストアップしてくれるようなページです。イメージはこんな感じ。


最初にお断りしておきますと、今回のやり方は
- 「JavaScript」と「jQuery
- Bloggerの「ページ」と「ガジェット
- Bloggerの「HTML編集」画面
を使う形になります。

Bloggerをお使いの方であれば基本どなたでも導入可能ではあるのですが、JavaScriptやBloggerにあまり馴染みがないよという方がやろうとすると途中でハマってしまった場合が大変です。ですので、あまり馴染みがないよという方はまわりの詳しい方にお願いされるのがよろしいかと思います。

では、以下方法について。の前に完成形について。


完成形

完成形は上の画像のとおりです。ラベルがざーっと並んでいて、各ラベルに属する投稿がその下にざーっと並ぶ、といったものになります。ソートなどは特にしていません。

具体的なページイメージはこちらです。


手順

では具体的な手順について見てきましょう。大まかな流れは次のとおりとなります。
  1. jQueryを読み込むタグを追加
  2. アーカイブ用のページを作成
  3. ガジェットを作成

以下、順に見ていきます。

1. jQueryを読み込むタグを追加
BloggerのページでjQueryが使えるように、jQuery読み込みのタグをBloggerのテンプレートHTMLに追加します。

具体的には、Bloggerの管理画面から「テンプレート」→「HTMLの編集」と進み、HTML編集画面が開いたら以下のコードを適切な場所に追加して「保存」します。
<!-- for jQuery -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

head内であれば場所は基本的にどこでも良いかと思うのですが、僕の場合はhead内の最初のscriptタグの直前にこのタグを追加しています。

余談ですが、スクリプトのドメインが ajax.googleapis.com となっていますが、こちらは Google Hosted Libraries というサービスを利用しているためです。Googleさまさまです。いわゆる世に言う「CDN」(コンテンツデリバリーネットワーク)ですかね。

HTMLの編集が不慣れな方は必ずバックアップを取ってから編集されるのがよろしいかと思います(本当に不慣れなら、自分ではやらない方がよいです・・・)。

これでjQueryが使えるようになりました。jQueryは後の「ガジェットを作成」のところで利用します。

2. アーカイブ用のページを作成
次に、アーカイブページを作成します。具体的な中身はフィードjsonをもとにJavaScriptで生成する形にするので、ここではガワだけ作成します。

具体的には、Bloggerの管理画面から「ページ」→「新しいページ」→「空白のページ」と進んで、ページ内容作成画面で以下の文章を記入して「保存」します。
<div id="archivePage">
</div>

このときの注意点としては、編集モードを「作成」ではなく「HTML」で編集することです。「ページタイトル」は僕の場合はストレートに「アーカイブ」としました。

3. ガジェットを作成
つづいて、ガジェットを作成します。ここで作るガジェットの位置づけは、「1で挿入したタグによって読み込まれたjQueryライブラリを使って、2で作成したアーカイブページに記事一覧を生成する」というものになります。

具体的には、Bloggerの管理画面から「レイアウト」→「ガジェットを追加」→「HTML/JavaScript」と進んで、コード記入箇所に以下のコードの4行目から最後までをコピーしてきて記入します。

こちらのGitHub Gistのページだともう少し見やすいです)

ちょっと長いです。。

この123のステップが無事終われば、2で作成したアーカイブ用のページを確認すると、過去の投稿がずらずらーっと並ぶ、ようになっている、はず!です。


・・・以上です。

CSSスタイルはデフォルトでは何もつけていないので、スタイルを付けたい方は #archivePage 以下のul要素やli要素に適宜つけていただくとよろしいかと思います。

どうもうまく行かないぞーという場合は、FirefoxのFirebugやChromeのDeveloper Toolsでどこでつまづいてるのかチェックしてください。


・・・ご参考まで。


実際のページ
アーカイブ - Life with Python

ガジェットのコード
archivePageGeneratorInBlogger - GitHub Gist

その他ツール
Google Hosted Libraries
jQuery

0 件のコメント: