[FC2ブログ]トップページにフロント記事欄を追加

「トップページにフロント記事欄を追加」を中心にしたサイトリニューアルを紹介します。

昨年公式テンプレート「business-u1」でブログを始めましたが、そろそろもう少しかっこ良く、自分のスタイルにしたくなってきました。今回少し勉強してブログ改造に挑戦し、リニューアルすることができました。忘れないうちにまとめておきます。

目指すスタイルと元になるテンプレートの選択
フロント記事欄をトップページに設ける
- - 実現方法の検討
  - カスタマイズ手順
その他のカスタマイズ

目指すスタイルと元になるテンプレートの選択

私の希望のスタイルは日記というよりホームページに近いもので、トップページにサイト紹介や近況、記事更新履歴などを表示し、明るく落ち着いた雰囲気にすることでした。

ブログ開始当初から使ってきたテンプレートは、FC2公式テンプレートの「business-u1」です。公式テンプレートは数が少なく、なかなか気に入ったものがありません。一方共有テンプレートは実にたくさんあり、希望に近いスタイルのものもありましたが、プラグイン非対応でした。豊富なFC2の公式プラグインを利用できるようにしておくべきだと考えました。

改造してプラグイン対応にすることもできるはずですが、どうせ改造するなら現状使用のテンプレートを勉強しながらこつこつ改造していくことにしました。
公式テンプレートは公式プラグインに対応している他、各種ブラウザ対応も考えられており、基本にするには良いでしょう。

以下、FC2公式テンプレートの「ビジネス」からの改造内容です。

フロント記事欄をトップページに設ける

実現方法の検討

フロント記事を配置

通常のブログで最新の記事が表示されるトップページ（FC2ではインデックスページと呼んでいる）に、サイト紹介や近況、記事更新履歴などを表示するフロント記事欄を設けます.

図示すると右のような配置です。

ＦＣ２ブログにおける実現手段として3つの方法を見つけました。

①記事日付を細工する

フロント記事にしたい記事の日付が常に一番新しくなるように遠い将来の日付にしておく方法です。

一番手軽に実現できますが、表示は一般ページと同じ形式になり、日付などが表示されてしまうのがいまいちです。

②テンプレートに埋め込む

トップに表示したい記述をテンプレートに埋め込みます。
そしてその部分をトップページだけに表示するされるようにindexタグで指定します。
逆にインデックスページ以外にだけ表示するタグも利用できます。
ただ、私の場合、近況、記事更新履歴などは内容の変更が多くなりそうですが、その度にテンプレートをいじるのはたいそうです。

③フリーエリアのプラグインを使う

フリーエリアのプラグインをメイン部の上部に配置し、インデックスページだけに表示するようする方法です。
こうすることにより、内容を変更したい時はテンプレートをさわらず[プラグイン]の[詳細]で変更できます。

私は③の方法を採用しました。以下やり方です。

カスタマイズ手順

1.テンプレートの変更

[プラグインエリア３]をメイン部の上部に配置します。下記のようにテンプレートのプラグイン３を１や２と独立して記述し、これを上部（<body>の少し後ぐらい）に移動します。

 <!--index_area-->
<!--plugin-->
<div class="content">
<!--plugin_third-->
<h3 class="plg3_header" style="text-align:<%plugin_third_talign>"><%plugin_third_title></h3>
<div class="plg3_body">
<!--plugin_third_description--><div class="plg_header" style="text-align:<%plugin_third_ialign>"><%plugin_third_description></div><!--/plugin_third_description-->
<div class="plg_body" style="text-align:<%plugin_third_align>"><%plugin_third_content></div>
<!--plugin_third_description2--><div class="plg_footer" style="text-align:<%plugin_third_ialign>"><%plugin_third_description2></div><!--/plugin_third_description2-->
</div>
<!--/plugin_third-->
<div class="pagetop"><a href="#header" title="<%template_go_top>"><%template_go_top></a></div>
</div><!--/content-->
<!--/plugin-->
<!--/index_area-->

2.フリーエリアの追加

[プラグインの設定]-[PC用公式プラグイン]で[拡張プラグイン]の[フリーアリア]を[追加]します.

3.フリーエリアの表示内容を作成

追加した「フリーエリア」の[詳細]をクリックし「フリーエリア」となっているタイトルを希望のものに変更し、表示する内容を記述します。下はタイトル変更後です。　プラグインの[詳細]での編集時にはリアルタイムプレビューがないので少々やりづらいのですが、一旦下書きの記事ページで作成し、完成してからコピペするようにしています。また記事ページならWindows Live! Writerなどのブログエディターを使って簡単に変更できます。