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

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

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

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

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

注記:16年9月、当ブログはライブドアブログからWordPressに移転しました。現在はライブドアブログではありませんが、引き続き、ライブドアブログを使っている方のお役に立てれば幸いです。ライブドアブログからWordPressへの移転方法の解説はこちら。

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

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

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

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

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

サイドバーのデザインパターン

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

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

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

ライブドアブログ管理画面(ブログパーツ)

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

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

サイドバーが1カラム(列)しか無かったら、エリアAもエリアBも一緒じゃないか?って。

そう、まさにその通り!

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

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

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

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

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

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

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

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

サイドバーの設定イメージ

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

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

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

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

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

ライブドアブログのカスタマイズ管理画面

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

「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宣言


ライブドアブログ初心者向けに、ブログのデザインをカスタマイズするための、知識と方法をまとめています。

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