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

フロント記事2

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

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

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

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

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

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

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

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

実現方法の検討

フロント記事2

フロント記事を配置

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

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

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

①記事日付を細工する

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

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

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

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

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

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

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

カスタマイズ手順

1.テンプレートの変更

[プラグインエリア3]をメイン部の上部に配置します。 下記のようにテンプレートのプラグイン3を1や2と独立して記述し、これを上部(<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.フリーエリアの表示内容を作成

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

その他のカスタマイズ

カテゴリー表示時の記事一覧を追加

カテゴリー別表示にしたとき、一番上にカテゴリー内の記事のリストを表示します。 これは下記を使わせてもらいました。

カテゴリの記事一覧を表示させる(FC2のみ)

全記事一覧を追加

FC2公式プラグインの[全記事一覧表示へのリンク]をそのまま利用してサイドメニューに追加しました。

体裁を整える

スタイルシートで該当の記述部分を探し、画像や色を変えます。全体に明るく落ち着いた色調にしました。

  • ブログタイトルの背景画像、サブタイトルの文字色
  • 本体の背景色
    白はまぶしいのでクリーム色にしました
  • 記事タイトルの背景画像
    木目調にしました
  • サイドバーのメニューの余白、色
    余分な余白は小さくし、色調を本体に合わせました。

今回の変更内容は以上です。


関連記事

[WordPress]トップページにフロント記事と新着一覧を表示する方法
FC2ブログで「トップページにフロント記事欄を追加」を中心にしたサイトリニューアルを紹介します。

スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る