HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」　と考える方々に分かりやすい解説記事を書きたいと思っています。

難易度表示付き記事一覧はこちらです

4つの画像を使って、サイドメニューをカスタマイズしようと思います。

初心者の方にはちょっと難易度高いかもしれませんが、ケーススタディーとして、分かる部分だけでも吸収いただければうれしく思います。

カスタマイズの狙い

デザインカスタマイズをするとき、「こういうふうにしたい」という狙いがあるものだと思います。ウェブサイトを制作する側からすると、その狙いが一番大切なことなんです。でも、デザインについてあまり詳しくない方や、仕事を命ぜられたご担当者ご自身は、うまく表現できなかったり、はっきりとした形として伝えられないことが多いんです。

デザインって感覚的なものなので、つくる側としては「どうしたいか」っていう要件を明確にしておかないと、お出ししたデザインが気に入ってもらえなければ、後はズブズブの展開が待っているんですよね。

僕はディレクターという立場なので、デザイナーさんに、はっきりとした方向性を伝えるためにも、この「要件定義」ってプロセスをとても大事にしています。クライアントさんと、「どうしたいか」って話するの、すんごい盛り上がりますよ。好き勝手言ってもらっていいですから。どんだけ理想が高くても、デザイナーさんにとっては、はっきりとしたイメージが描ければ、それに越したことないんですよ。ハードルが高いほど喜ぶデザイナーさんがほとんどですから。

えらい話が逸れました（笑）。

今回のサイドメニューカスタマイズの僕の目的は、サイトに「ちょっと色をつけてみたい」という、結構お手軽なものです。

前回の記事内容と違う点

前回の記事「サイドメニューをカスタマイズする！」と違うのは、画像を使っているところです。それでどう違いが出てくるかといいますと、サイドバーのメニューの背景。狭いほうは左上。広いほうは、右上が、ちょっと欠けた形になってますよね。それと、各メニューの右下が、紙がめくれあがったような形になっているところ。画像がつくれれば、表現の幅、結構広がりますよ！

主役は記事ですので、CSSファイルに極力手を入れずに、サイドバーの部分は少し控えめな表現でカスタマイズすることを主眼にしました。「最新の記事」を目立たせたかったので、右向き▼印を入れてみました。これも画像です。

今回の学習テーマ

誰でもできるカスタマイズというのがこのカテゴリーの記事ではいちばん大事なことですので、今回は、文字に対する装飾であるfont-weightとletter-spacingについて触れたいと思います。

デフォルトデザインと違っている点、気づきました？　はい、サイドメニューのタイトル部分の文字設定です。太字にして、文字の間隔を空けています。設定部分は、下記のようにしています。


div.skinMenuHeader {
	font-weight: bold;
	letter-spacing: 0.2em;
	color: #666666;
}

最初の行のdiv.skinMenuHeader。ここにCSSの設定をすることで、タイトルのあるサイドメニューをすべていっぺんに変更することができます。

まず、font-weight。ここには、normalかboldを指定できます。前者が普通の太さ、後者が太文字です。

次に、letter-spacing。これで文字と文字の間隔を設定できます。emってのは単位で、1文字分を意味しています。0.2なので文字間0.2文字分です。他にも、px、pt、exなど、色々な値が指定できますので、興味のある方は検索してみてください。

加えて、太字にして他の文字の色と同じ色では強くなりすぎますので、少し黒を薄くしていいます。その指定が、color: #666666;です。文字色については、「ColorPicker と Stealth LauncherII 」で解説していますのでご参照ください。

その他のカスタマイズ解説

サイドメニュータイトルの背景に画像を使っていると書きましたが、使っている画像は一つです！　当記事冒頭で示しておりますが、幅の広いほうのメニューの背景画像と、狭いほうの背景画像を組み合わせたような画像が使っている画像です。その左側を使うか、右側を使うかで、左欠け、右欠けを表現しています。

紙がめるれているような表現は、それが使われているエリアのいちばん下に画像を表示するような命令をすることで実現しています。こちらのほうは、幅の狭いメニューと広いメニューで別々の画像を使用しています。

今回のカスタマイズ内容は、過渡的なものとなるような気がしていますので、CSSの最後に下記のようなコードを追加して実現しています。


/* サイドメニューカスタマイズ */
div.skinMenuHeader {
	font-weight: bold;
	letter-spacing: 0.2em;
	color: #666666;
}
div.skinSubA div.skinMenuHeader{ /* ワイドサイドメニュー共通の設定～タイトル背景 */
	background: url('http://stat.ameba.jp/user_images/20111228/15/jalan2-net/81/a7/g/o0311002711699618040.gif') right top no-repeat;
}
div.skinSubA div.skinMenu{ /* ワイドサイドメニュー共通の設定～ボディブ下部背景 */
	padding-bottom: 32px;
	background: #e4f4f7 url('http://stat.ameba.jp/user_images/20111228/15/jalan2-net/e3/90/g/o0300003211699619335.gif') left bottom no-repeat;
}
div.skinSubB div.skinMenuHeader{ /* 幅の狭いサイドメニュー共通の設定～タイトル背景 */
	background: url('http://stat.ameba.jp/user_images/20111228/15/jalan2-net/81/a7/g/o0311002711699618040.gif') left top no-repeat;
}
div.skinSubB div.skinMenu{ /* 幅の狭いサイドメニュー共通の設定～ボディブ下部背景 */
	padding-bottom: 32px;
	background: #e4f4f7 url('http://stat.ameba.jp/user_images/20111228/15/jalan2-net/7e/e0/g/o0180003211699619334.gif') left bottom no-repeat;
}
/* skinMenuBody サイドメニュー本文エリア */
.skinMenuBody {
	margin:10px 10px 0 10px;
	padding:10px 10px 0 10px;
	background:#ffffff;/* ←サイドメニューの本文に背景を敷きたいとき */
}
/* 最新の記事のリストの前に▼画像 */
.recentEntriesMenu li {
	padding-left: 13px;
	background: url('http://stat.ameba.jp/user_images/20111228/15/jalan2-net/a3/d4/g/o0008000911699618038.gif') left 3px no-repeat;
}
/* サイドメニューカスタマイズ終わり */

アメブロのCSSカスタマイズ可能なデザインはすごくよく出来ていて、ここをこうしたい！　という狙いは、たいてい実現できるようになっています。ちょっと難しいですが、その分析を「ちょっと難しいカスタマイズ」カテゴリーの「アメブロのHTMLの基本構造」「左右サイドバーと本文ブロックの構成」「アメブロサイドバーの構成」で解説しています。

最後の記事はニーズが高いと思われる各サブメニュータイトルを画像にしたいときに役立つ内容となっています。

カテゴリータイトルどおり小難しい話ではあるのですが、今回のカスタマイズもそれぞれの記事で示しているソースコードをコピペして手を入れるだけで実現しています。けどやっぱり、それをできるのは、「ちょっと難しいカスタマイズ」の内容が分かる人向けですので、初心者の方は、当記事のテーマである、font-weightとletter-spacingでまず、思いっきり遊んでくださいませ。

サイドメニューをカスタマイズしてみました