ブログカスタマイズ　-ヘッダー編-

2014/03/15

ブログカスタマイズ　-ヘッダー編-

In: ひとりごと 3月 15, 2014 By: ゆう

前回までは背景のカスタマイズについて紹介して行きましたが、今回はヘッダーの挿入について紹介して行きたいと思います。

ヘッダーというのはこちら。

ブログの上部につけれる画像のことですが、これがあるのとないのとでは雰囲気が大きく変わってきますよね。
また、アメブロに元から用意されてるテンプレートでは

こんな感じでブログタイトルのフォントなどを弄れないのでちょっと物足りない人は、ヘッダーでオリジナルなタイトルを作ってそれと入れ替えてあげると結構見栄えのいいデザインになったりします。

というわけでまずは、ヘッダー画像の作成から。

Photoshopを開いて幅980pixel、高さ420pixelの新規ファイルを作成します。

幅はアメブロデザインの幅と同じ980pixelにしたほうが結構デザインしやすいです。
高さについては各自の好みで設定しましょう。

そして先に作った背景を挿入し、それにあったヘッダーデザインを作っていきます。
ネットで無料素材を検索し、多用すれば割りと作りやすいです。
また、自分がいいなと思うヘッダーデザインを色々参考にするのも上手く作っていくコツだと思います。

何事も最初は真似から始めたらいいですね。
ただ、そのまま使っちゃったら盗作になるのであくまでも配置の仕方や空間の取り方、フォントはどのようなものを使っているかなどを参考にしてみてください。

あとは背景を消して[web用に保存]すれば、

こんな感じでヘッダ画像が作成できました。

あとはCSSを弄っていくだけです。
前の章でも説明しましたが、まずはこの画像をアップロードしておきます。

そしてCSSの編集で

＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/

/* その他、拡張があれば記述 */

この部分に

/* ヘッダー画像変更CSS */
.skinHeaderArea{
height:ヘッダー画像の高さpx;
margin-top:-22px;
background-image:url(ヘッダー画像のURL);
background-repeat:no-repeat;
background-position:center top;
}

を挿入するだけ。
超簡単です。

赤字の部分をいじるだけであとは勝手に自分のブログにヘッダー画像が挿入できます。
また、

margin-top:-22px;

の部分は何のために-22ｐｘをしてるかというとこれが0pxだと、

このようにヘッダー画像が上からちょっとズレた状態で表示されるわけです。
なので-22pxを入力し、上にピタッとつけちゃいましょう。

また、このままではブログタイトルと説明がまだ表示されたままだと思います。

これではみっともないのでこの『ブログタイトル』と『ブログ説明文』もついでに消しちゃいましょう。
これもやり方は超簡単。

先ほど入力した

＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/

/* その他、拡張があれば記述 */

の部分に

/* ブログタイトルとブログ説明文を消す */
#header h1,.skinTitleArea{ /* ブログタイトルを消す */
display:none;
}
#header h2,.skinDescriptionArea{ /* ブログ説明文を消す */
display:none;
}

を挿入するだけです。

これでデフォルトの『ブログタイトル』と『ブログ説明文』は消すことができます。

というわけで今回のCSSを復習しておくと、
ヘッダー画像を挿入するのと
『ブログタイトル』と『ブログ説明文』を消すのは

＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/

/* その他、拡張があれば記述 */

/* ヘッダー画像変更CSS */
.skinHeaderArea{
height:ヘッダー画像の高さpx;
margin-top:-22px;
background-image:url(ヘッダー画像のURL);
background-repeat:no-repeat;
background-position:center top;
}