ブログカスタマイズの雑談BLOG

FC2ブログのテンプレート「basic_white」はヘッダーの下に「記事一覧タブ」が存在します。
「記事一覧タブ」をクリックすると、「記事一覧ページ（アーカイブページ）」が開きます。
これは最新記事から順番に100件ほど表示させたページですが、通常の場合は記事がダラダラと100個、表示されるわけです。（ダラダラと、ってちょっとヒドイ表現ですね、すみませんｗ）
私はこういう形式で表示される「記事一覧」を「リスト表示」と呼んでいます。



前回の記事＜■FC2ブログ【basic_white】編集（6）＞では「記事一覧」を「リスト表示」ではなく「カテゴリ別表示」にする方法を説明しました。
その名前の通り、記事をカテゴリで分けて表示させる方法です。
カテゴリ別で表示すると関連記事が一目でわかるので、まあ、閲覧者にもどんな記事を書いているのかがわかりやすいのではないかと思います。（ただの自己満足でしかないんですけどね）



つまり、テンプレート「basic_white」には「記事一覧タブ」がデフォルトで設定されていて、そのタブをクリックすると、最新記事が「リスト表示」されるわけですね。


せっかく「カテゴリ別表示」に設定する方法もわかっているのですから、「記事一覧タブ」と同じように「タブ」を設定して、タブを切り替えるたびに「リスト表示」と「カテゴリ別表示」を切り替えるように設定したいと思います。
「記事一覧」の「リスト表示」と「カテゴリ別表示」を同時に表示させる、ってことです。



ちなみにタブを追加する方法は、以前の記事＜■FC2ブログ【basic_white】編集（2）＞で説明していますので、そちらをお読みください。
まあ、この記事で説明するようにHTMLを変更すると、勝手に「記事一覧」と「SITEMAP」というタブが出来上がってしまうんですけどね（笑）




前回の記事でも注意していましたが、「リスト表示」と「カテゴリ別表示」の両方を設定したい場合は、「リスト表示バージョン」と「カテゴリ別バージョン」の2つのテンプレートを準備してください。
自分のブログのテンプレートを複製（コピー）した上で「カテゴリ別表示」コードに書き換えれば簡単に作成できます。（「カテゴリ別表示」にする方法は前回の記事＜■FC2ブログ【basic_white】編集（6）＞で説明しています）



リスト表示




カテゴリ別表示

FC2ブログの「記事一覧ページ（アーカイブページ）」について

FC2ブログで「記事一覧ページ」を表示させたい場合は、公式プラグインに「全記事表示リンク」がありますので、これを利用します。
「全記事表示リンク」の説明欄には「ブログの全記事表示のリンクを表示します」と書いてありますからね、例えばサイドメニューに表示させたいならば、この公式プラグイン「全記事表示リンク」を使えばいいです。



とはいえ、「記事一覧ページ」はプラグインを設定しないと表示できないわけではありません。
自分のブログの「archives.html」というページが「記事一覧ページ」になります。
「basic_white」というテンプレートではコレを利用して、ヘッダー下の「記事一覧タブ」に「記事一覧ページ」をリンクさせています。（デフォルトの設定ではタブは1つで、そこに「記事一覧ページ」が設定されています）



さて、ここまで書いてきたら自分でも混乱してきましたので、以下「記事一覧ページ」のことは「アーカイブページ」と表記することにします。
「記事一覧」というタブが存在していますからね、「記事一覧タブ」と「記事一覧ページ」が繰り返し出てくると、わけがわからなくなるでしょう？ｗ
「記事一覧ページ」のURLは「archives.html」なので、以降は「アーカイブページ」と呼びます！



ということで「アーカイブページ」のURLアドレスはこちらです。




でも、HTMLに記述されている「タブ」部分のコードはこんな表記です。



どこにも「http://□□□.blog.fc2.com/archives.html」なんて書かれていませんが、これは、FC2ブログが変数を利用しているからです。
細かいことはどうでもいいので省略しますが、「<a href="<%url>archives.html">」の中の「<%url>」部分のURLが「http://□□□.blog.fc2.com」を指します。



プラグインを利用しようが、直接どこかに「http://□□□.blog.fc2.com/archives.html」というURLを記述しようが、「アーカイブページ」が表示する内容は1つだけです。
しかも、FC2ブログでは「archives2.html」のように私が勝手にURLを作ることはできないので、「アーカイブページ」を表示させたかったら、「http://□□□.blog.fc2.com/archives.html」を開かせるしかないわけです。



FC2ブログでは、「アーカイブページ」は1つしか存在しません。2つも3つも作れません。
テンプレート「basic_white」の「アーカイブページ」は「リスト表示」です。これがデフォルト（基本）です。
でも私は、1つのブログに「リスト表示」と「カテゴリ別表示」の2つの「アーカイブページ」を表示させたいわけです。

2つのテンプレートを準備する

1つのブログに「リスト表示」と「カテゴリ別表示」の2つの「アーカイブページ」を同時に表示させるためには、「別バージョンのテンプレート」を利用します。
アーカイブページを増やすことができない以上、見せ方を増やす、ということです。
前回の記事でしつこく「記事一覧をカテゴリ表示にしたいなら、テンプレートを複製（コピー）して別バージョンとして作れ」と言っていたのは、ここで利用したいからです。



ちなみに、私自身は「記事一覧タブ」と「SITEMAPタブ」を作ってアーカイブページを切り替えるように設定したので、以降、タブ名は「記事一覧」と「SITEMAP」にします。
もちろんご自分のブログに合うようにタブ名を変更してかまいませんが、この記事を最後まで読んでからタブ名を変更した方が、混乱しなくて済むかもしれません。



では、テンプレートを複製して別バージョンのテンプレートを準備します。


必要なテンプレートは2つです。
1つは「記事一覧」（リスト表示）のテンプレートAです。Aをメインテンプレートにします。
もう1つは「SITEMAP」（カテゴリ別表示）のテンプレートBです。


テンプレートAのアーカイブページはリスト表示で、テンプレートBのアーカイブページはカテゴリ別表示です。この設定は動かさないでください。混乱してしまいます。



テンプレートAとBは、全く同じ構成にしてください。
唯一違う部分は「アーカイブページ」の表示の仕方（リスト表示かカテゴリ別表示か）です。


＜別バージョンのテンプレートの作り方＞

テンプレートの「適用」と「プレビュー画面」の表示

2つのテンプレートを準備しました。
メインテンプレートは「テンプレートA（リスト表示）」で、別バージョンのテンプレートが「テンプレートB（カテゴリ別表示）」です。
この2つはアーカイブページの表示方法が異なるだけで、あとは全く同じです。



では、1つのブログで2つのアーカイブページを同時に表示させるためにはどうしたらいいのか？
簡単なことです。
メインテンプレートAの「SITEMAP」（カテゴリ別表示）タブをクリックしたら、テンプレートBが表示されるようにリンク設定すればいいのです。



あれ？そんなことできるの？
と思われた貴方様は、正しいです（´∀｀*）
ブログの設定ではテンプレートを1つしか選べませんから。
今現在「適用」されているテンプレートは絶対に1つだけですから、他にテンプレートを何個も作っていたとしても、他のテンプレートを「適用」することはできません。当たり前です。



でも、1つだけやり方があるのです。
それは別のテンプレートのプレビュー画面を表示させることです。



実はFC2ブログでは「プレビュー画面」が公開されているのです。
管理者だけが見ることができるのではなく、他の人も見ることができます。
この「プレビュー画面」は記事を増やしたとしても、それを反映させます。つまり、普通に管理画面でプレビューして見たそのままに公開する、ということです。
アーカイブページも随時更新されていくため、何ら問題はありません。
（新しい記事を書いた時、ちゃんとプレビュー画面に反映されますよね？それを公開しているのですから、メインテンプレートAで更新した新しい記事はテンプレートBにも反映されます）



ということで、1つのブログで2つのアーカイブページを同時に表示させる方法です。
具体的な記述のやり方は、次の項目で説明します。


＜大まかな流れ＞

記事一覧の「リスト表示」と「カテゴリ別」を同時に表示させ、切り替える

以下はあくまでもテンプレート「basic_white」でのやり方ですが、この「プレビュー画面を表示させる」というのは他のテンプレートでもできます。なので同時に「カテゴリ別表示」を表示させたいならば、このやり方をやってみてください。



ちなみに今回はCSSの編集はありません。
タブをクリックしたら表示されるべきページを今から指定したいだけなので、HTMLだけ編集すればいいです。
いじるべき場所が限られているので、今回は簡単だと思います。



HTMLでは「記事一覧」（リスト表示）と「SITEMAP」（カテゴリ別表示）という2つのタブを設定します。
タブは追加したり減らしたりできますので、細かい部分はご自分のブログに合わせて変更してください。もちろん、タブのリンク先URLは貴方様のブログに合わせてください。

HTMLにコードを記述する

HTML編集画面で「<div id="headermenu">」というタグを探します。
「<div id="headermenu">」以下に「タブ」に関するコードを記述します。


＜編集後＞



これは、テンプレートA・Bとも共通のHTML編集画面です。
「SITEMAP」タブをクリックするとテンプレートBのアーカイブページ（カテゴリ別）が表示されるようにしたいのですから、編集するのは「SITEMAP」タブのURLです。「テンプレートBのプレビュー画面」にリンク設定しています。
テンプレートAもBも、同じ個所を同じように編集してください。

プレビュー画面のURLについて

テンプレートAとBにはそれぞれちゃんとした名前を付けています、よね？
とりあえずここでは、テンプレートA（メインテンプレート）の名前は「basic-01」として説明します。
テンプレートBは「basic-01」をコピーして作ったので「basic-01copy」です。



テンプレートAを「適用」している状態でテンプレートBのアーカイブページを「プレビュー表示」させるためには、プレビュー画面のURLがわかっていなければリンク設定できません。
FC2ブログのアーカイブページの「プレビュー画面」URLは、こちらです。


＜アーカイブページのプレビュー画面＞




私のブログのアドレスは「http://□□□.blog.fc2.com/」です。（「/」まで入ります）
その後ろに「?template=」を足して、テンプレートBのテンプレート名「basic-01copy」を足して、その後ろに「&all」を付けると、テンプレートBのアーカイブページのプレビュー画面を表示させることができます。


＜テンプレートBのアーカイブページのプレビュー画面＞



これがテンプレートB（カテゴリ別表示用のテンプレート）のアーカイブページのプレビュー画面URLです。上記編集後のコード紹介の中で、「SITEMAP」タブのURLとして記述している箇所（青色で表示している部分）です。



貴方様のブログでは、貴方様が表示したいテンプレート名を入れたURLを設定すれば、プレビュー画面として表示することができます。
もちろん、テンプレートAもテンプレートBも、両方とも同じようにプレビュー画面URLを設定してくださいね。片方だけではダメです。必ず両方とも同じコード記述にしてください。



以上でHTML編集は終わりです。簡単だったでしょ？（笑）
念のため、ちょっと混乱するかもしれませんが、テンプレート切り替えについて考え方を書いておきます。

テンプレート切り替えの考え方

まず、メインテンプレート（テンプレートA）を設定しますよね。これは「適用」させますから、このテンプレートを使っているのが貴方様のブログということです。
そしてテンプレートAにはタブがあります。リスト表示のためのタブと、カテゴリ別表示のためのタブです。


この記事ではリスト表示のためのタブを「記事一覧」、カテゴリ別表示のためのタブを「SITEMAP」と表記してきましたが、以下、わかりやすいようにそのまま「リスト表示タブ」「カテゴリ別表示タブ」と表記することにします。そして、テンプレートAをリスト表示に、テンプレートBをカテゴリ別表示にする、という設定にしておきます。



貴方様がやりたいことは、貴方様のブログの上部に設置した「リスト表示タブ」をクリックすると記事一覧のリスト表示を、「カテゴリ別表示タブ」をクリックすると記事一覧のカテゴリ別表示をさせる、ということです。


貴方様が適用しているテンプレートAのアーカイブページはリスト表示です。
今回貴方様は、テンプレートAをコピーしてテンプレートBを作りました。もちろんAにもBにも「リスト表示タブ」と「カテゴリ別表示タブ」が存在しているはずです。
そしてテンプレートBのアーカイブページをカテゴリ別表示に設定しました。


貴方様はメインテンプレート（テンプレートA）を閲覧している時、「カテゴリ別表示タブ」をクリックしたら、カテゴリ別表示のアーカイブページを表示したいわけです。
なので、適用しているテンプレートAの「カテゴリ別表示タブ」のリンク先は、テンプレートBのアーカイブページ（プレビュー画面）になります。（カテゴリ別表示を設定したのはテンプレートBですからね）



では、メインテンプレート（テンプレートA）を閲覧している時の「リスト表示タブ」のリンク先はどこでしょうか？
うん、まあ、当然「archives.html」ですよね！
貴方様は今テンプレートAを「適用」させているのです。
テンプレートAのアーカイブページ「archives.html」の表示方法はリスト表示です。だからそのままでいいのです。（「リスト表示タブ」でリスト表示を開きたいのだから、そのままでいいですね）




それでは次に、テンプレートB（プレビュー用のテンプレート）の場合も考えてみましょう。
テンプレートBを使用している時、それはつまり、カテゴリ別のアーカイブページを表示させている時です。
テンプレートBの出る幕は、カテゴリ別表示のページを見ている時しかありません。
当然ですよね？だって貴方様はそのページしか表示させないように設定しているのですから。（メインテンプレートでテンプレートBを案内しているのはカテゴリ別表示の箇所だけですから）


貴方様はテンプレートBを使用している時（カテゴリ別表示のページを見ている時）、「カテゴリ別表示タブ」をクリックしたら、カテゴリ別表示のアーカイブページを表示したいわけです。
ならば、「カテゴリ別表示タブ」のリンク先は、テンプレートBのアーカイブページになります。だって、カテゴリ別表示にしたのはテンプレートBの方なのですから。



ここで勘違いしないでほしいのは、今、貴方様がテンプレートBのプレビュー画面（つまりカテゴリ別表示のページ）を見ているとしても、テンプレートBに「archives.html」は存在していない、ということです。

「archives.html」とは、貴方様のブログ自体の「archives.html（アーカイブページ）」のことです。
そして貴方様はテンプレートAを「適用」しているのですから、貴方様のブログの「archives.html」はテンプレートAのアーカイブページを表示します。
テンプレートBの「archives.html」がカテゴリ別表示になると思わないでください。「archives.html」のページはあくまでも適用しているテンプレートに従った表示になります。



ということで、テンプレートBを表示させている時の「カテゴリ別表示タブ」には、テンプレートBのプレビュー画面のURLを設定しなければなりません。
逆に、テンプレートBでの「リスト表示タブ」は、リスト表示をしたいのだからそのまま「archives.html」にしておけばよいのです。
しつこいですが、「archives.html」は貴方様が適用しているメインテンプレート（テンプレートA）の全記事タイトルリストを表示します。



結果、テンプレートAでもテンプレートBでも、全く同じHTML記述になります。
同一の記述（「カテゴリ別表示タブ」のリンク先を、テンプレートBのアーカイブページのプレビュー画面にする）をA、Bそれぞれに書くことになります。

雑感

‥‥混乱してきたでしょう？（笑）
上記の説明、何となく理解してくだされば結構ですので。


簡潔に言うと、テンプレートAでもテンプレートBでも、「カテゴリ別表示タブ」にのみテンプレートBのアーカイブページをリンク設定すればよい、ということですね。
「リスト表示タブ」には「archives.html」をリンク設定しておけばいいです。



なんかアレですよ、一応ですね、念のために書いておきますが、このやり方はあくまでも私自身が実際にやってみて上手くいったよ！というだけの話ですので、貴方様のブログでも同じようにできると断言することはできませんからね？
私は別にWebに詳しいわけではありませんので、詳細な説明を求められても答えられません。
「ふ〜ん、そんなやり方があるんだ」ぐらいな感じでよろしくお願いします。



ちなみに私の体験談ですが、この設定（テンプレートAとBを作ってリンクさせ合う）をした直後、いくら記事を更新してもテンプレートBには反映されませんでした。
「なんでだろう？」と思って色々と試行錯誤をしていましたが、1時間もしないうちにきちんと反映されるようになりました。
たまたまFC2ブログのサーバーの問題だったのか、ブラウザのキャッシュが邪魔をしていたのかわかりませんが、今現在は全く問題なく稼働していますのでおそらく大丈夫なんじゃないかなぁ？と思っています。
もしも反映されなかったとしても、気を長くしてお待ちください。



あと、もしもテンプレートBが反映されない場合は、テンプレートの名前を変更して改めてリンク設定をし直してあげれば、すんなりと反映されますので。（経験済みです）
FC2ブログさんがどういう設定になっているのかわかりませんが、もしもテンプレートが反映されない場合は、テンプレート名を変更してみるのも1つのやり方だと思います。




次の記事の紹介

今回はプレビュー画面を表示させるやり方をご紹介したわけですが、このプレビュー画面を表示させるというのは、ブログ設定での別の場面でも役に立ちます。
次の記事でやり方を紹介しましたので、興味のある方はお読みください。