サイドバーのカスタマイズの修正点
昨日記事にした
サイドバーに枠線を付けるカスタマイズ について、
こちらの方から貴重なコメントを頂きました。
→かーず＠沖縄の太陽光発電所オーナー さま
早速僕のブログに合うか試してみたんですが、どうやらプラグイン関係には枠線が表示されないみたいですね。プラグインに関しても方法はあるんでしょうか。
それからこれは自己解決しましたが、サイドバーモジュール内のタイトル部分にマージンが設定されていると、このブログのように枠内に綺麗に収まらず、余白が空くため、ちょっと不格好になります。
※『サイドバーに枠線を付けるカスタマイズ』に頂いたかーずさんからのコメントより抜粋
ありがとうございます。
当アメブロのサイドバーをカスタマイズをする際に、
サイドバーに枠線を付けるカスタマイズ のタグを追加する以外に
色々手直ししていたことを忘れておりました
カスタマイズ方法をご提供している者として気をつけなくてはいけない事でしたのに…
申し訳ございません。
そこで、修正＆追加のタグを紹介します。
このタグを追加することにより、
サイドバーのメニュータイトルをカスタマイズ
サイドバーに枠線を付けるカスタマイズ
の２つを一気にカスタマイズできます。
もし、上記の２つのタグが付いている場合は消去しておいてください。
※もちろんそのままでも大丈夫ですが、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
と、なります。
この数字を緑文字部分に指定します。
必ず【プレビュー】で確認しながら設定してください。
かーずさんへ
貴重なご意見ありがとうございました。
おかげで正確なタグをご紹介できました。
また何か気になる点や解らない事がございましたらコメント頂ければと思います。
助けられていることはココだけの秘密です（爆。
<< 関連記事 >>
サイドバーのリンクにリストマークをつけて分かりやすくするカスタマイズ
読者登録 画像の変更 カスタマイズ
記事内のリンクを自動で強調する方法
アメブロ ヘッダー画像の変更方法
サイドバーに枠線を付けるカスタマイズ
--------------------------------------------------------------------------
このカスタマイズでは、プラグインの枠線まで付けることが出来ません。
このカスタマイズの修正記事をアップしましたのでご確認ください。
ご迷惑をおかけしまして申し訳ございません。
修正記事はこちら
→サイドバーのカスタマイズの修正点
---------------------------------------------------------------------------
今回は、サイドバーに枠線を付けるカスタマイズ方法をご紹介します。
まず、サイドバーの枠線とは？
当アメブロでは、
矢印→の部分です。
これを付けると、
・全体的なバランスが良くなる
・サイドバーの視認性が良くなる
ので効果的です。
※ただ、
これはスキンによっては
しつこくなる可能性がありますので、
一度設置してプレビューで
ご確認する事をおすすめします。
では、サイドバーに枠線を付けるカスタマイズ
以下のタグを【CSS編集画面】に追加します。
CSS編集画面でタグを追加する方法
はこちらです。『追加するタグ』はこちらから。
↓↓↓この下から↓↓↓
/*サイドバーメニュー枠線*/
.mainMenu{
border:2px solid #D3D3D3;
margin:15px 5px;
padding-top:0px;
}
/*サイドバーメニュー枠線・ここまで*/
↑↑↑この上まで↑↑↑
青文字の部分にあなたのお好みの色コードを指定してください。
色を変更する方法
はこちらです。赤文字の部分の数字を変えることにより、線の太さを指定します。
当アメブロでは細めに設定しておりますので2px。
太めに設定するにしても3pxもあれば十分だと思います。
プレビューで確認しながら設定してください。
<< 関連記事 >>
アメブロ ヘッダー画像の変更方法
記事内のリンクを自動で強調する方法
【無料素材】矢印 アイコン リストマーク用
【無料素材】色んな アイコン リストマーク用
ヘッダー画像変更しました
このアメブロを以前にご覧頂いたことのある方はもうお分かりでしょうが、
またヘッダー画像を変更してみました。
PCでご覧ください（携帯でご覧の方は下の画像をご覧ください）。このヘッダー画像のテーマは、『メッセージ』
青のグラデーションを基調としたデザインで、
メタリックなメニュー用のラインでトータルのデザインを引き締めております。
青はビジネスに必要な信頼感を与えるカラーです。
安全性や確実性、安定感を演出しております。
また、鉛筆や筆の画像で独自性を強調し、
「あなたのアメブロを僕がオリジナルのデザインにしますよ。」
というメッセージを込めて挿入してみました。
僕がこの当アメブロにてお伝えしたい事を簡潔に表現できております。
それとともに、サイドバーのメニュータイトルの背景もヘッダーに合わせて変更しました。
このカスタマイズは、当サービスの
『オリジナルヘッダー画像＋メニューリンクの作成＆設置』 でできます。
もちろんあなたのオリジナルのデザインで。
今月の14日（日）までにお申し込み頂ければ
通常価格の『半額』で製作します。
（終了しました。）
価格や詳細はこちらから。
【期間限定】お得にあなたのアメブロをオリジナルデザインにしませんか？ >>