アメブロdeアクセスアップ

アメブロサイドバーのメニューとタイトルに枠を付ける方法 | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


テーマ:サイドバーカスタマイズ

アメブロのサイドバーカスタマイズについてです。

サイドバーのメニューは、
サイドバー本文(詳細部分)とサイドバーヘッダー(メニュータイトル)とに分かれています。

これを区別するために、枠を付けたいと思います。

 

 

 

 

これもカスタマイズとして、質問をいただきました。

 

以前の記事でも書いたように、
サイドバーのメニュー項目全体を枠で囲むと、
項目自体、目に留まるようになりますので、
読者さんを、サイドバーへと誘導できるようになってきます。
全体に枠を付ける方法はこちらで説明しています。
アメブロサイドバーカスタマイズ メニュー全体に枠を付ける方法

 

 

CSSのカスタマイズは、実はいろいろ応用できるもの。

 

 

 

 

変更したい箇所がわかれば、あとは装飾だけです。
自分でカスタマイズしたい方は、
CSSの記述方法や、プロパティをすこしづつ覚えていってくださいね。
全てのCSSの記述に使うことができますよ。

 

 

 

 

今回は、サイドバーのメニューのタイトル部分と、
メニューの内容を区別できるように、別々に枠を付けるように設定します。

 

 

 

簡単なCSSですので、
パーツの名称と、CSSのプロパティを覚えてくださいね。

 

 

 

 

CSS編集可能テンプレートでは、こんなコメントアウトがあります。

/* (3-7) サイドバーエリア */

この下に、サイドバーに関しての装飾の記述(CSSですね)がされています。

 

 

 

 

サイドバー全体に枠を付ける方法をご紹介した時に、
サイドバー(読者登録ボタン)を検索してくださいと、記述しましたが、すみません。

 

これ私が自分でつけたコメントアウトでした。
※コメントアウトは、自分で解るように記述ができます。

 

 

 

 

今回は、サイドバーのCSSの変更なので、
またあとから、CSSを追加・修正することがあるかも知れませんよね。
ですから、上記のコメントアウトを探していただいて、
それそれのパーツ・コメントアウトの下の記述を変更していくと、
追加・修正しやすいですし、解りやすいですね。

 

 

 

サイドバーは、

サイドバーエリア (.skinSubArea)
サイドバーメニューエリア (.skinMenu)
サイドタイトルエリア (.skinMenuHeader)
サイドメニュー本文エリア(.skinMenuBody)

 

 

に分かれています。

 

 

サイドバーエリアという部分は、サイドバー全体のことを示しています。

サイドバーメニューエリアは、サイドバーメニュー全体のことです。

サイドタイトルエリアは、サイドバーメニューのタイトル部分です。

サイドメニュー本文エリアは、サイドバーのメニューの内容部分のことです。

 

 

 

このように、エリアごとに最初に記述するコードが違います。

 

 

 

まず、パーツを変更するかということを指定をして、
次にどのような装飾をするか(これがCSSプロパティのことです。)ということを記述します。

 

 

 

今回は、サイドバーエリアに(全体ですね)に枠を付けて、
なおかつタイトルの下に線を引いて、タイトル部分と本文部分を分けるようにします。

 

 

 

出来上がりはこんな感じです。
※CSS編集可能デザインを使っています。

 

サイドバーメニューに枠を付ける

 

グリーンの枠にしましたが、色はブログのカラーに合わせてみてくださいね。

 

 

 

 

hanaサイドバーに枠を付けるCSS

※CSS編集可能デザインを使用した例です。

 

 

CSS編集から

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

というコメントアウトを探してください。

 

 

 

デフォルトの記述はこんな感じですね。

 

ここでは、デフォルト(初期設定)では、サイドバーメニューの背景色が、
設定してあります。
そのbackground: の下に、下記のコードを追加してください。

 

 

 

 

これで、サイドバーメニュー全体への枠線が付きました。

 

次に/* skinMenuHeader サイドメニュータイトルエリア */ というコメントアウトを
探してください。(すぐ下にあると思います。)

 

 

 

全体に枠ができれば、タイトルの下に線を引けば、
タイトル部分と内容部分を区別することができますよね。

 

 

なので、background:#e4e4e4;/* ←サイドメニューのタイトルに背景を敷きたいとき */
という記述の下に、下記コードを追加してください。

 

 

 

全体を囲んだおんなじ色と線種で指定してあげればいいと思います。

 

 

 

出来上がりをもう一度。

サイドバーメニューに枠を付ける

 

これを応用すると、こんな感じ。

 

サイドバー装飾の応用

 

 

CSSは、難しく考えないでパーツごとに、
何を変更したいか?ということを考えてくださいね。

 

 

 

いくらでも、応用が利きます。

やってみてくださいね。

 

 

 

 

これら、すべてのカスタマイズのことが書かれているマニュアルです。
これ1個持っていると、自分のアメブロをすべてカスタマイズできますよ。
参考にしてみてくださいね。
初心者にもできるアメブロカスタマイズ

 

 

 

テンプレートデザイン・カスタマイズのこと、アクセスアップのこと、
アメブロのことならお任せあれ!

Copyright © アメブロdeアクセスアップ All Rights Reserved.