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

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


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

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

 

サイドバーにあるプロフィール・カレンダー・読者登録などを称して、
サイドバーメニューといいます。

 

このサイドバーのメニューに枠を付けたい!
という質問をいただきましたので、ご紹介していきますね。

 

 

 

 

アメブロも他のブログもそうですが、
CSSで装飾する場合、パーツごとに装飾していきます。

 

 

そのパーツの名称を知っておくと、CSSがもっと簡単に出来ると思います。

 

 

 

アメブロの場合

.skin~ という表記で、書かれているのが、
それに当たります。

 

CSSの記述を見てみると、コメントアウトがあるので、
結構見やすいですよね。

 

 

 

ここが body全体の文字ですよーとかね。

 

今回は、サイドバーのメニューに枠を付ける方法をご紹介します。

 

以前の記事でも書いたんですが、
サイバーには、読者さんを誘導するパーツが
いろいろと組み込まれています。

 

 

 

その中で、読者登録というメニューがありますね。
この読者登録メニューのCSS変更と合わせて
参考にしていただくといいかもです。
アメブロサイドバーカスタマイズ 読者登録数の大きさを変更する方法

 

 

HTMLやCSSでは、枠のことを border といいます。
※border 線のことですね。

 

この線の太さや種類を変更することによって、枠の装飾が変更されます。

 

 

枠を付ける前はこんな感じね。

 

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

 

枠を付けると付けるとこんな感じになります。

 

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

 

 

 

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

※CSS編集可能なテンプレートの場合です。

 

 

アメブロのマイページより、デザインの変更からCSS編集をクリックして、
CSS記述を見てくださいね。

 

 

 

コメントアウトで /* (3-8) サイドバー メニュー*/ を探してみてください。

 

このコメントアウトの下に、

.skinMenu{ ~

こんな記述があると思います。

 

 

ここでは、メニュー全体の背景色などの記載がありますね。

 

 

 

ここで、メニュー全体の背景色も設定できるんですが、
一緒に枠も設定していきます。

 

 

下記のコードをコピーして、差し替えてくださいね。

 

 

 

 

これで、背景色がついて枠が付きました。

 

 

もう一度出来上がりはこんな感じです。

 

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

 

CSSの説明をしますが、border は 線のことです。

 

なので、線の太さや種類・色なども、一括で設定できます。

 

border:solid 2px #4ee592; の記述の解説をすると、

border: ← 線の設定
solid ← 線の種類 (普通の線)
2px ← 線の太さ
#4ee592 ← 線の色

 

 

この順番で記述していきます。

 

 

線の種類は、他にもありますのでお好みで・・・

 

solid 線(普通の線)
duoble  2本線
dotted  点線
※よく使うものです。

 

線のつけ方も、今回は全体に枠を付けるため
border だけで設定していますが、
上下左右、一か所のみ線を付けるという設定もできます。

 

border-top   上
border-reft   右
border-rightb 左
border-bottom 下

 

 

 

補足です。

 

サイドバーのメニュータイトル部分だけに、枠を付けたい場合

.skinMenuHeader

の部分にCSSの記述をしてください。

 

サイドバーのメニューの詳細(内容ですね)部分だけに、枠を付けたい場合

.skinMenuBody

の部分にCSSの記述をしてください。

 

 

いろいろ応用して、設定してみてくださいね。

 

 

 

また色の選び方ですが、背景色よりも濃い色を選ぶと枠自体が引き立ちます。
参考にしてくださいね。

 

 

カラーの見本は、こちらのサイトを参考にしてみてね。
WEB色見本 原色大辞典

 

 

 

カスタマイズの質問は、メールでお問い合わせくださいね。
 

 

 

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

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