FC2ブログのプラグイン対応HTMLコード

ブログが作りたい!FC2ブログのプラグイン > FC2ブログのプラグイン対応HTMLコード

FC2ブログのプラグイン対応HTMLコード

FC2ブログのプラグイン対応HTMLコード

テンプレートを、プラグイン対応させるHTMLコード

まれに、使用中のテンプレートが、実はプラグインに対応していなかったということがあるやもしれません。

そこで今回は、FC2ブログのテンプレートを、プラグイン対応させるHTMLコードをご紹介いたします。

HTMLと、多少のFC2ブログ変数タグの知識があれば、とくに問題なくカスタマイズできるかと思います。


カスタマイズ作業の前に

1:スキルのご確認

プラグイン対応のカスタマイズには、プラグインとプラグインカテゴリの意味をよく理解しておく必要があります。あまりよく分かっていない人は、以下の記事をご覧ください。

また、「HTML」と、多少の「FC2ブログ変数タグ」の知識が必要です。よく分からない人は、以下の記事をご覧になってみてください。

2:テキストファイルでどうぞ

余計なスペースや改行が入らないように、プラグイン対応HTMLコードをテキストファイルで用意しました。

よろしかったら、ダウンロードしてお使いください。

HTMLコードを別画面で表示する »

zipファイルは、アップロードできないので、別画面でテキストファイルが表示されます。


FC2ブログのテンプレートを、プラグイン対応させる方法

それでは、本題です。

テンプレートを、プラグイン対応させるときは、自分のブログの構成に合わせて、コードを追加・変更・削除することになります。

すべての状況についてフォローできませんので、次の4通りのHTMLコードだけ、ご紹介します。あとは適宜ご自分の状況に応じて、修正してご利用ください。

ちなみに、HTMLコードに「プラグインの説明」を入れておくと、「環境設定」の「プラグインの設定」で編集できるようになります。

配置イメージは、次のようになります。(色が以下ようになるわけではありません)

プラグインの説明あり

プラグインの説明あり

プラグインの説明なし

プラグインの説明なし

「プラグインの説明」は、必ずしも説明を書かなければいけないものではなく、挨拶、補足、留意点などを書いても構いません。

 

1:CSSで行揃えしない、プラグインの説明は必要

次のコードは、以下のようなときに使用します。

  • タイトルなどの行揃え(左揃え、中央揃え、右揃え)を、「プラグインの設定」で行う。
  • どのようなプラグインであるかという説明を、「プラグインの設定」で上下に入れる。

プラグインカテゴリ(1)

<!--plugin-->

<!--plugin_first-->

<h2 align="<%plugin_first_talign>">

<%plugin_first_title>

</h2>

<p align="<%plugin_first_ialign>">

<%plugin_first_description>

</p>

<div align="<%plugin_first_align>">

<%plugin_first_content>

</div>

<p align="<%plugin_first_ialign>">

<%plugin_first_description2>

</p>

<!--/plugin_first-->

<!--/plugin-->

プラグインカテゴリ(2)

<!--plugin-->

<!--plugin_second-->

<h2 align="<%plugin_second_talign>">

<%plugin_second_title>

</h2>

<p align="<%plugin_second_ialign>">

<%plugin_second_description>

</p>

<div align="<%plugin_second_align>">

<%plugin_second_content>

</div>

<p align="<%plugin_second_ialign>">

<%plugin_second_description2>

</p>

<!--/plugin_second-->

<!--/plugin-->

プラグインカテゴリ(3)

<!--plugin-->

<!--plugin_third-->

<h2 align="<%plugin_third_talign>">

<%plugin_third_title>

</h2>

<p align="<%plugin_third_ialign>">

<%plugin_third_description>

</p>

<div align="<%plugin_third_align>">

<%plugin_third_content>

</div>

<p align="<%plugin_third_ialign>">

<%plugin_third_description2>

</p>

<!--/plugin_third-->

<!--/plugin-->

 

2:CSSで行揃えしない、プラグインの説明は不要

次のコードは、以下のようなときに使用します。

  • タイトルなどの行揃え(左揃え、中央揃え、右揃え)を、「プラグインの設定」で行う。
  • どのようなプラグインであるかという説明を、「プラグインの設定」で上下に入れない。

プラグインカテゴリ(1)

<!--plugin-->

<!--plugin_first-->

<h2 align="<%plugin_first_talign>">

<%plugin_first_title>

</h2>

<div align="<%plugin_first_align>">

<%plugin_first_content>

</div>

<!--/plugin_first-->

<!--/plugin-->

プラグインカテゴリ(2)

<!--plugin-->

<!--plugin_second-->

<h2 align="<%plugin_second_talign>">

<%plugin_second_title>

</h2>

<div align="<%plugin_second_align>">

<%plugin_second_content>

</div>

<!--/plugin_second-->

<!--/plugin-->

プラグインカテゴリ(3)

<!--plugin-->

<!--plugin_third-->

<h2 align="<%plugin_third_talign>">

<%plugin_third_title>

</h2>

<div align="<%plugin_third_align>">

<%plugin_third_content>

</div>

<!--/plugin_third-->

<!--/plugin-->

 

3:CSSで行揃えする、プラグインの説明は必要

次のコードは、以下のようなときに使用します。

  • タイトルなどの行揃え(左揃え、中央揃え、右揃え)を、CSSで行う。
  • どのようなプラグインであるかという説明を、「プラグインの設定」で上下に入れる。

プラグインカテゴリ(1)

<!--plugin-->

<!--plugin_first-->

<h2><%plugin_first_title></h2>

<p><%plugin_first_description></p>

<div><%plugin_first_content></div>

<p><%plugin_first_description2></p>

<!--/plugin_first-->

<!--/plugin-->

プラグインカテゴリ(2)

<!--plugin-->

<!--plugin_second-->

<h2><%plugin_second_title></h2>

<p><%plugin_second_description></p>

<div><%plugin_second_content></div>

<p><%plugin_second_description2></p>

<!--/plugin_second-->

<!--/plugin-->

プラグインカテゴリ(3)

<!--plugin-->

<!--plugin_third-->

<h2><%plugin_third_title></h2>

<p><%plugin_third_description></p>

<div><%plugin_third_content></div>

<p><%plugin_third_description2></p>

<!--/plugin_third-->

<!--/plugin-->

 

4:CSSで行揃えする、プラグインの説明は不要

次のコードは、以下のようなときに使用します。

  • タイトルなどの行揃え(左揃え、中央揃え、右揃え)を、CSSで行う。
  • どのようなプラグインであるかという説明を、「プラグインの設定」で上下に入ない。

プラグインカテゴリ(1)

<!--plugin-->

<!--plugin_first-->

<h2><%plugin_first_title></h2>

<div><%plugin_first_content></div>

<!--/plugin_first-->

<!--/plugin-->

プラグインカテゴリ(2)

<!--plugin-->

<!--plugin_second-->

<h2><%plugin_second_title></h2>

<div><%plugin_second_content></div>

<!--/plugin_second-->

<!--/plugin-->

プラグインカテゴリ(3)

<!--plugin-->

<!--plugin_third-->

<h2><%plugin_third_title></h2>

<div><%plugin_third_content></div>

<!--/plugin_third-->

<!--/plugin-->


プラグイン対応させるFC2ブログ変数タグの説明

HTMLの知識がある人でも、FC2ブログの変数については、「始めて見たよ!」という人もいらっしゃるかもしれません。ちょびっと、ご説明いたします。

とりあえず、「first」が分かれば、「second」も「third」も同じように分かるはずです。

それでは、「first」にしぼって、いったい何が書かれているのか?ひとつずつ見てみることにしましょう。

<!--plugin-->

<!--/plugin-->

プラグインを有効に設定している場合、このコードで囲まれている部分が表示されます。

<!--plugin_first-->

<!--/plugin_first-->

このコードで囲まれている部分に、プラグインカテゴリ1を表示します。

<h2>

</h2>

見出し2です。

<div>

</div>

このコードで囲むと、ブロック要素になります。

<%plugin_first_title>

プラグインのタイトルを表示します。タイトルは管理者ページの「プラグインの設定」で変更できます。

<%plugin_first_content>

プラグインの内容を表示します。「プラグインの設定」の「HTMLの編集」で設定しているものを表示します。

<%plugin_first_description>

プラグインについての説明を、上に表示するときに利用します。

<%plugin_first_description2>

プラグインについての説明を、下に表示するときに利用します。

文字だけだと、なかなかイメージし難いので、画像にしてみました。ちょっとコードを分けて考えると、イメージしやすくなります。

「<!--plugin-->」「<!--plugin_first-->」などのFC2ブログ変数タグは、プラグイン対応させるために必要な「魔法のことば」と考えて、あまり気にせず、とりあえず「囲めば良いのよね」程度の認識で構わないと思います。

実際に表示されるのは、内側のタイトルや内容です。また、プラグインの説明は、必ず上下両方をペアで書かなければいけないわけではありません。上だけでも、下だけでも構いません。

プラグイン対応HTMLコードとその役割

あとは、行揃えに関するHTMLコードだけです。align属性で設定しておけば、「プラグインの設定」の「設定の変更」で変更できるようになります。

<%plugin_first_talign>

プラグインのタイトルの行揃えに利用します。

<%plugin_first_ialign>

プラグインの説明の行揃えに利用します。

<%plugin_first_align>

プラグインの内容の行揃えに利用します。

変数は、時折FC2さんが更新しています。プラグインに関しては下の方に書かれているので、ページ内検索をかけた方が見つけ易いと思います。

前の記事へ
次の記事へ

次回予告

次回は、今回ご紹介したプラグイン対応させるHTMLコードを、実際にどのようにテンプレートへ差し込むのか、その手順について書きます。


関連記事

FC2ブログのプラグインに関する記事です。

作成日:2007/08/15 更新日:2009/09/19

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/31-396c224b
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて