2009年09月01日
2カラムのサイドバーを上下のグループに分けて表示させる方法
3カラムのサイドバーは両袖にありますので配列もいろいろ変えれるんですが、私と同じ2カラムの方はサイドバーの配列には苦労しているんじゃないでしょうか？
今回の方法は2カラムの方限定で、１つしかないカラムを上下のグループに分けて、ページごとに上下を逆転させる方法なんですが、たいした内容ではありませんので期待しないでお読みくださいませ。(^ω^;)）
2カラムの方はサイドバーの「表示項目の選択/並び替え」画面で項目をどのように配置していますか？ほとんどの方が、左カラムの方は左側に、右カラムの方は右側に全部の項目を配置しているんじゃないでしょうか。
私も以前はそう配置していたんですが、実は2カラムの場合は左側が最初に表示され、右側がその下に配置されることになるんです。3カラムの場合は左右に分ければ左右に配置されますが、2カラムの場合はサイドバーはひとつしかないので、上下に分かれることになるんです。
試しに「コンテンツ設定」を押して、「表示項目の選択/並び替え」画面を開いて、左右どちらかに配置してあります項目を空いている側に移して確認してみてください。この上下の優先順位は左右どちらのカラムの方でも必ず左側が上になります。
上下に表示される仕組みがわかっていただけたと思いますので、ページごとにこの上下を逆転させる方法を説明します。たとえば、TOPページでは広告を上に表示したいけど、記事を読んでもらったときはカテゴリを上に表示させたい場合なんかは、上（左側）のグループは広告中心で、下（右側）のグループはカテゴリやプロフィールというように分けておいて、ページごとに上下を逆転させればいいことになります。
上下逆転させたい HTML の記述を少しだけ書き換えますので、作業をする前にそれぞれの HTML のバックアップをとっておいてくださいね。
▼ この説明は「シンプル系スキン」限定です。他のスキンの場合はタグの記述が異なります。 ▼
▼ それでは記述方法の説明です ▼
目的のHTMLを開いたら、 <div id="sidebar"> という記述を探してください。１番下の方に記述されていますので、下からスクロールすればすぐ見つかります。
この下に記述されています {$BlogSidebarLeft$} と {$BlogSidebarRight$} の上下を逆にしてください。
そうしますと、この HTML を見に行く場合だけ、本来下に表示される右側に配置した項目のグループを先に読みにいくことになります。
記述の変更が終わりましたら、「プレビュー(P)」で確認してください。サイドバーの表示が上下逆転していれば成功です。「保存(S)」を押して終了してください。
同様に表示させたいページがあるようなら、それぞれの HTML を同じ記述に変更してください。
いかがでしたでしょうか？多少ではございますが、2カラムの方でもサイドバーに変化をもたせることができます。前記事の「特定のページのサイドバーだけに表示される項目の設置方法」と合わせて使いますとバリエーションが広がりますので、いろいろ考えてグループ分けしてみてくださいね。(´・ω・`)ｂ
※ Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
この情報が、お役にたちましたら ≫ FC2 Blog Ranking ≪
押していただけると励みになります
私も以前はそう配置していたんですが、実は2カラムの場合は左側が最初に表示され、右側がその下に配置されることになるんです。3カラムの場合は左右に分ければ左右に配置されますが、2カラムの場合はサイドバーはひとつしかないので、上下に分かれることになるんです。
試しに「コンテンツ設定」を押して、「表示項目の選択/並び替え」画面を開いて、左右どちらかに配置してあります項目を空いている側に移して確認してみてください。この上下の優先順位は左右どちらのカラムの方でも必ず左側が上になります。
上下に表示される仕組みがわかっていただけたと思いますので、ページごとにこの上下を逆転させる方法を説明します。たとえば、TOPページでは広告を上に表示したいけど、記事を読んでもらったときはカテゴリを上に表示させたい場合なんかは、上（左側）のグループは広告中心で、下（右側）のグループはカテゴリやプロフィールというように分けておいて、ページごとに上下を逆転させればいいことになります。
上下逆転させたい HTML の記述を少しだけ書き換えますので、作業をする前にそれぞれの HTML のバックアップをとっておいてくださいね。
目的のHTMLを開いたら、 <div id="sidebar"> という記述を探してください。１番下の方に記述されていますので、下からスクロールすればすぐ見つかります。
この下に記述されています {$BlogSidebarLeft$} と {$BlogSidebarRight$} の上下を逆にしてください。
そうしますと、この HTML を見に行く場合だけ、本来下に表示される右側に配置した項目のグループを先に読みにいくことになります。
| <div id="sidebar"> {$BlogSidebarLeft$} {$BlogSidebarRight$} </div><!-- /sidebar --> |
記述を逆にする ? 記述を逆にする ? |
<div id="sidebar"> {$BlogSidebarRight$} {$BlogSidebarLeft$} </div><!-- /sidebar --> |
記述の変更が終わりましたら、「プレビュー(P)」で確認してください。サイドバーの表示が上下逆転していれば成功です。「保存(S)」を押して終了してください。
同様に表示させたいページがあるようなら、それぞれの HTML を同じ記述に変更してください。
いかがでしたでしょうか？多少ではございますが、2カラムの方でもサイドバーに変化をもたせることができます。前記事の「特定のページのサイドバーだけに表示される項目の設置方法」と合わせて使いますとバリエーションが広がりますので、いろいろ考えてグループ分けしてみてくださいね。(´・ω・`)ｂ
※ Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
【カスタマイズ：サイドバー編の最新記事】
この記事へのコメント