プラグイン対応HTMLコード
HTMLコードのお話の前に
前記事（「プラグインカテゴリー」）でも書きましたが、FC2テンプレートには、プラグインを配置する領域が、3つあります。
では、その3つの領域に、いったい何を、どうすれば良いのでしょうか？
今回は、テンプレートを、プラグイン対応させるためのHTMLコードについて書いていきます。具体的に、何が必要になるのかが分かります。
ちょっとその前に、以下について、ご確認ください。また、HTMLコードをテキストファイルで用意しておきました。ご利用ください。
1：ご確認ください
プラグインについては、もうイメージできるようになりましたか？プラグイン対応HTMLコードを見る前に知っておくと、話がスムーズに進みます。
（1）質問1：プラグインは、ご存知ですか？
「プラグイン」という言葉の意味が、よく分からないという人は、「FC2プラグインとは？」を、ご覧いただいてからの方がよろしいかと思います。
「FC2プラグインとは？」 »
（2）質問2：プラグインカテゴリーは、ご存知ですか？
「プラグインカテゴリー」について、よく分からない人は、前記事（「プラグインカテゴリー」）を、ご覧いただいてからの方がよろしいかと思います。
「プラグインカテゴリー」 »
この記事は、基本的なHTMLの知識がないと、厳しいかもしれません。Smartyの知識があるような人であれば、楽に理解できます。
2：テキストファイルをどうぞ
余計なスペースや改行が入らないように、プラグイン対応HTMLコードをテキストファイルで用意しました。よろしかったら、ダウンロードしてお使いください。
zipファイルは、アップロードできないので、別画面でテキストファイルが表示されます。
プラグイン対応のHTMLコード
それでは、本題です。
テンプレートを、プラグイン対応させるときは、自分のブログの構成に合わせて、コードを追加・変更・削除することになります。
すべての状況についてフォローできませんので、次の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-->
HTMLタグと変数の説明
HTMLの知識がある人でも、変数については、「始めて見たよ」という人もいらっしゃるかもしれません。良い機会なので、覚えてみてはいかがでしょうか。
とりあえず、「first」が分かれば、「second」も「third」も同じように分かるはずです。
それでは、「first」にしぼって、いったい何が書かれているのか？ひとつずつ見てみることにしましょう。
|
<!--plugin--> |
プラグインを有効に設定している場合、このコードで囲まれている部分が表示されます。 |
|---|---|
<!--plugin_first--> |
このコードで囲まれている部分に、プラグインカテゴリー1を表示します。 |
<h2> |
見出し2です。 |
<div> |
このコードで囲むと、ブロック要素になります。 |
<%plugin_first_title> |
プラグインのタイトルを表示します。タイトルは管理者ページの「プラグインの設定」で変更できます。 |
<%plugin_first_content> |
プラグインの内容を表示します。「プラグインの設定」の「HTMLの編集」で設定しているものを表示します。 |
<%plugin_first_description> |
プラグインについての説明を、上に表示するときに利用します。 |
<%plugin_first_description2> |
プラグインについての説明を、下に表示するときに利用します。 |
文字だけだと、なかなかイメージし難いので、画像にしてみました。ちょっとコードを分けて考えると、イメージしやすくなります。
「<!--plugin-->」「<!--plugin_first-->」などは、プラグイン対応させるために必要な「魔法のことば」と考えて、あまり気にせず、とりあえず「囲めば良いのよね」程度の認識で構わないと思います。
実際に表示されるのは、内側のタイトルや内容です。また、プラグインの説明は、必ず上下両方をペアで書かなければいけないわけではありません。上だけでも、下だけでも構いません。
あとは、行揃えに関するHTMLコードだけです。align属性で設定しておけば、「プラグインの設定」の「設定の変更」で変更できるようになります。
|
<%plugin_first_talign> |
プラグインのタイトルの行揃えに利用します。 |
|---|---|
|
<%plugin_first_ialign> |
プラグインの説明の行揃えに利用します。 |
|
<%plugin_first_align> |
プラグインの内容の行揃えに利用します。 |
変数は、時折FC2さんが更新しています。プラグインに関しては下の方に書かれているので、ページ内検索をかけた方が見つけ易いと思います。
次回予告
次回は、今回ご紹介したプラグイン対応させるHTMLコードを、実際にどのようにテンプレートへ差し込むのか、その手順について書きます。
作成日：2007/08/15 更新日：2007/08/17
« 「プラグインカテゴリー」｜「プラグイン対応の方法」 »
コメントありがとうございます。
コメントの投稿
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/31-396c224b
