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

FC2ブログのテンプレート「basic_white」の場合、デフォルトの状態（何も編集しない状態）で「記事一覧ページ」（archives）を表示させると、通常は掲載した記事が新着順に「リスト表示」されます。


デフォルトの場合（リスト表示）



各記事ごとに日付、記事タイトル、カテゴリを表示させるようにして、文字色を変更してわかりやすくしてはいますが、なんだかパッとしないと言うか、ごちゃごちゃして見にくい気がしてしまうんですよ。（あくまでも私は、ですけどもｗ）



「リスト表示」でも別にかまわないんですが、関連記事との関係をよりわかりやすくするために、「記事一覧」を「カテゴリ別」に表示させる方法を説明したいと思います。
「カテゴリ別」で表示させると、こんな感じになります。


カテゴリ別に表示させた場合



わかりやすい、かな？（笑）
まあ、どういう内容の記事が存在するのかは、わかりやすくなったのではないでしょうか。



「記事一覧」に関して、どちらの方法で表示させるのかを迷った結果、私自身は「リスト表示」と「カテゴリ別表示」の両方を表示できるように設定しました。
テンプレート「basic_white」は、デフォルトの状態でヘッダーの下に「記事一覧」タブが存在します。
このタブの数を増やして「記事一覧タブ」には「リスト表示」を、「SITEMAPタブ」には「カテゴリ別表示」を設定したわけです。
タブで切り替えることができるので便利だなぁと、個人的には思っています。



ということで、この記事では「記事一覧」（archives）を「カテゴリ別」で表示する方法を説明したいと思います。
「記事一覧」つまり「アーカイブページ」は最新記事から順番に表示されますが、FC2ブログの仕様で最新記事100個までしか表示できないようです。表示件数は限られていますが、表示方法はカスタマイズできるわけですから、好きな方法で「記事一覧ページ」を作ればいいのではないでしょうか。

カテゴリ別で表示させるための注意点

ということで、「記事一覧ページ（アーカイブページ）」をデフォルトの「リスト表示」ではなく「カテゴリ別表示」に変更する方法を説明したいと思いますが、その前に少しだけ注意点を書いておきます。



まずこれから説明する設定は、「記事一覧ページの記述をカテゴリ別表示に書き換える」方法です。つまりHTMLを書き換えることになるため、元には戻せない（リスト表示には戻せない）ことになります。
（元に戻せなくなるのが嫌なので、私自身は両方を表示させるようにしました）



元に戻せなくなってしまうのを避けたいならば、HTML上の元のコード（リスト表のコード。つまりテンプレートに既に存在しているコード）を完全に消してしまうのではなくて、「コメントアウト」しておけば良いと思います。
「コメントアウト」というのは、簡単に言うと「HTMLコード上には存在しているけれども、ウェブページ上には表示させない方法」です。





というか面倒なので、下記で説明する方法で「カテゴリ別表示」にする場合は、素直にHTMLコードを書き換えてしまえばいいと思います。（←コメントアウトを説明した意味ｗｗｗ）



デフォルトの「リスト表示」を残しておきたいならば、ご自身のテンプレートを複製した上で「カテゴリ別表示」コードに書き換えてください。
つまり「リスト表示」のバージョンと、「カテゴリ別表示」のバージョンの、2つのテンプレートを作っておく、ということです。
別バージョンのテンプレートがあれば、「記事一覧ページ」の表示方法を変えたい時に、好きな方のテンプレートを「適用」すればいいだけです。
私は、テンプレートを2つ準備することを強く推奨します。





あと、下記で説明する「カテゴリ別表示」ではマーク（画像）を使うので、前回の記事＜■FC2ブログ【basic_white】編集（5）＞で説明していたように、あらかじめマーク画像を準備しておいてください。（画像の作り方は前回の記事で説明していますので参考にどうぞ）

「記事一覧」を「カテゴリ別」で表示させる（HTMLの編集）

管理画面のサイドメニュー「テンプレートの設定」を開き、自分が使用しているテンプレート名の「編集」を選択してください。
「○○のHTML編集」画面になるので、「<!--titlelist_area-->」というタグを探します。
（「Ctrlキー」＋「Fキー」で検索するとすぐにわかります）


「<!--titlelist_area-->」から「<!--/titlelist_area-->」までの間にあるコードをすべて、下記の「追加するコード」に置き換えます。文字色は気にせずにすべてのコードをコピペしてください。


＜追加するコード＞

HTMLコード内容の説明

この「カテゴリ別表示」は「JavaScript（ジャバスクリプト）」を使用しています。
ブログの閲覧者が「JavaScript」を有効にしていないと「カテゴリ別表示」を見ることができない、という設定です。（これは仕方が無いことなので、変更することはできません）


テンプレート「basic_white」の通常の記事一覧表示（リスト表示）の時はデフォルトの設定なので改めて何かするようなことはありませんでしたが、カテゴリ別の場合はそうはいきません。
閲覧者が「JavaScript」を無効にしている時は「カテゴリ別表示」を見ることができないので、ちゃんと注意喚起をしなければ、閲覧者にとって優しくないブログになってしまいます。



ということでHTMLには「JavaScriptを有効にしてね」という言葉を書いています。「サイトマップを利用するためには JavaScript を有効にしてください。」という文言部分です。
私のブログでは「カテゴリ別表示」を「SITEMAP」というタブで表示させるように設定しているので「サイトマップを利用するためには」という文言にしています。この部分は、ご自身のブログに合うように変更してください。




HTML中のURL部分「<img src="http://□□□.com/マーク(2).gif" />」についてですが、コレは前回の記事＜■FC2ブログ【basic_white】編集（5）＞で作ったマーク（画像）のアップロード先です。
記事タイトルの頭に付けている画像「」を指します。
このURL部分は、ご自分の画像のURLに書き換えてください。
上記HTMLには存在しないURLを表記していますからね、必ず書き換えてくださいね。




赤色の文字で表記しているclass名「subcate」は、カテゴリ名（カテゴリタイトル）を指します。（「未分類」とかそういうヤツ）
同じくclass名「pgtop」は「*PageTop」という、ページのトップに戻るリンクのことです。
どちらもデフォルトでは存在していないclassで、私が勝手に作りました。




HTMLには「■」や「▼」などのマークを書いている部分がありますが、これは好きなように変えてくださって大丈夫です。表示をわかりやすくするための単なるマークですので、どのように変えても問題ありません。


とりあえず、「カテゴリ別表示」の画像を掲載しておきます。
「■」や「▼」がどこに表示されるのかを確認してみてください。


‥‥あ！この画像には「▼」が無かった！（笑）
「▼」は子カテゴリのタイトル頭に付きます。どのように表示されるのかは、このページ上部に掲載した「カテゴリ別に表示させた場合」画像でご確認ください。

「記事一覧」を「カテゴリ別」で表示させる（CSSの編集）

では次に、HTMLで書き込んだ記述内容がきちんと表示できるように、スタイルシート（CSS）の編集をします。
「HTML編集」画面の下に「スタイルシート編集」画面が表示されているので、スタイルシートの一番下に、下記のコードを追加（コピペ）してください。


＜追加するコード＞

スタイルシート（CSS）記述内容の説明

CSSにはURL部分の記載「background-image: url("http://□□□.com/マーク(1).gif");」が2ヶ所あります。


コレもHTMLと同じように、前回の記事＜■FC2ブログ【basic_white】編集（5）＞で作ったマーク（画像）のアップロード先です。
記事タイトルの頭に付けている画像「」を指します。カッコを回転させた画像、です。
このURL部分も、HTMLと同じようにご自分の画像のURLに書き換えてください。


（どうでもいいですが、マーク画像を記事内で表示させると、文字のラインよりもちょっと上に表示されていて、マーク画像が飛び出ているように見えると思います。これは、私が画像（img）の下に余白を入れるようにこのブログで設定しているからです。ここだけ余白を外すように設定するのも可能ですが、面倒なのでしませんｗ）




文字の色とか背景色とか文字の大きさとか、そういうものはCSSで調整してください。
赤色の文字の「.pgtop」部分は、HTMLでも説明した通り「*PageTop」という単語をクリックするとページのトップへ移動できるようなリンク設定部分を指します。
「margin-bottom（下余白）」を記述しているので、この数値を変更するなどして調整してみてください。



ちなみにCSSの最後の「.subcate」は、カテゴリ名（カテゴリタイトル）の部分です。
ちょっと大きめに表示させた方がいいかな？と思って「font-size」を「120％」に指定しています。
もちろん、ご自分のブログに合ったサイズに変更してみてください。




う〜ん、こんな感じで大丈夫だと思うんですけどね。
まあ、紹介したコードは私のブログに合わせた仕様だし、記述内容も「私の場合はこうしたよ」という紹介なだけです。「うまくいかないじゃないか！」みたいな感じで言われても困りますので、あくまでも参考程度にご利用いただければと思います。




次の記事の紹介

次の記事ではテンプレート「basic_white」の「タブ」を設定して、タブを切り替えるたびに「リスト表示」と「カテゴリ別表示」を切り替えるように設定する方法を説明します。