ブログデザインの変更の仕方は？（その2）

当『超入門』コーナーでは、アメブロデザインカスタマイズのいろはのいについて解説したいと思います。初級・中級・上級者へとステップアップしてゆくための基礎の基礎固めに役立つ記事になるように努力します！

前回の記事からの続編。ここからは、実践編です。理屈はともあれ、実際にやってみたいという方は試してみてください。失敗しても元に戻すのは簡単ですので、失敗を恐れずにチャレンジしてみてください！

チャレンジの準備

今回の課題は、「ブログタイトルエリアの見栄えを変えてみる」です。理屈は、「やってみよう！カスタマイズ」（初級者向け）や、「ちょっと難しいカスタマイズ」（中級者向け）で説明していますので、分かる方はそちらの記事もご参照ください。

いまは分からなくても、『超入門』記事を読み進めていくことで、そちらの記事内容も自然と理解できるようになると思います。ゆくゆくは、今回の実験（笑）による経験がモノを言うようになりますのでチャレンジする価値はあると思います。

作業に入る前に、データのバックアップについてのご説明です。【文字色変更】カスタマイズ準備編の「CSS編集を行う前に」という見出しの部分をご一読ください。ブログデザインを変更したり、エントリーする記事を検討したりするとき、データバックアップは必ず役に立つ必須の作業となりますので、何も考えずにこの作業ができるようになることが大切です。

あ、リンクについてですが、私はリンクについては別窓で開かずに、すべて同一ウィンドウで開くようにしています。その理由は、「ウェブサイトづくりのルールとされているから」です。別ウィンドウで開きたい時は、Windowsの場合なら、Shiftキーを押しながらマウスをクリックしてください！

実際にCSS編集をしてみる

【画像6】

では、作業の説明です。このカスタマイズで、ブログのヘッダ部分は【画像6】のように変更されます。背景の色はお好きに設定いただけるよう、最後にご説明いたします。

ヘッダー部分のカスタマイズ手順

前回の記事の【画像5】のページを開き、赤い四角のなかをどこかクリックする。
マウスを右クリックして（Windowsの場合）、「すべて選択」をクリック。もう一度右クリックして、「コピー」をクリック。
notepadなどのテキスト編集ソフトにデータを貼り付けて、データのバックアップを取る。貼り付け方は、マウスを右クリックして「貼り付け」をクリックするだけです。バックアップファイルの名前は「default.css」など、お好きな名前で結構です。

CSSデータのなかから、以下の部分を見つける。


/* (3-2) ブログヘッダー
--------------------------------------------*/


/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */

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

その部分を、次の内容で置き換える。以下のコードの最初の部分（/* (3-2)の左）をクリックして、マウスをエリアの最後までドラッグして、マウスを右クリック。「コピー」をクリックすればコピーできます。同じ要領で、今度はバックアップを取ったCSSファイルのほうで該当部分を選択して、マウスを右クリックして今度は「貼り付け」をクリックすれば内容の置き換えは完了です。黄色い文字の部分が変更する箇所になります。
```
/* (3-2) ブログヘッダー
--------------------------------------------*/


/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
	margin-bottom: 10px;
	background: Tomato;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
	padding:20px 20px 30px;
}
```
ここで、編集を終えたCSSファイルを別の名前で保存しておきます。たとえば、「mystyle_120105.css」など、日付が分かる形にしたり、「mystyle_120105ヘッダカスタマイズ.css」など、修正内容を分かるような名前にしておけば後で便利ですね。
編集を終えたCSSファイルの全データをコピーする。やり方は、2.の手順の通り。
【画像5】の赤い四角の中をどこか右クリックして「貼り付け」を選択する。
赤い四角の下にある［保存］ボタンをクリックする。

これで作業は完了です。［保存］ボタンの上の「表示を確認する」というリンクをクリックすれば、変更後のページが別窓で開き、その姿を確認することができます。

ヘッダーを元に戻す方法

変更直前の状態に戻すには、【画像5】の赤い四角の下の「編集前の状態に戻す」リンクをクリックすればよいのですが、google Chromeのようにこの機能がうまく働かないブラウザもあるようです。

そんな時に役に立つのがバックアップファイル。最初に保存したデータで赤い四角の枠内のデータを置き換えて、［保存］ボタンをクリックすることで、元の状態に戻すことができます。

ヘッダーの背景色を別の色にする方法

背景の色を決めているのは、5.の手順で置き換えたソースコードのなかのbackground: Tomato;の部分です。つまりいまは、Tomato色になっています。このTomatoの部分、様々な色が指定できます。googleで「CSS　色の名前」で検索すれば様々な参考サイトが見つかると思いますので、いろいろ試してみてください。

この部分の指定方法については、少し難しいですが「【文字色変更】カスタマイズ実践編」の記事中で説明していますので、ご参照いただいてもよいと思います。いまの段階では、理解できなくても問題ありませんので。

ブログのタイトルの位置と、ヘッダー部分とその下の間隔は、それぞれpadding:20px 20px 30px;とmargin-bottom: 10px;で指定しています。文字が黄色くなっていた部分です。この指定についても、少し難しいですが「サイドメニューをカスタマイズする！」という記事中で説明しています。同様にご一読いただければと思います。

「集客・アフィリエイトに役立つ」アメブロカスタマイズ講座