FC2ブログ

記事の上のフリースペース作成方法 Templ8@FC2blog

FC2ブログテンプレートの無料配布とカスタマイズでSEO対策(検索エンジン最適化)

ホーム > templ8カスタマイズ >記事の上のフリースペース作成方法

記事の上のフリースペース作成方法

いろんなブログを見ると記事の上にフリースペースみたいなのがあって、毎回更新する記事とは違う情報(注目記事だったりメニューだったりブログ紹介だったり...)を載せているブログがありますよね。

僕のカスタマイズしたテンプレートにはフリースペースを設けていないので、フリースペースがほしい!と言う方のために「記事の上のフリースペース作成方法」を紹介します。

いろいろやり方があると思うんですけど簡単なやり方を教えます。既存ののHTMLとCSSを借りて作ります。

<div class="plugin_outline">
<div class="plugin_title" style="text-align:left">ここにタイトルを入れる</div>
<div class="plugin_body" style="text-align:left">
ここに本文を入れる
</div><!--/plugin_body -->
</div><!--/plugin_outline-->

上記のソースをコピーして、HTMLの記事(topentry)部分の上のパンくずリストの上にペーストしましょう。赤字になっているところは自分のお好みで変えてください。HTMLは改行しても反映されないので、改行をしたいときは<br />と書きましょう。

これでフリースペースをつくれると思います。フリースペース内の変更をしたい場合はまたHTMLを開いて変更しましょう。

上記の場合、ブログのどのページを開いてもフリースペースが出てきてしまいます。「トップページだけ表示したい」という方もいると思いますのでその方法も紹介します。

まずフリースペースの作成方法は上記とまったく一緒です。フリースペースを作ったら、上記のソースを<!--index_area-->と<!--/index_area-->で挟みましょう。上記のソースの前に<!--index_area-->を、後ろに<!--/index_area-->をいれるのです。そうすることによってインデックスページ(トップページ)のみの表示になります。

あと「フリースペースを頻繁に変更したいけどスタイルシートをいじるのは面倒」、「間違えてHTMLをいじってテンプレートデザインがくずれるのが怖い」と言う方のためにもうひとつフリースペースの作成方法を紹介します。

上記の方法はプラグインのHTML、CSSを借りて作っていますが、今回はそのままプラグインを使っちゃいます。プラグインには1~3まであるのはご存知ですか?3カラム、2カラムのテンプレートを使っている方が多いと思いますが、例えば3カラムだと中央が記事で左がプラグイン1、右がプラグイン2だと、プラグイン3が余りますよね?こういう場合大抵は右カラムにプラグイン2とプラグイン3を入っていると思います。

HTMLにプラグインがどのように表記してあるか説明しますと、例えば3カラムだと

左カラム
<!--plugin-->
<!--plugin_first--> ~プラグイン1~ <!--/plugin_first-->
<!--/plugin-->

右カラム
<!--plugin-->
<!--plugin_second--> ~プラグイン2~ <!--/plugin_second-->
<!--plugin_third--> ~プラグイン3~ <!--/plugin_third-->
<!--/plugin-->

上記のようになっていると思います。上記の赤字部分を抜き出して

<!--plugin-->
<!--plugin_third--> ~プラグイン3~ <!--/plugin_third-->
<!--/plugin-->

上記のように<!--plugin-->と<!--/plugin-->で挟んでHTMLの記事(topentry)部分の上のパンくずリストの上にペーストしましょう。これで準備は完成です。あとは「プラグイン設定」のページで「公式プラグイン追加」を選び「フリーエリア」を選び、プラグイン3に設定するだけです。このフリーエリア内に記載したものが記事の上に表記されるようになります。

他のプラグインの使い方と同じで、プラグインがいらなくなれば削除するだけでいいのでHTMLをいじる必要はありません。また「表示する」のチェックを外しておけば作りかけで置いておくことも可能です。「フリーエリア」でなくても「最新記事」などを選べば記事の上部にそのプラグインを表示することも可能です。もしトップページだけに表示したいのならHTMLのプラグイン3の部分を<!--index_area-->と<!--/index_area-->で挟めばトップページのみの表示になります。

いかがだったでしょうか?もしうまくいかなかったりよくわからないことがあったら何でも聞いてくださいね。

2008/11/20 16:28 templ8カスタマイズ
メールフォーム
僕のカスタマイズしたテンプレート、その他テンプレートについて、何か解からないことがあれば何でも聞いてください。具体的に書いて頂けるとありがたいです。

名前:

メール:

件名:

本文: