将来の日付

将来の日付の記事を投稿してみる。2分後に設定してどうなるか試験。

やりますね！

「削除されているか、将来の日付の記事なので表示できません」。

とういう内容のメッセージが出て、投稿段階では、プレビュー確認はできなかった。

しかし投稿時刻を過ぎると…

ちゃんと表示されているではないか。素晴らしい！

ヘッダー画像を入れる前の状態

カスタマイズ方法とその可能性を探るために、CSSにちょこちょこ手をいれてるので、ついつい忘れがちになるブログ変身の記録。

2011年12月28日の状態

ヘッダに画像を入れる前の状態のキャプチャーが残っていましたので、アップしておきます。

いつか腰をおちつけてきちんとデザインは考えようと思っていて、そのためにCSSファイルも付け足し付け足しで修正してきたので、ちょっとひどい状態に。これも放おっておくとさらにひどい状態になりそうですから、早めに整理をすることにしましょう。

記事表示部分の幅を広げる

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

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

今回は小ネタです。CSS編集可能デザインで、2カラムにしている方は特に感じないと思いますが、3カラムデザインの場合、記事表示部分の幅が狭いと思われている方は多いんじゃないかと思います。

2カラムにはしたいけど、3カラムのよさも捨てがたい。なので私は今のところ3カラムにしているのですが、少し記事表示部分を広げています。

50ピクセル分広げています！

CSS編集可能デザインの元々の記事部分の幅は410ピクセル。これを約50ピクセル広げて幅460ピクセルにする方法です。

ページ幅を規定しているCSSは下記の部分です。


/* (3-6) 記事
--------------------------------------------*/

/* skinArticle 記事エリア */
.skinArticle{
/* 注　ベースのcssに margin-bottom の記述有り */
padding:16px 0;
border:1px solid #dddddd;
background:#ffffff;/* ←記事に背景を敷きたいとき */
}
.skinArticle2{}
.skinArticle3{}


/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader{
margin:0 29px;
padding:2px 10px;
border-left:5px solid #e4e4e4;
}
.skinArticleHeader2{}


/* skinArticleBody 記事本文エリア */
.skinArticleBody{}
.skinArticleBody2{
margin:0 29px;
}


/* skinArticleFooter 記事フッターエリア */
.skinArticleFooter{
margin:10px 29px 0;
border-top:1px dotted #949494;
}

上のソースコードの黄色くなった部分に手を入れます。

手を入れた後は、下記のようになります。


/* (3-6) 記事
--------------------------------------------*/

/* skinArticle 記事エリア */
.skinArticle{
/* 注　ベースのcssに margin-bottom の記述有り */
padding:16px 0;
border-style:hidden;
background:#ffffff;/* ←記事に背景を敷きたいとき */
}
.skinArticle2{}
.skinArticle3{}


/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader{
margin:0 5px;
padding:2px 10px;
border-left:5px solid #e4e4e4;
}
.skinArticleHeader2{}


/* skinArticleBody 記事本文エリア */
.skinArticleBody{}
.skinArticleBody2{
margin:0 5px;
}


/* skinArticleFooter 記事フッターエリア */
.skinArticleFooter{
margin:10px 5px 0;
border-top:1px dotted #949494;
}

やっていることは、記事の周りの罫線を消去して、記事タイトル、記事、記事フッターの両側の空きスペースを、29px→5pxに変更するということです。

最初の29ピクセルと、罫線の1ピクセルを足して30ピクセル。両側のこの空きを5ピクセルに変更しますので、25×2＝50。合計50ピクセル幅が広がることになるわけです！

アフィリエイト広告をコンテンツ風に見せる

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

ポータルサイトでもよく見られる、画像とテキストを組み合わせた広告枠をつくってみました。自分で考えたショートコピーを配置できて、広告枠をコンテンツ風な体裁で見せるところがミソです。

現在は、右サイドバーの「お気に入りブログ」の下に配置しています。

コンテンツ風の体裁で

右の画像が、広告枠部分の表示イメージです。サイドバーの各メニューと同じデザインで、いかにもコンテンツ風に見えることがご確認いただけると思います。

メニュータイトルは、「記事中で紹介したソフトウェア」としていますが、この部分は自由に変更できます。画像とリンク設定されたテキストが、それぞれアフィリエイト商品へのリンクで、「その気になった時が、買い時！」というタイトルテキストは、私がつくったコピーです。テキストリンクが短い場合は、それをタイトル部分にもってくることで、やや長めのテキストコピーを添えることができるようになります。

ワイドサイドメニューの幅は300ピクセルですので、使える画像は、幅120ピクセル程度までがよいと思います。幅120ピクセル×高さ60ピクセルの画像を使用することを前提につくりましたが、右の画像程度の大きさ（幅80ピクセル×高さ80ピクセル）でもきれいに表示されていると思います。

簡単設置方法

サイドバーのメニューをそれぞれ別画像で表示するようにするなどのカスタマイズをしていなければ、お手軽に設置することができます。フリープラグインを、ワイドサイドメニューのほうに配置して使うことが前提になります。

設置方法は簡単です。まず、下記のソースコードを、CSSに追加しておきます。


/* ------------	.clearfix	----------------- */
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

/* ----------- 画像＋テキスト形式広告の枠設定 ---------- */
.custumad li .ad_ttl {
	font-weight: bold;
}
.custumad li .ad_img {
	float:left;
	padding-right: 5px;
}
.custumad li .ad_txt {
	line-height: 140%;
}
/* ----------- 画像＋テキスト形式広告の枠設定終わり ---------- */

次に、アフィリエイトサイトから、商品画像とテキストのリンクを取得します。画像のサイズは、横幅120ピクセル以下で見栄えがよくなります。

下記が、広告枠部分のソースコードです。コンテンツ風に見せるために、メニュー名付きパーツのソースコードを利用しています。ですので、特にデザインの設定をしなくても、それぞれの方が設定されているデザインが適用されます。


<div class="skinMenu">
<div class="skinMenu2">
<div class="skinMenuHeader">
<span class="skinMenuTitle">お好きな【メニュー名】をつけてください</span>
</div>
<div class="skinMenuBody">
<ul class="skinSubList clearfix custumad">
<!-- ここから -->
<li><p class="ad_ttl">【タイトル文字】を入れてください</p>
<p class="ad_img">商品への【リンクイメージのソースコード】を貼り付けます</p>
<p class="ad_txt">この部分に【商品説明コピー】を配置します。画像の幅、天地サイズに応じて文字量は調整してください。</p>
</li>
<!-- ここまでで1つの単位 -->
</ul>
</div>
</div>
</div>

途中で文字が切れていますが、コピー＆ペーストすれば問題なく利用できます。

黄色い文字の部分を編集すれば準備完了です。

テキストリンクの文字量が少なければ【タイトル文字】の部分に配置し、【商品説明コピー】を自分で考えます。各アフィリエイトサービスの規約違反にならないようにご配慮ください。

逆にテキストリンク文字が多ければ、【商品説明コピー】のほうに配置し、タイトルを検討します。

複数の広告を配置したい場合は、～の間のソースをコピーして、その下にペーストすれば、どんどん数を増やしていけます。

以上で準備は完了です。「フリープラグイン」に準備したソースコードを貼り付け、サイドバーに配置したら完了です。

ヘッダー画像を入れてみました

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

サイドメニューをカスタマイズした途端、デフォルトのままではヘッダーがあまりにも味気なく感じるようになりましたので、画像を入れてみました。

今回は「誰でもできる！」とはいえないのですが、画像さえ用意できれば結構簡単にできますので、そのやり方を記事にしておこうと思います。

デフォルトデザインとの違い

ヘッダーに手を入れようと思ったときに考えたことは、「なるべく天地サイズを取らないようにしよう」ということです。解像度の高いディスプレイを使っている方が増えているとはいえ、ヘッダ領域の高さはなるべく低くして、コンテンツエリアがスクロールしないでも、なるべくたくさん見えるようにしたいという狙いです。

ですので、冒頭の大きなバナーを、ヘッダーが飲み込んでいるような形にしました。

ヘッダ画像は2つ使ってます

そのために、画像は2つ使っています。バナーが表示されているエリアと、サイトタイトル＆説明文が表示されるエリア。この両エリアの背景に画像を置いています。

画像は、「スキンCSSの設定」の「ブログデザインヘッダ・背景用画像の追加」でアップロードしてみました。5画像までしかアップできませんけど、記事中で使った画像は一覧表示されてしまいますので、そのなかに入らないというのはありがたいですね。

画像作成には、Photoshopというソフトを使っています。作業画面が右の画像です。慣れるまでには時間がかかりますけど、インターネット好きなら是非もっておきたいソフトです。正規版は高くて涙が出るほどですが、入門用ソフト（Photoshop Elements）は、手の届く価格ではないかと思います。ただ、スライス機能がないってのはやはり不便ですね。

根性のある方には、GIMP というソフトがおすすめです。十分な機能があってしかも無料！です。Photoshopみたいな有名ソフトは、プロ仕様の無料素材が出まわってますので、初心者の方でも購入してすぐに楽しめるだろうというのが大きなメリットですかね。

Adobe Photoshop Elements 10 日本語版 Windows/Macint.../アドビシステムズ: ￥14,490　Amazon.co.jp

Adobe Photoshop CS5 Windows版 (32/64bit)/アドビシステムズ: ￥99,750　Amazon.co.jp

画像の高さに注意してください

Amebaのバナーが表示されるエリアは、合計112ピクセル。ですので、上部画像は112ピクセルの高さになるようにしています。設定部分は下記のソースです。


div.headerBnrArea {
	background: url('http://stat.blogskin.ameba.jp/blogskin_images/20111229/00/0b/af/j/o09800112jalan2-net1325085334318.jpg') center bottom no-repeat;
}

対してその下のメインエリアの高さはご自分で用意いただいた画像の高さに設定する必要があります。その設定部分が、


/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
	height: 114px;
	margin-bottom: 10px;
	background: url('http://stat.blogskin.ameba.jp/blogskin_images/20111229/00/3a/1b/j/o09800114jalan2-net1325085352643.jpg') center top no-repeat;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

の部分です

height: 114px;で画像の高さを設定して、margin-bottom: 10px;で、ヘッダ画像とその下のコンテンツ部分の間隔を設定しています。画像設定部分は、url('～')の「～」の部分を、「ブログデザインヘッダ・背景用画像の追加」でアップロードされた画像の下に表示される「この画像のパス」部分で表示されているソースに置き換えれば完了です。

サイトのタイトル文字と説明文の設定

サイトタイトルと、説明文にも少し手をいれました。


/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
	padding:25px 0 20px 30px;
}

/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea a:link,
.skinTitleArea a:hover,
.skinTitleArea a:active,
.skinTitleArea a:visited {
	color: #0066cc;
}

/* skinDescription ブログの説明文字 */
.skinDescription{
	color: #666666;
	font-weight: bold;
	letter-spacing: 0.1em;
}

padding:25px 0 20px 30px;で、デフォルトのままですと左にぴったりくっついた状態になりますので、その位置調整を行なっています。その次は、タイトルの文字色の変更。他のリンク文字と同じ色にしてみました。最後が説明文。太字にして少し文字の間隔を空けて読みやすくしています。

2番目の設定については、これまでの記事で説明していませんので、簡単に触れておきます。

a:link: ハイパーリンクが設定されている文字に対しての設定
a:hover: ハイパーリンクにオンマウスした際の文字に対する設定
a:active: ハイパーリンクをクリックした際の文字に対する設定
a:visited: 訪問済みのハイパーリンクに対する設定

以上、今回は当サイトのカスタマイズについて記事にしてみましたが、もっと簡単にできるヘッダデザインのカスタマイズについての記事を書いてみたいと思っています。

カスタムデザインを真似するには？

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

いくつかアメブロのデザインカスタマイズについての記事を書いてきましたが、「画像なんか、つくれないよ」と思われている方もいらっしゃるかも知れません。

けれども、真似するだけなら、別に画像を作成してアップする必要はありません。

すでにある画像を読みに行く

たとえば、前回の記事のサイドバーの変更と同じことをするためには、記事の後半の「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でまず、思いっきり遊んでくださいませ。

サイドメニューをカスタマイズする！

記事一覧はこちらです

デフォルトデザインでも、シンプルにまとまった雰囲気を演出してくれているサイドバーも各タイトル。今回はこのサイドメニューを簡単にカスタマイズする方法について学びます。

そのために、元の状態ではどのような設定になっているのかを見てみましょう

サイドバーを設定しているCSS

サイドバー部分の設定は、編集可能なCSSの3-8で次のように定義されています。


/* (3-8) サイドバー　メニュー
--------------------------------------------*/


/* skinMenu サイドバー　メニューのエリア */
.skinMenu{
/* 注　ベースのcssに margin-bottom の記述有り */
background:#f7f7f7;/* ←サイドメニューに背景を敷きたいとき */
}
.skinMenu2{}


/* skinMenuHeader サイドメニュータイトルエリア */
.skinMenuHeader{
padding:5px 10px;
background:#e4e4e4;/* ←サイドメニューのタイトルに背景を敷きたいとき */
}


/* skinMenuBody サイドメニュー本文エリア */
.skinMenuBody{
margin:10px;
padding:10px;
background:#ffffff;/* ←サイドメニューの本文に背景を敷きたいとき */
}

3つの箱の色

右の図を見ながら、各設定について読みといていきます。.skinMenu…これは何かといいますと、四角いエリアの名前だと理解しておけばわかりやすいです。右の図の赤い線の内側です。ここに、background:#f7f7f7;という指定がされています。背景の色を薄いグレー色である#f7f7f7という色で塗りつぶすという指定です。どんな色なのかは、「ColorPicker と Stealth LauncherII 」などの記事を参考に、お手元のソフトウェアでご確認ください。

しかし、薄いグレーでべたっと塗りつぶされているかというと、そうではありません。なぜかといいますと、塗りつぶされた四角い箱のなかに、また別の箱があって、同じように別の色で塗りつぶされているからです。

同様の設定を見てみますと、.skinMenuHeaderはbackground:#e4e4e4;と指定されています。これはやや濃いグレー色で、「ランキング」というタイトルの下にある帯の色です。

.skinMenuBodyは、background:#ffffff;。これは真っ白。「総合ランキング」などの文字が入っている白い箱だということが分かります。

最初に見た.skinMenuの薄いグレーは、.skinMenuHeaderと.skinMenuBodyで塗りつぶされていない部分、つまりこの四角い箱の周りの色だということが分かります。

paddingとmargin

次に、その他の指定を簡単に説明しておきます。

まずmargin。これは、お城のまわりの堀を思い浮かべればわかりやすいかな。箱のまわりのライン状の空間を意味します。pxはピクセルと読みます。1pxは画面上の点の最小単位で、その10倍の空間を空けるという意味になります。

margin:10px;という指定は、.skinMenuBodyという箱のまわりに10pxの空間を空けるという命令。この部分、ちょうど#f7f7f7の薄いグレー色の残っている部分ですね。全部白で塗りつぶさないで、この色を残すために指定されているわけです。

そしてpadding。こちらは、箱の内側のスペースを意味します。.skinMenuBodyでは外と同じく10pxの指定。「総合ランキング」などの文字が、べたっと白いスペースの四辺にくっついていませんよね。外側と一定の間隔が空いているように見えますが、この間隔が10ピクセルあるという意味です。

最後にちょっとややこしいのですが、.skinMenuHeaderと.skinMenuBodyではpaddingの指定の仕方が違うことに気づくと思います。.skinMenuHeaderのほうには、padding:5px 10px;というふうに、2つの値が指定されています。marginもpaddingも四辺ありますから、その4辺の外および内側の間隔を指定することができます。値が1つの時は、全部が同じ。値が2つのときは、「上下左右」の順番で指定。3つの場合なら「上左右下」の順。4つなら「上右下左」の順番でそれぞれ値が指定されていることを意味します。ややこしいですがルールですので、憶えるほかないですね。それぞれの値の間には、半角スペースを入れます。

もうお分かりと思いますが、.skinMenuHeaderのpadding:5px 10px;の意味は、箱の上下には空きを5pxつくり、左右には10ピクセルつくるという意味になります。

簡単カスタマイズ！背景の色を変える

では実際にこの部分をカスタマイズしてみましょう。実は、同様に見えるメニュー、すべて同じ命令がされいてますので、それぞれ指定をしてあげなくても、全部いっぺんに色を変えることができるのです！

では、ブルーを貴重にした配色に変えてみることにします。タイトル背景を#7cb7e4に、枠の色を#c7e7ffにして、枠の太さを半分くらしにしてみます。


/* skinMenu サイドバー　メニューのエリア */
.skinMenu{
/* 注　ベースのcssに margin-bottom の記述有り */
background:#c7e7ff;/* ←サイドメニューに背景を敷きたいとき */
}
.skinMenu2{}


/* skinMenuHeader サイドメニュータイトルエリア */
.skinMenuHeader{
padding:5px 10px;
background:#7cb7e4;/* ←サイドメニューのタイトルに背景を敷きたいとき */
}


/* skinMenuBody サイドメニュー本文エリア */
.skinMenuBody{
margin:5px;
padding:10px;
background:#ffffff;/* ←サイドメニューの本文に背景を敷きたいとき */
}

黄色い文字色の部分が変更した部分です。これでデザインは、右図のように変更されました。

みなさんも、自分のブログイメージに合う色に変更してみてはどうでしょうか？　作業を行う際には、「【文字色変更】カスタマイズ準備編」を参考に、必ずデータのバックアップを取るようにしてくださいね。

アメブロサイドバーの構成

まず、「左右サイドバーと本文ブロックの構成」の復習からです。

サイドバーは、div.layoutContensAのなかのdiv.skinSubA, div.skinSubAreaの下、およびdiv.layoutContensBのなかのdiv.skinSubB, div.skinSubAreaの下に、同じ構造で入っていることを見てきました。そのブロックは、div.skinMenu/div.（※各サイドバークラス）の形でクラス指定されています。

概念図は、右図の通りです。

それぞれのブロックへのアクセス方法

このクラス設定により、全サイドメニュー共通、幅の狭いサイドメニュー共通、ワイドサイドメニュー共通、個別のサイドメニューそれぞれにデザイン設定ができるようになっています。

概念図では省略していますが、div.skinSubA, div.skinSubAreaおよびdiv.skinSubB, div.skinSubAreaは、内側にdiv.skinMenu2をもつ2重構造になっています。

それを踏まえて、それぞれの設定へのアクセス方法を見てゆきます。

全サイドメニュー共通の設定

div.skinSubArea { /* 全サイドメニュー共通の設定。外側のブロック */
/* ここにスタイルを記述 */
}
div.skinSubArea2 { /* 全サイドメニュー共通の設定。内側のブロック */
/* ここにスタイルを記述 */
}

幅の狭いサイドメニュー共通の設定

div.skinSubB { /* 幅の狭いサイドメニュー共通の設定 */
/* ここにスタイルを記述 */
}

ワイドサイドメニュー共通の設定

div.skinSubA { /* ワイドサイドメニュー共通の設定 */
/* ここにスタイルを記述 */
}

個別のサイドメニューへの設定

div.（※各サイドバークラス） { /* 各サイドメニュー個別の設定 */
/* ここにスタイルを記述 */
}

※各サイドメニュークラス

デフォルトでタイトルに背景グレーの帯がひかれているメニューについて、各サイドメニューのクラスを表にしてまとめてみました。

メニュー名	クラス名
テーマ一覧	themeMenu
最近の記事一覧	recentEntriesMenu
月別アーカイブ	archiveMenu
カレンダー	calendarMenu
ブックマーク	bookmarkMenu
ランキング	rankingMenu
プロフィール	ProfileMemu
最近のコメント	recentCommentMenu
読者一覧	readerMenu
お気に入りブログ	favoriteMenu

これがわかっていれば、「各メニューを画像にする」、「各メニュー名の前にアイコンを配置する」といった設定も簡単にできますね。

訂正（2011年12月27日）

幅の狭いサイドメニュー（div.skinSubB）、サイドサイドメニュー（div.skinSubA）へのアクセス方法が逆になっていました。すみません！　本日訂正いたしました。

5つのレイアウトパターンを解剖する

「アメブロのレイアウトをチェックする」で見たとおり、CSS編集可能デザインでのレイアウトタイプは5種類あります。

その実現方法は実に単純で、htmlタグのなかでレイアウトパターンに応じたクラス指定を変更することで実現しています。

各レイアウトのボックス配置方法

アメブロのHTMLの基本構造については、小難しい記事カテゴリーの記事「アメブロのHTMLの基本構造」と「左右サイドバーと本文ブロックの構成」をご参照ください。

レイアウトパターン(1) 2カラム・メニュー左

htmlで指定されているクラスは、columnAで、次のように宣言されています（htmlタグは禁止タグのため、<>を省略しています）。


html lang="ja" class="columnA" xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#"

columnAクラス指定の部分が、レイアウトパターンに応じて、columnB、columnC、columnD、columnEと書き換えられるだけで、どのレイアウトパターンでもHTMLのソースコードは同じです。

レイアウトパターン(1)ではその構造は下記のように設定されています。


.columnA .skinMainArea {
	float:right;
	width:665px;
}
.columnA .skinSubA {
	float:left;
	width:300px;
}
.columnA .layoutContentsB {
	display:none;
}

div.layoutContentsAのボックス直下のdiv.skinMainAreaボックスがfloat:right;、div.skinSubAボックスがfloat:left;設定でそれぞれ665ピクセル、300ピクセルのwidth指定がされています。幅の狭いサイドメニューであるdiv.layoutContentBはdisplay:none;で非表示指定にされています。

(2) 2カラム・メニュー右

同様に、レイアウトパターン(2)のCSS設定です。


.columnB .skinMainArea {
	float:left;
	width:665px;
}
.columnB .skinSubA {
	float:right;
	width:300px;
}
.columnB .layoutContentsB {
	display:none;
}

div.layoutContentsAのボックス直下のdiv.skinMainAreaボックスがfloat:left;、div.skinSubAボックスがfloat:right;設定でそれぞれ665ピクセル、300ピクセルのwidth指定。レイアウトパターン(1)を逆にフロートしているだけです。幅の狭いサイドメニューであるdiv.layoutContentBはdisplay:none;で非表示指定にされています。

(3) 3カラム・右ワイドメニュー

(1)(2)と違って、サイドメニューが両方表示されるレイアウトパターン(3)のCSS設定です。


.columnC .skinMainArea {
	float:left;
	width:470px;
}
.columnC .skinSubA {
	float:right;
	width:300px;
}
.columnC .layoutContentsB {
	float:left;
}
.columnC .skinSubB {
	width:180px;
}

(2)との違いは、div.skinMainAreaボックスのwidthが470ピクセルとなっている点と、幅の狭いサイドメニューであるdiv.layoutContentBがfloat:left;で表示される点です。幅は、div.layoutContentB直下のブロックであるdiv.skinSubBに対して180pxの指定がされています。比較して見ると、記事のエリアにサイドメニューが割り込んできたような形になります。ブラウザは、まずdiv.layoutContentsBを左にフロートし、残ったエリアにdiv.layoutContentsAを配置。そのなかのdiv.skinMainAreaを左フロート、div.skinSubAを右フロートして表示します。

(4) 3カラム・左ワイドメニュー

レイアウトパターン(4)のCSS設定です。


.columnD .skinMainArea {
	float:right;
	width:470px;
}
.columnD .skinSubA {
	float:left;
	width:300px;
}
.columnD .layoutContentsB {
	float:right;
}
.columnD .skinSubB {
	width:180px;
}

(2)と(3)の関係と(1)と(4)の関係は、右フロートか左フロートかの違いだけで同じですね。

(5) 3カラム・右メニュー

最後に、右側に両方のサイドバーを配置するレイアウトパターン(5)のCSS設定部分です。


.columnE .layoutContentsA {
	overflow:visible;
}
.columnE .skinMainArea {
	float:left;
	width:470px;
}
.columnE .skinSubA {
	float:right;
	width:300px;
}
.columnE .skinSubB {
	float:left;
	margin-left:15px;
	width:180px;
}

まず、.layoutContentsA {overflow:hidden;}とされていた設定を上書きしています。div.layoutContentsA直下のdiv.skinMainAreaを470ピクセル幅で左側にフロートし、div.skinSubAを300ピクセル幅で右側にフロートしています。その親ボックスである.skinContentsAreaの幅は980ピクセルですので、間に空きができてしまいます。この部分にdiv.layoutContentsB直下のdiv.skinSubBを180ピクセル幅で左フロートさせています。冒頭の上書き設定は、この部分を表示するために必要なわけですね。div.skinMainAreaとの間隔を空けるために、div.skinSubBの左側に15ピクセルのマージン設定がされています。

単純だからカスタマイズが容易

こうしてみてみると、非常に単純な仕組みでレイアウト変更が実現されているのがよく分かります。

単純だから見通しもいい。加えて、複雑なカスタマイズにも耐えられるよう、冗長とも思える2重・3重のボックスの入れ子設定もされています。よくできていると思います。

<< 前ページ次ページ >>

やりますね！

2011年12月28日の状態

50ピクセル分広げています！

コンテンツ風の体裁で

簡単設置方法

デフォルトデザインとの違い

ヘッダ画像は2つ使ってます

画像の高さに注意してください

サイトのタイトル文字と説明文の設定

すでにある画像を読みに行く

カスタマイズの狙い

前回の記事内容と違う点

今回の学習テーマ

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

サイドバーを設定しているCSS

3つの箱の色

paddingとmargin

簡単カスタマイズ！ 背景の色を変える

それぞれのブロックへのアクセス方法

全サイドメニュー共通の設定

幅の狭いサイドメニュー共通の設定

ワイドサイドメニュー共通の設定

個別のサイドメニューへの設定

※各サイドメニュークラス

訂正（2011年12月27日）

各レイアウトのボックス配置方法

レイアウトパターン(1) 2カラム・メニュー左

(2) 2カラム・メニュー右

(3) 3カラム・右ワイドメニュー

(4) 3カラム・左ワイドメニュー

(5) 3カラム・右メニュー

単純だからカスタマイズが容易

簡単カスタマイズ！背景の色を変える