FC2ブログの歩き方ブログ

公式テンプレートdefaultでトップページにカテゴリのみを置くカスタマイズ

htmlの該当部分に太字部分を追加。

1. <%introduction></p>

2.  </div>
3.  
4. <!--index_area-->
5. 　<div id="top">
6. 　　<p id="topmsg">
7. 　　　（メッセージ文言。改行が必要な場合は<br />で改行）
8. 　　</p>
9. 　　<h3>このブログのカテゴリ</h3>
10. 　　<ul>
11. 　　　<!--category-->
12. 　　　　<li id="c<%category_no>">
13. 　　　　　<a href="./blog-category-<%category_no>.html"><%category_name></a>
14.  　　　　</li>
15. 　　　<!--/category-->
16. 　　 </ul>
17. 　</div>
18. <!--/index_area-->
19. <!--not_index_area-->
20. 　<div id="left" class="column">
21. （中略）
22. 　　<!--/plugin_second-->
23. 　<!--/plugin-->
24. <!--/not_index_area-->
25.  
26.    <div id="footer">

スタイルシートに以下を追加。

1. #top{
2. width:400px;
3. margin-left:auto;
4. margin-right:auto;
5. padding:2em;
6. border:10px #ffa500 ridge;/*枠はお好みで。*/
7. }

一部カテゴリを表示したい場合

すべてのカテゴリではなく、一部のカテゴリを表示したいときもあります。そのときは、<ul>～</ul>の部分を以下のようにします。タイトル部分（<h3>このブログのカテゴリ</h3>）も「<h3>おすすめカテゴリ</h3>」などにすると良いでしょう。）

1. <ul>
2. 　<li id="c［カテゴリ番号］">
3. 　　<a href="./blog-category-［カテゴリ番号］.html">［カテゴリ名］</a>
4. 　</li>
5. 　<li id="c［カテゴリ番号］">
6. 　　<a href="./blog-category-［カテゴリ番号］.html">［カテゴリ名］</a>
7. 　</li>……
8. </ul>

<li id="c［カテゴリ番号］">～</li>は手書きです_※1。カテゴリ番号とカテゴリ名は表示したいものを入力します。

カテゴリ番号の見方

ブログ上にて、カテゴリをクリック。ブラウザのアドレスバーに表示される

ブログアドレスblog-category-[xx].html

[xx]に入る数字がカテゴリ番号です。

このブログだと、「バックアップとろうよ！」をクリックするとblog-category-12.htmlが表示されます。つまり、カテゴリ名「バックアップとろうよ！」のカテゴリ番号は「12」となります。

トップページに最新の記事へのリンクを表示する

最新の記事を表示したトップページ

トップページに最新の記事を表示したいときは、<ul>～</ul>の部分を以下のようにします。タイトル部分（<h3>このブログのカテゴリ</h3>）も「<h3>最新の記事</h3>」にしましょう。）

1. <ul>
2. <!--recent-->
3. <li>
4. <a href="<%recent_link>" title="<%recent_title>"><%recent_title> (<%recent_month>/<%recent_day>)</a>
5. </li>
6. <!--/recent-->
7. </ul>

トップページに特定の記事へのリンクを表示する

特定の記事へのリンクを表示する際は、手書きです。

1. <ul>
2. 　<li id="e［記事番号］">;
3. 　　<a href="./blog-entry-［記事番号］.html">［記事タイトル］</a>;
4. 　</li>
5. 　<li id="e［記事番号］">;
6. 　　<a href="./blog-entry-［記事番号］.html">［記事タイトル］</a>;
7. 　</li>……
8. </ul>

トップページに特定の記事へのリンクを配置する

特定の記事へのリンクを配置したトップページ

たとえばブログの説明やプロフィールなど、必ず最初に読んでほしいページがある場合、このような構成にすることもできます。

ただし、訪問者は必ずしもトップページから見に来るわけではありません。そのことを認識しておく必要があります。

1. <p id="enter">
2. 　　　<a href="./blog-entry-X.html">見せたい記事のタイトル</a>
3. </p>

Xには、見せたい記事の番号を入れます。記事の番号は、「記事の編集」画面で確認するのが最も簡単です。

トップページに「Enter」ボタンを配置する

「Enter」ボタンを配置したトップページ

Enterページを作りたいをご覧ください。

トップページにプラグインカテゴリを配置する

もうお気づきでしょうが、トップページにプラグインカテゴリを置いて、トップページの内容を管理画面で管理することも可能です。

プラグインカテゴリ３を表示

「最新の記事を表示したトップページ」と見かけは同じですが、これは「プラグインカテゴリ３に最新の記事プラグインのみを置いた状態」です。もちろん、プラグインカテゴリ３に複数のプラグインを置くこともできますし、プラグインカテゴリ１、２、３すべてを置くこともできます。

ここではプラグインカテゴリ３を置く場合について書きます。<ul>～&lt/ul>の部分を、以下と差し替えます。

1. <!--plugin-->
2. 　        <!--plugin_third-->
3. 　　　　<h3  id="p-<%plugin_third_tag>"><%plugin_third_title></h3>
4. 　　　　　<!--plugin_third_description-->
5. 　　　　　　<p style="text-align:<%plugin_third_ialign>"><%plugin_third_description></p>
6. 　　　　　<!--/plugin_third_description-->
7. 　　　　　<%plugin_third_content>
8. 　　　　　<!--plugin_third_description2-->
9. 　　　　　　<p style="text-align:<%plugin_third_ialign>"><%plugin_third_description2></p>
10. 　　　　　<!--/plugin_third_description2-->
11.     　    <!--/plugin_third-->
12.         <!--/plugin-->

実際にはテンプレート上のプラグインカテゴリ３の部分（<--plugin_third-->～ <!--/plugin_third-->）を移動させると簡単です。ただ、その際に、「<--plugin_third-->～ <!--/plugin_third-->」を新たに「<--plugin-->～ <!--/plugin-->」で囲むことを忘れないでください。

注意（あらかじめ知っておきたいこと）

• <!--index_area-->～<!--/index_area-->で囲んだ部分は、トップページのみで表示されます。
• <!--not_index_area-->～<!--/not_index_area-->で囲んだ部分は、トップページ以外で表示されます。
• 上記タグは必ず対になります。どちらかが欠けると、ブログが真っ白になります。その際は、慌てずに、元のテンプレートに一旦戻して（復元できるように必ず「複製をしておきます」）、もう一度手順を踏みましょう。データ（ブログの記事）はなくなってはいませんから、落ち着いて作業を試みてください。
• この記事は公式テンプレートdefaultのソースを元に解説しています。別のテンプレートではHTMLが異なることもあります。その際は、FC2ブログテンプレート変数一覧を見て、変数を頼りに「どこに何が書かれているか」を理解しながら進めてください。