前回までで、テンプレートの表示をページによって分岐させることが出来たと思います。
FC2共有テンプレートなどに投稿されている一般的なテンプレートでは、個別にページを作るのは「全記事表示エリア」と「サーチエリア」だけで、他の「カテゴリーページ」「アーカイブページ」等は、トップページを流用する場合がほとんどです。
今回は、実際に「トップページとデザイン違い」のカテゴリーページを追加してみます。
カテゴリーページを、トップページデザインとは違う形、リスト化する方法です。
まず、前回行ったページ分岐で、「記事連続表示部分」から「サーチエリア」と「全記事表示エリア」を除外したことを思い出して下さい。
このようなことを前回やりました。
カテゴリーページを新規に作成するに当たって、まず最初に、「繰り返し表示区間」から、「カテゴリーエリア」がここに表示されなくなるようにしなければなりません。
その場合、赤字部分の区画に、新たに
これを追加すれば、カテゴリーエリア表示の時、「記事繰り返し表示」がなされなくなります。
<!--not_category_area-->（カテゴリーエリア以外で表示する↓）
<!--not_search_area-->（サーチエリア以外で表示する↓）
<!--not_titlelist_area-->（全記事エリア以外で表示する↓）
<!--topentry-->（繰り返し区間ここから）
記事タイトル
本文
続きを読む
日付・コメント
…………等々
<!--/topentry-->（繰り返し区間ここまで）
<!--/not_titlelist_area-->（全記事エリア以外で表示する↑ここまで）
<!--/not_search_area-->（サーチエリア以外で表示する↑ここまで）
<!--/not_category_area-->（カテゴリーエリア以外で表示する↑ここまで）
<!--search_area-->
サーチエリア専用デザイン部分
検索語
記事タイトル
本文要約
…………等々
<!--/search_area-->
<!--titlelist_area-->
全記事エリア専用デザイン部分
リストタイトル、カテゴリ、日付、コメント数
…………等々
<!--/titlelist_area-->
現在これで、カテゴリーエリアに移動したとき、カテゴリーエリアでは何も表示されなくなりました。
では、今度は実際にカテゴリーエリアを作成していきます。
カテゴリーエリア専用の「エリア変数」を用いて、カテゴリーエリア以外では表示されなくしなければなりません。つまり、カテゴリーエリアだけで表示させるようにしなければなりません。その場合は…
この変数を使用します。
では、内容に移っていきます。
まずは、多数の記事からタイトルをリストを取得するには、
このブロック変数が必要になってきます。
ブロック変数は、「このタグの区間を○○回繰り返し表示する」という命令文です。
つまり、繰り返し表示を設定することでタイトルを繰り返して表示させれば、タイトルの一覧が出来るわけです。
後は、「テンプレート用 変数一覧｜FC2ブログ公式マニュアル」こちらのページとにらめっこしながら、「タイトル取得の変数」「タイトルページのURL」「日付」等々変数を、普通のHTMLタグと組み合わせていきます。
以下の実際に作成した例を見て、「FC2変数」と「HTMLタグ」の組み方の参考にしてみて下さい。
これは、記事タイトル変数と、その記事のURL変数を、「ハイパーリンクのHTMLタグ」と組み合わせたモノです。これを先ほどの「カテゴリーエリア変数」部分に挿入すれば…
これで、環境設定で設定した回数文だけ、記事タイトルとそのリンクが繰り返し表示されることになります。
後は、HTMLの「リストタグ」とか「divタグ」等と組み合わせて、カテゴリエリアが表示されたとき、かっこよく表示されるようにしていきます。
■元来た記事に戻るにはこちら。
カテゴリ・サーチ・全記事表示などに分岐させる
■次の記事はこちら。
見やすい全記事表示部分を組み立てる
■当サイトの他のテンプレートカスタマイズをする方は、こちらもあわせてご覧下さい。
カテゴリーリストページを作る
FC2共有テンプレートなどに投稿されている一般的なテンプレートでは、個別にページを作るのは「全記事表示エリア」と「サーチエリア」だけで、他の「カテゴリーページ」「アーカイブページ」等は、トップページを流用する場合がほとんどです。
今回は、実際に「トップページとデザイン違い」のカテゴリーページを追加してみます。
カテゴリーページを、トップページデザインとは違う形、リスト化する方法です。
カテゴリエリア非表示エリアの設定
まず、前回行ったページ分岐で、「記事連続表示部分」から「サーチエリア」と「全記事表示エリア」を除外したことを思い出して下さい。
<!--not_search_area-->（サーチエリア以外で表示する↓）
<!--not_titlelist_area-->（全記事エリア以外で表示する↓）
<!--topentry-->（繰り返し区間ここから）
記事タイトル
本文
続きを読む
日付・コメント
…………等々
<!--/topentry-->（繰り返し区間ここまで）
<!--/not_titlelist_area-->（全記事エリア以外で表示する↑ここまで）
<!--/not_search_area-->（サーチエリア以外で表示する↑ここまで）
<!--search_area-->
サーチエリア専用デザイン部分
検索語
記事タイトル
本文要約
…………等々
<!--/search_area-->
<!--titlelist_area-->
全記事エリア専用デザイン部分
リストタイトル、カテゴリ、日付、コメント数
…………等々
<!--/titlelist_area-->
<!--not_titlelist_area-->（全記事エリア以外で表示する↓）
<!--topentry-->（繰り返し区間ここから）
記事タイトル
本文
続きを読む
日付・コメント
…………等々
<!--/topentry-->（繰り返し区間ここまで）
<!--/not_titlelist_area-->（全記事エリア以外で表示する↑ここまで）
<!--/not_search_area-->（サーチエリア以外で表示する↑ここまで）
<!--search_area-->
サーチエリア専用デザイン部分
検索語
記事タイトル
本文要約
…………等々
<!--/search_area-->
<!--titlelist_area-->
全記事エリア専用デザイン部分
リストタイトル、カテゴリ、日付、コメント数
…………等々
<!--/titlelist_area-->
このようなことを前回やりました。
カテゴリーページを新規に作成するに当たって、まず最初に、「繰り返し表示区間」から、「カテゴリーエリア」がここに表示されなくなるようにしなければなりません。
その場合、赤字部分の区画に、新たに
| <!--not_category_area--> ～ <!--/not_category_area--> | カテゴリ別画面(blog-category-x.html)以外で表示されるブロック どの場所でも有効 |
これを追加すれば、カテゴリーエリア表示の時、「記事繰り返し表示」がなされなくなります。
<!--not_category_area-->（カテゴリーエリア以外で表示する↓）
<!--not_search_area-->（サーチエリア以外で表示する↓）
<!--not_titlelist_area-->（全記事エリア以外で表示する↓）
<!--topentry-->（繰り返し区間ここから）
記事タイトル
本文
続きを読む
日付・コメント
…………等々
<!--/topentry-->（繰り返し区間ここまで）
<!--/not_titlelist_area-->（全記事エリア以外で表示する↑ここまで）
<!--/not_search_area-->（サーチエリア以外で表示する↑ここまで）
<!--/not_category_area-->（カテゴリーエリア以外で表示する↑ここまで）
<!--search_area-->
サーチエリア専用デザイン部分
検索語
記事タイトル
本文要約
…………等々
<!--/search_area-->
<!--titlelist_area-->
全記事エリア専用デザイン部分
リストタイトル、カテゴリ、日付、コメント数
…………等々
<!--/titlelist_area-->
カテゴリーエリアを新設
現在これで、カテゴリーエリアに移動したとき、カテゴリーエリアでは何も表示されなくなりました。
では、今度は実際にカテゴリーエリアを作成していきます。
カテゴリーエリア専用の「エリア変数」を用いて、カテゴリーエリア以外では表示されなくしなければなりません。つまり、カテゴリーエリアだけで表示させるようにしなければなりません。その場合は…
| <!--category_area--> ～ <!--/category_area--> | カテゴリ別画面(blog-category-x.html)で表示されるブロック どの場所でも有効 |
この変数を使用します。
<!--not_category_area-->（カテゴリーエリア以外で表示する↓）
<!--not_search_area-->（サーチエリア以外で表示する↓）
<!--not_titlelist_area-->（全記事エリア以外で表示する↓）
<!--topentry-->（繰り返し区間ここから）
記事タイトル
本文
続きを読む
日付・コメント
…………等々
<!--/topentry-->（繰り返し区間ここまで）
<!--/not_titlelist_area-->（全記事エリア以外で表示する↑ここまで）
<!--/not_search_area-->（サーチエリア以外で表示する↑ここまで）
<!--/not_category_area-->（カテゴリーエリア以外で表示する↑ここまで）
<!--search_area-->
サーチエリア専用デザイン部分
検索語
記事タイトル
本文要約
…………等々
<!--/search_area-->
<!--titlelist_area-->
全記事エリア専用デザイン部分
リストタイトル、カテゴリ、日付、コメント数
…………等々
<!--/titlelist_area-->
<!--category_area-->
ここに、新規にカテゴリーエリア用のタグを記述していく。
<!--/category_area-->
<!--not_search_area-->（サーチエリア以外で表示する↓）
<!--not_titlelist_area-->（全記事エリア以外で表示する↓）
<!--topentry-->（繰り返し区間ここから）
記事タイトル
本文
続きを読む
日付・コメント
…………等々
<!--/topentry-->（繰り返し区間ここまで）
<!--/not_titlelist_area-->（全記事エリア以外で表示する↑ここまで）
<!--/not_search_area-->（サーチエリア以外で表示する↑ここまで）
<!--/not_category_area-->（カテゴリーエリア以外で表示する↑ここまで）
<!--search_area-->
サーチエリア専用デザイン部分
検索語
記事タイトル
本文要約
…………等々
<!--/search_area-->
<!--titlelist_area-->
全記事エリア専用デザイン部分
リストタイトル、カテゴリ、日付、コメント数
…………等々
<!--/titlelist_area-->
<!--category_area-->
ここに、新規にカテゴリーエリア用のタグを記述していく。
<!--/category_area-->
カテゴリーリストを作成してみる
では、内容に移っていきます。
<!--category_area-->
ここに、新規にカテゴリーエリア用のタグを記述していく。
<!--/category_area-->
ここに、新規にカテゴリーエリア用のタグを記述していく。
<!--/category_area-->
まずは、多数の記事からタイトルをリストを取得するには、
| <!--topentry--> ～ <!--/topentry--> | エントリーを繰り返し表示させるブロック |
このブロック変数が必要になってきます。
ブロック変数は、「このタグの区間を○○回繰り返し表示する」という命令文です。
例えば、
と、記述し、「環境設定→ブログの設定→記事の設定→記事(カテゴリ別)」で、
「表示件数：3」「表示順：新しい順」と設定した場合、実際に画面には、
「あいう」「あいう」「あいう」
と、表示されます。
<!--topentry-->
「あいう」
<!--/topentry-->
「あいう」
<!--/topentry-->
と、記述し、「環境設定→ブログの設定→記事の設定→記事(カテゴリ別)」で、
「表示件数：3」「表示順：新しい順」と設定した場合、実際に画面には、
「あいう」「あいう」「あいう」
と、表示されます。
つまり、繰り返し表示を設定することでタイトルを繰り返して表示させれば、タイトルの一覧が出来るわけです。
後は、「テンプレート用 変数一覧｜FC2ブログ公式マニュアル」こちらのページとにらめっこしながら、「タイトル取得の変数」「タイトルページのURL」「日付」等々変数を、普通のHTMLタグと組み合わせていきます。
以下の実際に作成した例を見て、「FC2変数」と「HTMLタグ」の組み方の参考にしてみて下さい。
<a href="<%topentry_link>"><%topentry_title></a>
これは、記事タイトル変数と、その記事のURL変数を、「ハイパーリンクのHTMLタグ」と組み合わせたモノです。これを先ほどの「カテゴリーエリア変数」部分に挿入すれば…
<!--category_area-->
<!--topentry-->
<a href="<%topentry_link>"><%topentry_title></a>
<!--/topentry-->
<!--/category_area-->
<!--topentry-->
<a href="<%topentry_link>"><%topentry_title></a>
<!--/topentry-->
<!--/category_area-->
これで、環境設定で設定した回数文だけ、記事タイトルとそのリンクが繰り返し表示されることになります。
後は、HTMLの「リストタグ」とか「divタグ」等と組み合わせて、カテゴリエリアが表示されたとき、かっこよく表示されるようにしていきます。
■元来た記事に戻るにはこちら。
カテゴリ・サーチ・全記事表示などに分岐させる
■次の記事はこちら。
見やすい全記事表示部分を組み立てる
■当サイトの他のテンプレートカスタマイズをする方は、こちらもあわせてご覧下さい。
カテゴリーリストページを作る
スポンサーリンク
Sun.04.03.2011
Comment
Trackback
Trackback URL
Comment Form
質問するときは？
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
- 不具合が出ているページのURLを書き込む。
- 使っているブラウザ（IE、Firefoxなど）を書き込む※IE6はサポート外です。
- 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
