上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 FC2テンプレートを実際に作ってみる企画です。
 はじめから読むには、以下からどうぞ。
FC2テンプレートを1から作ってみる

 今回はサイドバーの作成です。
 もちろん、そのまま直接テンプレにブログパーツやメニューを入れ込んでも良いのですが、FC2ブログには「プラグイン」という便利で汎用性の高いツールが用意されています。
 せっかくなので、それを入れていきましょう。



プラグインの仕組み


 プラグイン、特に「ブログパーツ」などをブログに入れるときに使ったことがあると思います。
 管理画面の「プラグインの設定」で「フリーエリア」というプラグインを追加した経験をお持ちでしょうか?

 ここにブログパーツのタグを貼り付けてセーブすると、サイドバーにブログパーツが増えますよね。同様に「新着記事」「カレンダー」「最新コメント」等々、これらを追加したり削除すれば簡単にサイドバーの内容を変えることが出来ます。
 この「プラグイン機能」に対応したテンプレートを作成します。




プラグインの編集と対応する「変数」


 まずは、どこに入力した情報がどういった「変数(独自タグ)」で出力されるのか理解する必要があります。
 例えば、以下の図を見てみると、プラグインの設定画面では、様々な情報入力が出来ます。これらすべての情報を「変数」で出力できるようになります。

プラグインの編集

タイトル (40文字以内)<%plugin_first_title>
<%plugin_second_title>
<%plugin_third_title>
プラグイン説明(上部)<%plugin_first_description>
<%plugin_second_description>
<%plugin_third_description>
プラグイン説明(下部)<%plugin_first_description2>
<%plugin_second_description2>
<%plugin_third_description2>
タイトル文の文字設定<%plugin_first_talign>
<%plugin_second_talign>
<%plugin_third_talign>
コンテンツの文字設定<%plugin_first_align>
<%plugin_second_align>
<%plugin_third_align>
説明文の文字位置<%plugin_first_ialign>
<%plugin_second_ialign>
<%plugin_third_ialign>
プラグインカテゴリそれぞれのタグに含まれる「first」「second」「third」が、
「プラグイン1」「プラグイン2」「プラグイン3」に対応している。
プラグインの改造(内容)<%plugin_first_content>
<%plugin_second_content>
<%plugin_third_content>

 詳細はこちらに公開されています。
プラグイン関連の変数




プラグインを出力するために必要な決まり事


 実は、この対応したタグをHTMLに放り込むだけでは、プラグインは上手く表示されません。
 「ここから先はプラグインです」「ここまでがプラグインです」という「ブロック変数」を示してやる必要があります。

プラグイン表示ブロック<!--plugin-->

<!--/plugin-->
<!--plugin_first--> ~ <!--/plugin_first-->
・プラグインカテゴリ1を表示

<!--plugin_second--> ~ <!--/plugin_second-->
・プラグインカテゴリ2を表示

<!--plugin_third--> ~ <!--/plugin_third-->
・プラグインカテゴリ3を表示


 実際の書き方としては、以下のような入れ子になります。

<!--plugin-->
<!--plugin_first-->プラグイン1の中身<!--/plugin_first-->
<!--/plugin-->

<!--plugin-->
<!--plugin_second-->プラグイン2の中身<!--/plugin_second-->
<!--/plugin-->

<!--plugin-->
<!--plugin_third-->プラグイン3の中身<!--/plugin_third-->
<!--/plugin-->




ブロック変数と情報出力変数を組み立てる


 以上の2種類、最初に示した「セーブした内容を出力する変数」と「表示する範囲を示すためのブロック変数」を組み立てて、プラグインの内容が表示されるように組み立ててみましょう。

<!--プラグイン1-->
<!--plugin-->
<!--plugin_first-->
<%plugin_first_title>
<%plugin_first_description>
<%plugin_first_content>
<%plugin_first_description2>

<!--/plugin_first-->
<!--/plugin-->
<!--プラグイン1ここまで-->

<!--プラグイン2-->
<!--plugin-->
<!--plugin_second-->
<%plugin_second_title>
<%plugin_second_description>
<%plugin_second_content>
<%plugin_second_description2>

<!--/plugin_second-->
<!--/plugin-->
<!--プラグイン2ここまで-->

<!--プラグイン3-->
<!--plugin-->
<!--plugin_third-->
<%plugin_third_title>
<%plugin_third_description>
<%plugin_third_content>
<%plugin_third_description2>

<!--/plugin_third-->
<!--/plugin-->
<!--プラグイン3ここまで-->




プラグインアイテムのブロックコーティング


 次に、それぞれのアイテムに「スタイルシート」でデザインできるよう、ブロックでコーティングして、クラスをそれぞれ当てていきます。
 プラグインを1、2、3、それぞれ別のデザインにする場合は、それぞれ別のクラスを、同じ表示にするなら、「タイトルのクラスはタイトルのクラスで纏め」「コンテンツのクラスはコンテンツのクラスで纏め」というように、それぞれの種類ごとにクラスを当てていきます。

 今回は、全部を統一されたデザインで表示されるように、タイトルはタイトル、コンテンツはコンテンツで同じクラスを当てていきます。

<!--プラグイン1-->
<!--plugin-->
<!--plugin_first-->
<div class="plugin_title"><%plugin_first_title></div>
<div class="plugin_desc"><%plugin_first_description></div>
<div class="plugin_contents"><%plugin_first_content></div>
<div class="plugin_desc"><%plugin_first_description2></div>
<!--/plugin_first-->
<!--/plugin-->
<!--プラグイン1ここまで-->

<!--プラグイン2-->
<!--plugin-->
<!--plugin_second-->
<div class="plugin_title"><%plugin_second_title></div>
<div class="plugin_desc"><%plugin_second_description></div>
<div class="plugin_contents"><%plugin_second_content></div>
<div class="plugin_desc"><%plugin_second_description2></div>
<!--/plugin_second-->
<!--/plugin-->
<!--プラグイン2ここまで-->

<!--プラグイン3-->
<!--plugin-->
<!--plugin_third-->
<div class="plugin_title"><%plugin_third_title></div>
<div class="plugin_desc"><%plugin_third_description></div>
<div class="plugin_contents"><%plugin_third_content></div>
<div class="plugin_desc"><%plugin_third_description2></div>
<!--/plugin_third-->
<!--/plugin-->
<!--プラグイン3ここまで-->

 こんな感じでしょうか。



プラグインの中身の文字寄せ


 次に、初心者向けに作られた、プラグインの中身を左寄せにするか、右寄せにするかを設定出来る機能にも対応させておきます。
 冒頭の表にある「文字設定」「文字位置」というものです。「<%plugin_first_talign>」こう言うヤツですね。
 この変数は単純に「left」とか「right」「center」等と出力されるので、スタイル(style="")の中に変数を入れ込む必要があります。

<!--プラグイン1-->
<!--plugin-->
<!--plugin_first-->
<div class="plugin_title" style="text-align:<%plugin_first_talign>"><%plugin_first_title></div>
<div class="plugin_desc" style="text-align:<%plugin_first_ialign>"><%plugin_first_description></div>
<div class="plugin_contents" style="text-align:<%plugin_first_align>"><%plugin_first_content></div>
<div class="plugin_desc" style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></div>
<!--/plugin_first-->
<!--/plugin-->
<!--プラグイン1ここまで-->

<!--プラグイン2-->
<!--plugin-->
<!--plugin_second-->
<div class="plugin_title" style="text-align:<%plugin_second_talign>"><%plugin_second_title></div>
<div class="plugin_desc" style="text-align:<%plugin_second_ialign>"><%plugin_second_description></div>
<div class="plugin_contents" style="text-align:<%plugin_second_align>"><%plugin_second_content></div>
<div class="plugin_desc" style="text-align:<%plugin_second_ialign>"><%plugin_second_description2></div>
<!--/plugin_second-->
<!--/plugin-->
<!--プラグイン2ここまで-->

<!--プラグイン3-->
<!--plugin-->
<!--plugin_third-->
<div class="plugin_title" style="text-align:<%plugin_third_talign>"><%plugin_third_title></div>
<div class="plugin_desc" style="text-align:<%plugin_third_ialign>"><%plugin_third_description></div>
<div class="plugin_contents" style="text-align:<%plugin_third_align>"><%plugin_third_content></div>
<div class="plugin_desc" style="text-align:<%plugin_third_ialign>"><%plugin_third_description2></div>
<!--/plugin_third-->
<!--/plugin-->
<!--プラグイン3ここまで-->




特殊なブロック変数


 さらにここで特殊なブロック変数を入れていきます。
「もしも、プラグイン説明(上部或いは下部)に何も情報が入力されていなかったら?」
 という、中身があるか無いか判断するタグです。

 ある場合はこのブロックを表示、無い場合はこのブロックを非表示、という感じで表示の内容を切り替えることが出来ます。

▼プラグイン説明の入力有無を判定して、表示/非表示を振り分けるフラグ
<!--plugin_first_description--> ~ <!--/plugin_first_description-->
<!--plugin_first_description2--> ~ <!--/plugin_first_description2-->
<!--plugin_second_description--> ~ <!--/plugin_second_description-->
<!--plugin_second_description2--> ~ <!--/plugin_second_description2-->
<!--plugin_third_description--> ~ <!--/plugin_third_description-->
<!--plugin_third_description2--> ~ <!--/plugin_third_description2-->

・カテゴリ1~3内の各プラグインで、説明(description,description2)が入力されている場合に表示されるブロック


 これも対応させていきましょう。
 各「プラグイン説明」を囲めば、それらの中身のあるなしを判断して、表示非表示を切り替えてくれます。

<!--プラグイン1-->
<!--plugin-->
<!--plugin_first-->
<div class="plugin_title" style="text-align:<%plugin_first_talign>"><%plugin_first_title></div>
<!--plugin_first_description-->
<div class="plugin_desc" style="text-align:<%plugin_first_ialign>"><%plugin_first_description></div>
<!--/plugin_first_description-->
<div class="plugin_contents" style="text-align:<%plugin_first_align>"><%plugin_first_content></div>
<!--plugin_first_description2-->
<div class="plugin_desc" style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></div>
<!--/plugin_first_description2-->
<!--/plugin_first-->
<!--/plugin-->
<!--プラグイン1ここまで-->

<!--プラグイン2-->
<!--plugin-->
<!--plugin_second-->
<div class="plugin_title" style="text-align:<%plugin_second_talign>"><%plugin_second_title></div>
<!--plugin_second_description-->
<div class="plugin_desc" style="text-align:<%plugin_second_ialign>"><%plugin_second_description></div>
<!--/plugin_second_description-->
<div class="plugin_contents" style="text-align:<%plugin_second_align>"><%plugin_second_content></div>
<!--plugin_second_description2-->
<div class="plugin_desc" style="text-align:<%plugin_second_ialign>"><%plugin_second_description2></div>
<!--/plugin_second_description2-->
<!--/plugin_second-->
<!--/plugin-->
<!--プラグイン2ここまで-->

<!--プラグイン3-->
<!--plugin-->
<!--plugin_third-->
<div class="plugin_title" style="text-align:<%plugin_third_talign>"><%plugin_third_title></div>
<!--plugin_third_description-->
<div class="plugin_desc" style="text-align:<%plugin_third_ialign>"><%plugin_third_description></div>
<!--/plugin_third_description-->
<div class="plugin_contents" style="text-align:<%plugin_third_align>"><%plugin_third_content></div>
<!--plugin_third_description2-->
<div class="plugin_desc" style="text-align:<%plugin_third_ialign>"><%plugin_third_description2></div>
<!--/plugin_third_description2-->
<!--/plugin_third-->
<!--/plugin-->
<!--プラグイン3ここまで-->

 こんな感じで、プラグイン機能に完全対応させていきます。
 これを、今まで作成したHTMLのサイドバーに放り込みます。




■次は、いよいよ「メインカラム」の組み立てに入っていきます。
記事表示部分を組み立てる
このエントリーをはてなブックマークに追加
Tue.01.04.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。