サイドバーのリストを見やすくするカスタマイズ
ここでのサイドバーのリストとは、『最新記事』や『ブログテーマ一覧』、
『このブログの読者』、『お気に入りブログ』などで、
縦に並んでいるリンクの事を指します。
左画像の→の部分です。
デフォルトの状態ですと、
上下の文字の間隔がせまく、
視認性の悪い状態ですね。
このカスタマイズは結構見のがしがちですが、
リストにあるリンクから他の記事を読みにいったり、
他のブログにアクセスを送りやすくなるので、
しっかりカスタマイズして視認性を上げましょう。
でも、
「いったいどのようにカスタマイズすれば見やすくなるの？」
と疑問が出ますね。
ここでは、
リストの文字上下の『文字間隔』と『間に区切り線を入れる』というカスタマイズによって
視認性を上げてみようと思います。
では、サイドバーのリストを見やすくするカスタマイズ
以下のタグを【CSS編集画面】に追加します。
CSS編集画面でタグを追加する方法
はこちらです。
『追加するタグ』はこちらから。
↓↓↓この下から↓↓↓
/*サイドバーリストの視認性を上げる*/
#archives .menu_frame li,/*アーカイブ*/
#bookmark .menu_frame li,/*ブックマーク*/
#favorite .menu_frame li,/*お気に入りブログ*/
#reader .menu_frame li,/*このブログの読者*/
#recent_entries .menu_frame li,/*最近の記事一覧*/
#recent_comment .menu_frame li,/*最近のコメント*/
#theme_list .menu_frame li{/*ブログテーマ一覧*/
padding:5px 0px 3px 18px;/*上 右 下 左のスペース*/
border-bottom:1px dotted #d3d3d3;/*下線のスタイル*/
}
/*サイドバーリストの視認性を上げる・ここまで*/
↑↑↑この上まで↑↑↑
上記タグの中で、
『padding:5px 0px 3px 18px;/*上 右 下 左のスペース*/』
は、リストの文字間隔（位置）を指定します。
４つの数字が並んでいますが、
左の数字から、上、右、下、左からのスペースを指定するのです。
当アメブロでは、リストマークをつけているので
左のスペースは『18px』とリストマーク分のスペースを設けています。
『border-bottom:1px dotted #d3d3d3;/*下線のスタイル*/』
は、リストの文字の間に線を引いて区切るためのタグです。
ここの、
・『1px』では、線の太さを指定します。数字を変えると線の太さが変わります。
・『dotted』では、線のスタイルを指定します。ここでは破線を指定しています。
『solid』と書くと実線、『dashed』と書くと点線に変わります。
・『#d3d3d3』では、線の色を指定しています。
色に関しては、色の変更方法
の記事を参照してください。
もし、線がいらない場合は、
border-bottom:none;/*下線のスタイル*/
と変更しておいてください。
※これを残しておけば、後々に区切り線を付けたい場合に簡単に付けられますので。
このタグを追加することにより、
のように見やすいスペースと区切り線が付きます。
上の画像が僕の今のアメブロのデザインです。
区切り線を変えてみると、雰囲気がガラっと変わります。
どの線のスタイルがあなたのアメブロには合うでしょうか？
画像をクリックすると拡大表示されます。●実線を指定
●点線を指定
●線なし
<< 関連記事 >>
サイドバーのリンクにリストマークをつけて分かりやすくするカスタマイズ
サイドバーのメニュータイトル部分と枠線を付けるカスタマイズ
読者登録 画像の変更 カスタマイズ
アメブロ ヘッダー画像の変更方法
オリジナルバナーを作成しました
もし、サイドバーや記事に貼り付けてリンクして頂ける場合は、
こちらのバナーをご使用ください。
バナー用ソースコード
---この↓から---
<a href="http://ameblo.jp/easy-customize/" target="_blank">
<img src="この文字を消して下記の画像URLを貼り付けてください"></a>
---この↑までをコピーしてください---
上のソースコードを、あなたのアメブロやホームページに直接貼り付けてください。
170x80
画像URL（http://stat.ameba.jp/user_images/20100217/13/easy-customize/09/8b/p/o0170008010417937382.png）
180x90
画像URL（http://stat.ameba.jp/user_images/20100217/14/easy-customize/10/e1/p/o0180009010417963334.png）
280x140
画像URL（http://stat.ameba.jp/user_images/20100217/14/easy-customize/bf/c0/p/o0280014010417963330.png）
【配色の知識】青が表現するイメージとは？
また、安定感や冷静さを表現でき、
ビジネスにとって必要な要素を持ち合わせた配色を打ち出すことができます。
濃い目の青に関しては、学校の制服やリクルートスーツなどに使われていることから、
誠実、真面目、真剣さを表現する時に使用されます。
信頼感を出したい企業のブログや、
アメブロをビジネスのツールとして使っている場合に最適な色なのです。
青を使用したサイト紹介
画像をクリックすると参考サイトを直接確認できます。
ビジネスに必要な信頼感を表現する
透明感のある青は、ビジネスに必要な信頼感を与えます。
左のサイトは、
大学の公式サイトではありますが、
ビジネスブログを運営している人は
参考にすべき配色です。
フォント（字体）の印象もありますが、
メニューリンクのグラデーションがアクセントカラーとなっていて、
その濃いめの青が信頼感を表現しています。
清涼感を表現する
冷たい感じを出す時は青がピッタリ。左のサイトでは、ヘッダーだけではなく、
バナーやフッターも青に統一していて、
そのグラデーションと画像によって清涼感を表現しております。
水をイメージするブログに最適です。
たとえば、サーファーのブログや、
水泳関連のブログ、ドリンク系の紹介ブログなど…。
独自性を表現する
青をメインカラーにしておきながらも、アクセントカラーにさまざまな色を
配置することにより、
デザインのユニークさ（独自性）を
表現できます。
左のサイトは
マグカップのさまざまなデザインが
アクセントカラーになっております。
これだけ並ぶとかなりインパクトがありますね。
冷静さやクールさを表現する
青でも、暗めから明るめのグラデーションの
配色にすることにより、
冷静さやクールさを表現する事ができます。
左のサイトは、
背景画像にグレー系を使用することにより
青のグラデーションを強調し、
さらに、クールな感じを表現しています。
このデザインはブログに採用しやすいですね。
と、４パターンの表現方法をご紹介しました。
青をテーマカラーに採用すべきブログは、
ビジネスを意識している場合です。
アメブロガー（アメブロを書いている方の事）さんの中には、
ビジネスツールとして活用している方がたくさんいらっしゃいます。
実店舗の紹介ブログや、記事にて商品を紹介＆販売したりするブログなど、
そのビジネススタイルはさまざま。
当アメブロもビジネスツールとして活用しています。
基本、
アメブロのカスタマイズ方法を『メイン』にご紹介していて、
その内容では出来ないオリジナルデザインの作成を『ビジネス』として運営しております。
なので、この青をテーマカラーにしたデザインは当アメブロでも採用しておりました。
この２つのデザインは、ビジネスに必要な信頼感を表現しております。
このデザインを採用している時は、
何をしなくても読者登録をして頂ける方が来て、
「デザインがきれいですね。」とコメントをして頂けておりました。
この時はまだビジネスを開始する前でしたので、デザインの依頼はなかったですが、
「私のアメブロをデザインしてください。」というメッセージを頂いてもいました。
それほど信頼感を与える色なのです。
今のデザインでは…、読者登録はまだありません（苦笑。
まぁ、このデザインにしてからまだ一日しか経っていないのでね。これからだと思います…。
と、自分に言いきかせています（爆。
でも、色によって印象が違ってくるのは事実です。
青を使用してアメブロをビジネスツールとして活用している方が、
吉永賢一IS東大家庭教師が教える頭が良くなる勉強法と記憶のコツ
さんデザインとしてはかなりシンプルなものですが、
青を採用し、プラスご自身の写真をプロフィールに掲載することにより、
信頼感をアップさせています。
また、本を出版されていて、その本からの良いイメージもありますので、
アメブロと本の両方で相互イメージアップという効果が出ています。
さらに、ヘッダーにオリジナルの画像を設置すると効果的です。
吉永さん、ご検討されてもいいのでは！？
<< 関連記事 >>【配色の知識】赤が表現するイメージとは？