サイドバーのカスタマイズの修正点
昨日記事にした
サイドバーに枠線を付けるカスタマイズ について、
こちらの方から貴重なコメントを頂きました。
→かーず＠沖縄の太陽光発電所オーナー さま
早速僕のブログに合うか試してみたんですが、どうやらプラグイン関係には枠線が表示されないみたいですね。プラグインに関しても方法はあるんでしょうか。
それからこれは自己解決しましたが、サイドバーモジュール内のタイトル部分にマージンが設定されていると、このブログのように枠内に綺麗に収まらず、余白が空くため、ちょっと不格好になります。
※『サイドバーに枠線を付けるカスタマイズ』に頂いたかーずさんからのコメントより抜粋
ありがとうございます。
当アメブロのサイドバーをカスタマイズをする際に、
サイドバーに枠線を付けるカスタマイズ のタグを追加する以外に
色々手直ししていたことを忘れておりました
カスタマイズ方法をご提供している者として気をつけなくてはいけない事でしたのに…
申し訳ございません。
そこで、修正＆追加のタグを紹介します。
このタグを追加することにより、
サイドバーのメニュータイトルをカスタマイズ
サイドバーに枠線を付けるカスタマイズ
の２つを一気にカスタマイズできます。
もし、上記の２つのタグが付いている場合は消去しておいてください。
※もちろんそのままでも大丈夫ですが、CSSの中に無駄なタグを残すことになりますので…。
では、サイドバーのカスタマイズ（メニュータイトル＆枠線編）
以下のタグを【CSS編集画面】に追加します。
CSS編集画面でタグを追加する方法
はこちらです。
『追加するタグ』はこちらから。
↓↓↓この下から↓↓↓
/*■■サイドバーのカスタマイズ（メニュータイトル＆枠線編）■■/
div.mainMenu{
margin:0 0 15px 0;
padding-bottom:10px;
font-size:12px; /*メニュータイトル以外の文字サイズ*/
line-height:1.3; /*上下の文字間隔*/
}
/*サイドバーメニュータイトル*/
.menu_title {
color:#ffffff; /*メニュータイトルの文字色*/
font-size:14px; /*メニュータイトルの文字サイズ*/
font-weight:bold;
text-align:center; /*メニュータイトルの文字位置*/
margin-left:0px;
margin-right:0px;
}
/*メニュータイトル背景*/
.menu_title {
background-color:#DF5C88; /*タイトルの背景色の指定*/
background-image:url(画像URL); /*背景画像を入れる場合はここに入力*/
background-position:center bottom;
background-repeat:no-repeat;
width:166px; /*背景の横幅サイズ指定*/
border-bottom:none;
}
/*サイドバーの枠線*/
.mainMenu{
border:2px solid #D3D3D3; /*サイドバーの枠線スタイル*/
}
/*プラグイン用の枠線*/
.plugin{
border:2px solid #D3D3D3; /*プラグイン用の枠線スタイル*/
margin-bottom:15px;
text-align:center;
}
↑↑↑この上まで↑↑↑
青文字の部分にあなたのお好みの色コードを指定してください。
色を変更する方法
はこちらです。赤文字の部分の数字を変えることにより、線の太さを指定します。当アメブロでは細めに設定しておりますので2px。
太めに設定するにしても3pxもあれば十分だと思います。
紫文字の部分で文字サイズを変更できます。数字を変更してみてください。文字サイズを変更する
はこちらです。水色文字の部分でメニュータイトルの文字位置を変更します。上記のタグでは中央寄せになっております。
・左寄せにしたい場合は『left』
・右寄せにしたい場合は『right』
を入力してください。
灰色文字の部分は、メニュータイトルの背景画像をお持ちでしたら画像URLを入力すれば画像を付けることができます。
緑文字の部分がちょっと手間がかかります。ここで、メニュータイトルの背景の横サイズを指定するのですが、
当ブログの様に枠線いっぱいに指定する場合、
「サイドバーの横サイズ」から「サイドバーの枠線の太さx２」の分を引いた数字を入力します。
これを指定しないと、背景がはみ出したり小さすぎたりするのでここは注意が必要です。
サイドバーの横サイズを調べる方法として、
CSS編集画面を開いたら、「CTRL+F」を押すとブラウザの検索ボックスが出てきますので、
検索ボックスにサイドバー用のタグである『#sub』と入力します。
そうすると、CSS編集画面内にある#subの文字がどこに配置されているか解りやすくなります。
その中で、
#sub_a{
float: left;
z-index: 1;
width:170px;
margin:0;
padding:0 10px 0 0;
}
などと書かれた部分があると思います。
その、「width:170px;」という部分がサイドバーの横サイズです。
※『#sub_a』が左カラムで、『#sub_b』が右カラムです。どのスキンでもどちらも同じ数値だと思います。
上記の場合、
【サイドバーの横サイズ】 170px-【サイドバーの枠線の太さx２】 2x2px =166px
と、なります。
この数字を緑文字部分に指定します。
必ず【プレビュー】で確認しながら設定してください。
かーずさんへ
貴重なご意見ありがとうございました。
おかげで正確なタグをご紹介できました。
また何か気になる点や解らない事がございましたらコメント頂ければと思います。
助けられていることはココだけの秘密です（爆。
<< 関連記事 >>
サイドバーのリンクにリストマークをつけて分かりやすくするカスタマイズ
読者登録 画像の変更 カスタマイズ
記事内のリンクを自動で強調する方法
アメブロ ヘッダー画像の変更方法