2009年09月01日
特定のページのサイドバーだけに表示される項目の設置方法
ファンブログ カスタマイズ：サイドバー編 投稿日：2009年09月01日 00:30
今回は、特定のページのサイドバーだけに表示される項目の設置方法の説明をします。
通常は、「メイン」、「ポータル」、「アーカイブ」、「１記事」、「プロフィール」のどのページを見ても同じサイドバーが表示されます。
今回の方法は、ファンブログさんが用意してあります既存の項目ではできないのですが、自分で作成した項目でしたら挿入することが可能になります。現在私は自分でプロフィールの項目を作成し、TOPページでなく 利用規約 のページだけに表示するようにしてあります。よろしければ こちら を押して「このブログについて」のサイドバーを確認してみてください。
いかがでしたか？「このブログについて」のサイドバーだけに「PROFILE（犬）」が表示され、他のページでは表示されないのがご理解いただけたと思います。ただし、表示させたい項目は必ず1番上に表示されますので、ご了解ください。
方法をカンタンに説明しますと、表示させたい項目を普通に作成して、その内容をコピーして目的の HTML に貼るだけです。単純な作業なので、興味のある方はお試しくだいませ。
まずは、サイドバーに表示させたい項目を普通に作成してください。作成が終わりましたら「保存」を押して確認してください。確認が終わりましたら、作成した項目を「使用しない機能」に移動してもう一度「保存」を押して表示させないようにしてください。
表示させたい HTML に先程作成した項目の内容をコピーして貼り付けますので、作業をする前にそれぞれの HTML のバックアップをとっておいてくださいね。
▼ この説明は「シンプル系スキン」限定です。他のスキンの場合はタグの記述が異なります。 ▼
▼ それでは設置方法の説明です ▼
「メイン」のHTMLを開いたら、３カラムの方は <div id="sidebarLeft">、2カラムの方は <div id="sidebar"> という記述を探してください。１番下の方に記述されていますので、下からスクロールすればすぐ見つかります。
3カラムと2カラムでは、多少記述が違いますのでそれぞれの記述を載せておきます。
左サイドバーの上に表示させる場合は {$BlogSidebarLeft$} の上に、右サイドバーの上に表示させる場合は {$BlogSidebarRight$} の上に作成した項目の内容をコピーして、以下の場所に貼り付けてください。
タグが繋がらないように3〜4回改行して上下に空きを作ってから貼り付けてくださいね。
貼り付けましたら、「プレビュー(P)」で確認してください。コピーした項目が表示されていましたら成功です。「保存(S)」を押して終了です。
これで「メイン」のページのサイドバーだけに貼り付けた項目が表示されます。同様に表示させたいページがあるようなら、それぞれの HTML に貼り付けてください。
いかがでしたでしょうか？表示させる項目の長さはページ内に収まるくらいのものが記述も短くなりますので、メンテナンスも楽に行えます。画像CMバナーなんかで試すとページごとに違う広告を表示させることもできますので、面白いかもしれませんね。
この方法を検証しているときに、2カラム限定ですがちょっとしたことを発見したんで、次の記事で紹介させていただきますね。(´・ω・`)ｂ
※ Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
この情報が、お役にたちましたら
≫ FC2 Blog Ranking ≪ 押していただけると励みになります
方法をカンタンに説明しますと、表示させたい項目を普通に作成して、その内容をコピーして目的の HTML に貼るだけです。単純な作業なので、興味のある方はお試しくだいませ。
まずは、サイドバーに表示させたい項目を普通に作成してください。作成が終わりましたら「保存」を押して確認してください。確認が終わりましたら、作成した項目を「使用しない機能」に移動してもう一度「保存」を押して表示させないようにしてください。
表示させたい HTML に先程作成した項目の内容をコピーして貼り付けますので、作業をする前にそれぞれの HTML のバックアップをとっておいてくださいね。
「メイン」のHTMLを開いたら、３カラムの方は <div id="sidebarLeft">、2カラムの方は <div id="sidebar"> という記述を探してください。１番下の方に記述されていますので、下からスクロールすればすぐ見つかります。
3カラムと2カラムでは、多少記述が違いますのでそれぞれの記述を載せておきます。
左サイドバーの上に表示させる場合は {$BlogSidebarLeft$} の上に、右サイドバーの上に表示させる場合は {$BlogSidebarRight$} の上に作成した項目の内容をコピーして、以下の場所に貼り付けてください。
タグが繋がらないように3〜4回改行して上下に空きを作ってから貼り付けてくださいね。
▼ 3カラムの設置方法 ▼
|
<div id="sidebarLeft"> 左サイドバーの上に表示させる場合はココ！ {$BlogSidebarLeft$} </div><!-- /sidebar --> </div><!-- /wrapper --> <div id="sidebarRight"> 右サイドバーの上に表示させる場合はココ！ {$BlogSidebarRight$} </div><!-- /sidebarRight --> |
◄ ここから下に貼ってください。 ◄ ここから上に貼ってください。 ◄ ここから下に貼ってください。 ◄ ここから上に貼ってください。 |
▼ 2カラムの設置方法（左右共通） ▼
|
<div id="sidebar"> 左サイドバーの上に表示させる場合はココ！ {$BlogSidebarLeft$} 右サイドバーの上に表示させる場合はココ！ {$BlogSidebarRight$} </div><!-- /sidebar --> |
◄ ここから下に貼ってください。 ◄ ここから上に貼ってください。 ◄ ここから下に貼ってください。 ◄ ここから上に貼ってください。 |
貼り付けましたら、「プレビュー(P)」で確認してください。コピーした項目が表示されていましたら成功です。「保存(S)」を押して終了です。
これで「メイン」のページのサイドバーだけに貼り付けた項目が表示されます。同様に表示させたいページがあるようなら、それぞれの HTML に貼り付けてください。
いかがでしたでしょうか？表示させる項目の長さはページ内に収まるくらいのものが記述も短くなりますので、メンテナンスも楽に行えます。画像CMバナーなんかで試すとページごとに違う広告を表示させることもできますので、面白いかもしれませんね。
この方法を検証しているときに、2カラム限定ですがちょっとしたことを発見したんで、次の記事で紹介させていただきますね。(´・ω・`)ｂ
※ Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
【カスタマイズ：サイドバー編の最新記事】
アフィリエイトの始め方 (3)
この記事へのコメント