[ライブドアブログ]サイドバーをトップページと個別記事ページで変更する方法

こんにちは。ユージーン(@Eugene_no2)です！

ライドドアブログでは、サイドバーの内容をページによって出し分けることは出来ない、と思っている方が多いと思います。

でも実は、トップページ、個別記事ページ、カテゴリーアーカイブページといった単位では、サイドバーの内容を変更することが出来るんです。

今回は、そのやり方をご紹介します。

トップページへ

[ライブドアブログ]デザインのカスタマイズ方法まとめ（初心者向け） : No.2宣言 ライブドアブログ初心者向けに、ブログのデザインをカスタマイズするための、知識と方法をまとめています。

サイドバーの内容を出し分ける方法

例えば、トップページと個別記事ページで、広告を配置する場所を変えたいとか、トップページだけに入れたいコンテンツがある、といった場合には、サイドバーの出し分けが有効です。

なお、今回紹介するやり方は、サイドバーが１カラム（１列）のデザインである必要があります。

例えば、サイドバー両サイドにあるようなデザインでは、適用できませんので、ご注意ください。

サイドバーには、エリアAとBがある

ライブドアブログのサイドバーには、エリアAとエリアBがあります。

[ブログ設定] → デザイン / ブログパーツ設定の[PC] → [ブログパーツ] を開くと次のような画面になります。

エリアAとエリアBに、それぞれパーツを追加していくわけです。

でも思ったことありませんか？

サイドバーが１カラム（列）しか無かったら、エリアAもエリアBも一緒じゃないか？って。

そう、まさにその通り！

でも、このエリアAとエリアBがあることで、サイドバーの出し分けが可能になるんです。

エリアAとBで２パターンのサイドバーを作ろう

さて、ここからは、具体的なカスタマイズ方法の説明です。

まず、エリアAとエリアBに、それぞれで完結するサイドバーのパターンを作ります。

どっちでもいいんですが、ここでは、例えば次のようにします。

• エリアA：　トップページ＆カテゴリーページのサイドバー
• エリアB：　個別記事ページのサイドバー

ポイントは、エリアA、エリアBで、それぞれ完結させること。

つまり、例えばプロフィールは、トップページにも個別記事ページにも、どっちにも入れたいのであれば、エリアAにもBにも、どっちにも入れるということです。

ただし、ご想像の通り、このままでは、プロフィールがサイドバーに２回出てくる、いびつなサイトデザインになってしまいます。

そこで、次のステップです。

HTMLでエリアA、エリアBの表示を出し分ける

続いては、HTMLを編集します。

まず、[ブログ設定] → デザイン / ブログパーツ設定の[PC] → [カスタマイズ] を開きます。

続いて、「CSS」タブが表示されているのを、「トップページ」に切り替えます。

すると、そこに書かれているHTML文書の中に、次のような記述があるはずです。

<!– サイドバー –>

<aside id=”sidebar” class=”column”>

<div id=”sidebar-inner”>

<$PluginList_A$>

<$PluginList_B$>

</div>

<$LDServices$>

</aside>

<!– /サイドバー –>

ここに書かれている、<$PluginList_A$>、<$PluginList_B$> というのが、先ほど設定したエリアAのブログパーツ、エリアBのブログパーツを指しています。

つまり、この記述から、<$PluginList_B$>　という部分を削除してしまえば、トップページのサイドバーには、エリアAしか表示されなるんです。

同じように、個別記事ページのサイトバーには、エリアBだけを表示させたいのであれば、タブを「個別記事ページ」に切り替え、今度は<$PluginList_A$>を削除すればいいのです。

「カテゴリーアーカイブ」「月別アーカイブ」も、忘れずに、<$PluginList_A$>、<$PluginList_B$> のどちらかのみにしておきましょう。

まとめ

さて今回は、ライブドアブログでサイドバーをページによって出し分ける方法を解説しました。

ライブドアブログのデザインについて、カスタマイズ方法もまとめていますので、合わせて参考にしてください。

トップページへ

[ライブドアブログ]デザインのカスタマイズ方法まとめ（初心者向け） : No.2宣言 ライブドアブログ初心者向けに、ブログのデザインをカスタマイズするための、知識と方法をまとめています。

では、今日も頑張らずに楽しんでいきましょう～！