今回はアメブロにヘッダー画像を使う方法と設置したヘッダー画像をクリックしてトップページへ行けるようにリンクを設置していきます。アメブロのブログの幅を変更していない前提で進めます。
さて、初期状態ならブログの幅は1120pxになっています。そのため、ヘッダーに使う画像サイズは1120pxの幅の物を用意するとピッタリになりますので、素材（画像や写真）を探してペイントなどでサイズを変更しておくと良いです。
画像がない場合はフリー素材で探してもいいですし自分で撮影した画像でも大丈夫です。
ヘッダー画像を用意してない方・自分でデザインできない方
ヘッダー画像を用意してない方、デザインがうまくできない方は「ココナラ
」で依頼すると専門家の方に作成依頼できます。
ココナラはいろんな専門家にネットで依頼できるスキルマーケットです。
2,500円くらいからでも本格的なヘッダー作成してくれる方もいます。
それぞれ作成者の評価なども見れますので参考にしてみてください。
ヘッダー画像を設置する手順
まずブログの幅のサイズの画像を用意したら画像をアップロードしていきます。
アメブロのマイページから「ブログ管理」⇒「デザイン設定」⇒「CSSの編集」をクリック。
CSS編集のページに「ブログデザインヘッダ・背景用画像の追加」という項目があるのでここで「参照」をクリックしてファイルを選択し「アップロード」をクリック。
アップロードすると「この画像のパス」とかかれたURLが表示されているのでこれをコピーしてメモ帳等に貼り付けておきます。
ヘッダーに画像を設置する
画像のパスをコピーしたらCSSの一番下に次のコードを追加します。
/* アメブロヘッダー画像設定 */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(画像のパスURL);
}
/* ヘッダーの高さを設定する */
.skin-bgHeader a[href*="//ameblo.jp/"] {
height: 300px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
/* ヘッダーの背景色 */
.skin-bgHeader {
background-color: fff;
}「画像のパスURL」という文字を消して（）の中に先ほどの画像のパスURLを貼り付けて「保存」すれば完成。
ここの「height:300px」はヘッダー画像の高さです。お好みで変更して下さい。
こんな感じになりました。
ちなみにヘッダーの背景色というのは赤枠で囲んだこの部分です。
以上でアメブロのヘッダー画像設置は完了です。
コメント