1. TOP
  2. アメブロカスタマイズ
  3. (3-8) サイドバー メニューのカスタマイズ・基本理論編

(3-8) サイドバー メニューのカスタマイズ・基本理論編

今回はCSS編集用画面の(3) エリアのスタイルブロックの中の、
「(3-8) サイドバー メニュー」の解説をします。
サイドバー部分は、主にあなたのプロフィールやコンテンツ一覧が並ぶ部分です。ブログの読者があなたのブログコンテンツに興味を持ったときに目が行くエリアです。

この部分を際立たせ、あなたの読者が訪問しやすい環境を作ることもカスタマイズでは大切なことです。ヘッダーやナビゲーションを付ければ大方のカスタマイズは完了したようなものですが、より読者に見てほしいページをアピールすることができるようにさらにサイドメニューもこだわれば、目を惹くブログページになりますよ♪なので、今回からまた何回かにわけてサイドメニューの説明をしたいと思います。

今回は基本理論の解説をします。

あなたがCSS編集用画面のどの部分を修正したら、どのような効果がでるかをしっかり身につけてもらうためにはどうしても最初の基本理論の解説が必要になってしまいますので、まずはここを頑張って読み進めてもらい次回以降につなげていってもらえたらと思います。

では前置きが長くなりましたが、解説します。

サイドメニューとはどこの部分のことを言ってるの?

そもそもサイドメニューはどの部分のことを言っているのでしょうか?

サイドメニューとは私のブログで言う左にある部分のことです。

私のブログは「2カラム・左サイドメニュー」を選択していますが、「3カラム」なら現在見ている記事の両脇、または右端にサイドメニューが並ぶことになります。

image-11073370759-11602073412

CSSを確認する

ではCSS編集用画面を開いてください。そして「(3-8) サイドバー メニュー」の部分を見てみましょう♪コードは以下のようになっています。

/* (3-8) サイドバー メニュー
——————————————–*/

/* skinMenu サイドバー メニューのエリア */
.skinMenu{
/* 注 ベースのcssに margin-bottom の記述有り */
background:#f7f7f7;/* ←サイドメニューに背景を敷きたいとき */
}
.skinMenu2{}

/* skinMenuHeader サイドメニュータイトルエリア */
.skinMenuHeader{
padding:5px 10px;
background:#e4e4e4;/* ←サイドメニューのタイトルに背景を敷きたいとき */
}

/* skinMenuBody サイドメニュー本文エリア */
.skinMenuBody{
margin:10px;
padding:10px;
background:#ffffff;/* ←サイドメニューの本文に背景を敷きたいとき */
}

サイドメニューは上記のコードのように

  • skinMenu サイドバー メニューのエリア
  • skinMenuHeader サイドメニュータイトルエリア
  • skinMenuBody サイドメニュー本文エリア
  • skinMenu2のエリア

の4つのエリアにわかれています。それぞれのブロックが実際にあなたのブログのどの部分のことを言っているのかを下にイメージとして掲載しました。

image-11073370759-11605978751

上記イメージの解説
①.skinMenu

サイドメニューブロックの全てを囲うエリアです(画像でピンクの部分)

②.skinMenu2

サイドメニューブロックの全てを囲うエリアです(画像で緑の部分。①と全く同じ大きさの枠です)

③skinMenuHeader

サイドメニューブロックのヘッダー部分です(画像でブルーの部分)

④.skinMenuBody

③のヘッダー下の部分(画像でブラウンの部分)

これら4つのブロックを駆使?して背景を設定したり画像を挿入したりするわけです。

基本的にはプロフィールや、テーマ、そしてカレンダー等のブロックの構成は上のイメージと全く同じで、上記スタイルを変えれば全ての配色の変更が可能となります。これは2カラムでも3カラムでも全て同じです。

ですが、サイドメニュータイトルを画像にしたいときは個別の設定が可能となります。最終的には個別に設定する方法も紹介しますが、まずは基本的なところから行きましょう。

次回はこれらに修正を加えて自由に配色や枠線を設定する方法を解説します。

こちらを押してアメブロカスタマイズガイドを見てみる

>>ページのトップへ

おすすめ

無料メルマガ
optin
自分で作るアメブロカスタマイズ