こんにちは。ユージーン(@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」タブが表示されているのを、「トップページ」に切り替えます。
すると、そこに書かれている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宣言![]() ライブドアブログ初心者向けに、ブログのデザインをカスタマイズするための、知識と方法をまとめています。 |