アメブロのヘッダーのカスタマイズを学習&実践 | アフィリエイトで月3000万円目論む猫好き中年のメモ書き

アフィリエイトで月3000万円目論む猫好き中年のメモ書き

インターネットビジネス(主にアフィリエイト)月収3000万円を目論む猫好き中年のブログです。備忘録やたまに猫のことなど。






どうも、うふのわーるです。

ちょっとご無沙汰しておりました。


まあ、世間的にもお盆ということで

ブログを休んだ大義名分は立つのかなと

勝手に思っておりますが


久々に自分のブログを見ていたら

無性にデザインに物足りなさを感じたため

少し手を加えてみました。


さて、どこを変えようかと考えてみましたが

やはり変更するのであれば

見栄えのする「ヘッダー」に、ということで早速検索。


結構、皆様ご丁寧に解説してくださっているので

御蔭さまで非常にスムーズにカスタマイズ完了。


うん、うん。


思いのほか良い具合で

なかなかの自己満足度ですが

忘れないように備忘録を。



【ヘッダーカスタマイズのポイント】


・ヘッダー用画像の作成(横:980px/縦:300px)

・カスタム可能なテンプレートへ変更

・サイズを適正に調整した画像をアップし画像パスをコピー

・編集画面でcssの下記部分を変更


■■■■■■■■■■■■■■■■■■■■■■■■■■

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

ここの部分を削除し(※1)をコピー&ペースト

/* (3-3) コンテンツエリア
--------------------------------------------*/

■■■■■■■■■■■■■■■■■■■■■■■■■■



(※1ここから)赤字のみ

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background-image: url(コピーした画像のパス);
background-repeat: no-repeat;
background-position: center top;
width: 980px;
height: 300px;
margin-bottom: 15px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea {}

/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea {
text-indent: -9999px;
}

/* クリックするとブログのトップに移動 */
.skinTitleArea a.skinTitle {
width: 980px;
height: 300px;
display: block;
}

/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea {
text-indent: -9999px;
}

(※1ここまで)


以上。


ちなみに(※1)内の

margin-bottom: 15px;

↑は、ヘッダーとブログコンテンツの間隔指定なので

お好みで入れてもいれなくてもOK。



美意識やこだわりが強い人であれば

画像の選定に時間がとられるかもしれませんが


編集作業自体は所要時間は30分もかからずできるので

お手軽に気分転換したいという場合にはもってこいの方法かと。


(賢明な読者の皆様は大丈夫かと思いますが念の為。

ヘッダーも然り、ブログで使用する画像は

自前か著作権フリーなものにすることをお忘れなく。)


CyberAgentさんも無料で使用できるデザインを

いくつも用意してくれてはいますが

誰もが同じものを使っているということに我慢がならず

既存のテンプレートデザインでは不服だという人は


ささっと変えてしまった方が

記事の更新にも身が入るのではないでしょうかね。


格好から入るというのも、結構大事だいじ。


おっ、己へのプレッシャーですな(笑)