(ちょっとメモ)FC2ブログに「カテゴリ別一覧」を作る
最終更新日:2017年11月16日 (初回投稿日:2015年12月05日)今さらですが、この「ほんっとにはじめてのHTML5」に、「カテゴリ」と「月別アーカイブ」の一覧ページを作りました。今回はFC2ブロガー以外はごめん今回は関係ない記事です。スルーして。
今まではサイドバーからクリックしても、一覧でなく記事そのものが表示されていて、自分でも不便を感じ、やっと設置しました。その設置方法をメモっておきます。
FC2ブログにカテゴリ別一覧を作る
カテゴリ別一覧の作り方です。(月別アーカイブ、検索結果、タグ検索結果などもこの応用です)
FC2ブログのテンプレート用変数の「エリア(モード)変数」をいくつか使います。
テンプレートをいじるときは、必ずバックアップを取ってから作業をしましょう。
間違えて大事なタグを削除しちゃったりしたら、あとで収集がつかなくなるよ。
【1】カテゴリ別一覧のソースを作る
テンプレートの「記事の表示部分」のHTMLをコピーして「一覧の表示部分」に書き換えます。
「記事の表示部分」の探し方
これは 使っている「テンプレート」によって HTML の構成が違うので、はっきり「ココ」と言えませんが、探すヒントを書いておきますね。
(何度か自分のテンプレートを編集している人なら、すぐわかると思うんだけどね)
まず、テンプレート内で <!--topentry--> 〜 <!--/topentry--> で囲まれている大きなブロックを探します。(ブラウザの検索で探すと見つけやすいです)
いくつか見つかるかもしれませんが、大きな範囲で囲まれているものが、たぶん記事部分です。
<!--topentry--> 〜 <!--/topentry--> とは、FC2ブログのテンプレート変数と呼ばれるヤツで、「繰り返し表示させるブロック」を作ります。WordPressの「WordPressループ」みたいなもんですね。
で、その <!--topentry--> 〜 <!--/topentry--> の中に、自分のブログのHTMLの構成があることを確認します。この「ほんっとに...」の例だと「記事の表示部分」は、ざっとこのようになっています。
<!--topentry-->
<div class="content"> ←全体を囲むブロックがあります(テンプレによってクラス名は違うと思う)
<h2 id="e<%topentry_no>" class="entry_header"> ←記事のタイトル
<!--not_permanent_area--><a href="<%topentry_link>" title=""><!--/not_permanent_area-->
<%topentry_title>
<!--not_permanent_area--></a><!--/not_permanent_area-->
</h2>
<div class="entry_body"> ←記事本文のブロック
<%topentry_body> ←記事本文
<!--more_link--> ←「つづきを見る」とかいうアレ
<p class="entry_more">
<a href="<%topentry_link>#more" title="<%topentry_title>"><%template_extend></a>
</p>
<!--/more_link-->
<!--more--><div id="more"><%topentry_more></div><!--/more-->
</div> ← entry_bodyの終了タグです
<ul class="entry_footer"> ←記事のフッターです
(略...投稿日とか、カテゴリーとか、記事の情報が入ります)
</ul>
</div> ← contentの終了タグです
<!--/topentry-->
この↑ <div class="content"> 〜 </div> にあたる部分が「記事の表示部分」です。
クラス名はテンプレによって違うし、もしかしたら<div>じゃなくて <article> や <section> かもしれないけど。自分のブログの記事表示部分に該当する部分を見つけてください。
上記↑で見つけた「記事の表示部分」のブロックをコピーし、一覧ページ用に編集します。
タイトル部分や、一覧の表示部分を書き換えます。(書き方の例はこのすぐ後に)
ブログのデザイン的な部分を流用するために、こうするわけですよ。
できあがったソース全体を <!--category_area--> 〜 <!--/category_area--> で囲むと、このソースは「カテゴリ別画面」のみで表示されるようになります。
例としてこのブログの「一覧の表示部分」の HTMLを載せておきます。
<!--category_area-->
<div class="content">
<h3 class="entry_header">カテゴリ:「<%sub_title>」の記事一覧</h3>
<div class="entry_body">
<div class="ibox">
<ul><!--topentry-->
<li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></li>
<!--/topentry--></ul>
</div>
</div>
</div>
<!--/category_area-->
タイトル部分は、「カテゴリ:「<%sub_title>」の記事一覧」としていますが、<%sub_title>以外は好きな文言に変えてください。<%sub_title>はブログサブタイトル(エントリータイトル、カテゴリ名、日付、検索ワードなど)を表示します。
6~8行目は、一覧のタイトルリスト部分です。これはすべての一覧ページで共通のソースです。
li要素を <!--topentry--> 〜 <!--/topentry--> で囲みます。これは、該当する記事やタイトルなどを繰り返し表示するブロックを作ります。WordPresのループみたいなもの。
li要素の中(7行目)の <%topentry_link> は記事のURLを、<%topentry_title> は記事のタイトルを書きだします。
【2】<%topentry>の上にソースを置く
FC2ブログ管理画面で、設定>テンプレートの設定>HTMLの編集スペースで、さきほどのソースを置きます。
さきほど見つけた「記事の表示部分」(テンプレート内で <!--topentry--> 〜 <!--/topentry--> で囲まれている大きなブロック)の上(前)か下にソースを置きます。
各ブログ記事の表示部分のすぐ外側に置くってコトです。
【3】<%topentry>部分を<!--not_category_area-->にする
先ほど見つけた <!--topentry--> 〜 <!--/topentry--> で囲まれているブログ記事表示の部分を、
<!--not_category_area--> 〜 <!--/not_category_area--> で囲みます。
<!--not_category_area--> 〜 <!--/not_category_area-->は、カテゴリ別画面で表示をさせない部分を指定します。
これを指定しとかないと、カテゴリ別一覧のページにも、該当する記事が表示されてしまいます。
<!--category_area-->
<div class="content">
<h3 class="entry_header">カテゴリ:「<%sub_title>」の記事一覧</h3>
<div class="entry_body">
<div class="ibox">
<ul><!--topentry-->
<li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></li>
<!--/topentry--></ul>
</div>
</div>
</div>
<!--/category_area-->
<!--not_category_area-->
<!--topentry-->
<div class="content">
ここに各記事用のソースがあります
</div>
<!--/topentry-->
<!--/not_category_area-->
【4】表示するタイトル数を設定する
最後に、一覧ページに表示するタイトルの数を設定します。
FC2ブログ管理画面の、設定>環境設定>ブログの設定>記事の設定で「表示件数」をタイプして「更新」ボタンを押します。
これで、カテゴリ別一覧ページが表示されるようになりました。
応用:月別アーカイブ一覧を作る
応用で「月別アーカイブ一覧」も設定しましょう。先ほどのカテゴリ別一覧のソースをコピペしてちょっと書き換えればOKです。
月別アーカイブでは、ソースを <!--date_area--> 〜 <!--/date_area--> で囲みます。
そして、各ブログ記事の部分の外側は <!--not_date_area--> 〜 <!--not_date_area--> で囲みます。
タイトル部分もちょっと変えればOK。
先ほどのソースに「月別アーカイブ一覧」のソースを加えるとこうなります。
<!--category_area-->
<div class="content">
<h3 class="entry_header">カテゴリ:「<%sub_title>」の記事一覧</h3>
<div class="entry_body">
<div class="ibox">
<ul><!--topentry-->
<li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></li>
<!--/topentry--></ul>
</div>
</div>
</div>
<!--/category_area-->
<!--date_area-->
<div class="content">
<h3 class="entry_header">月別アーカイブ:「<%sub_title>」の記事一覧</h3>
<div class="entry_body">
<div class="ibox">
<ul><!--topentry-->
<li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></li>
<!--/topentry--></ul>
</div>
</div>
</div>
<!--/date_area-->
<!--not_date_area-->
<!--not_category_area-->
<!--topentry-->
<div class="content">
ここに各記事用のソースがあります
</div>
<!--/topentry-->
<!--/not_category_area-->
<!--/not_date_area-->
テンプレート全体の構造まとめ
というわけで、FC2ブログのテンプレートの「エリア(モード)変数」を使って、1つ作ればあとはコピペでいろいろ一覧ページを作れますね。
検索結果、タグ検索結果の一覧も作ったら、テンプレートの構造はこんなかんじになります。
<!--category_area-->
<div class="content">
カテゴリ一覧のソース
</div>
<!--/category_area-->
<!--date_area-->
<div class="content">
月別アーカイブ一覧のソース
</div>
<!--/date_area-->
<!--search_area-->
<div class="content">
検索結果一覧のソース
</div>
<!--/search_area-->
<!--tag_area-->
<div class="content">
タグ一覧のソース
</div>
<!--/tag_area-->
<!--not_tag_area-->
<!--not_search_area-->
<!--not_date_area-->
<!--not_category_area-->
<!--topentry-->
<div class="content">
ここに各記事用のソースがあります
</div>
<!--/topentry-->
<!--/not_category_area-->
<!--/not_date_area-->
<!--/not_search_area-->
<!--/not_tag_area-->
- 関連記事
-
- (ちょっとメモ)Googleフォームで簡単・無料でフォームが作れる!
- (ちょっとメモ)Prism の使い方(SyntaxHighlighterから乗り換えた)
- (ちょっとメモ)FC2ブログで「最終更新日時」が使えるようになった!
- (ちょっとメモ)さようなら〜IE8♪
- (ちょっとメモ)FC2ブログに「カテゴリ別一覧」を作る
- (ちょっとメモ)FC2ブログに はてブ と Google+1 のボタンをつける
- (ちょっとメモ)FC2ブログで OGP設定(Facebook, Twitter Cardsも)
- (ちょっとメモ)StatCounter でブラウザのシェアを調べる
- (ちょっとメモ)FC2ブログで PC用テンプレートをスマホで適用させる
- (ちょっとメモ)WordPressプラグイン SyntaxHighlighter Evolved
- (ちょっとメモ)SyntaxHighlighter 3.0.83 の使い方
- (ちょっとメモ)HTML5情報サイト「HTML5.jp」
- (ちょっとメモ)IEにもCSS3の機能を使えるようにする「CSS3 PIE」
- (ちょっとメモ)ブラウザのCSS3とHTML5への対応サイト
- (ちょっとメモ)トラッキングクッキーの無効化
初心者にも使いやすい(と思う)レンタルサーバー
「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは
スターサーバー
(ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。
ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー
。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。
スポンサーリンク
コメントの投稿
No title
お願いいたします!
Re: No title
記事に「記事の表示部分の探し方」を追加しておきましたので、読んでみてください。
そして、FC2ブログの「テンプレート用 変数一覧」
http://help.fc2.com/blog/manual/Home/template/templatevariable.html
を見ながら自分のテンプレートの内容を把握して、探してくださいね。