【新デザイン】アメブロ・カスタマイズ『ヘッダー画像の設置』

 

ブログとも言える『ヘッダー画像』
今回はヘッダー画像の設置方法を教えちゃいます!!

 

■新しいCSS編集用デザイン対応

2016/3/8以降使えるようになった新しいCSS編集用デザイン
※プロフィール画像が丸いタイプ

【新デザイン】
YouTubeばぶチャンネルみてね!(^◎^)ばぶースタンダード:旧デザインに近いベーシックなタイプ
YouTubeばぶチャンネルみてね!(^◎^)ばぶータイル:記事一覧の写真のインパクトから誘導
YouTubeばぶチャンネルみてね!(^◎^)ばぶーリスト:記事一覧の読みたくなるタイトルから誘導

 

▽早速、貼付コードはこちら(CSS編集の末尾に貼付ください)

/* ヘッダーの背景色とヘッダー画像を設定する */
.skin-bgHeader {
  background: no-repeat scroll center;
  background-color: #FFFFFF;
  background-image: url(画像URL);
}
/* ヘッダーの横幅を設定する */
.skin-bgHeader [amb-layout="headerInner"] {
  width: 1120px;
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [amb-layout="headerInner"]>a {
  height: 300px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
  display: none;
}

【コード編集ポイント】
●背景のカラーコード(現在は[#FFFFFF]白の設定)
※カラーコードを調べるならこちらが便利です ⇒ http://html-color-codes.info/japanese/
●画像URL(画像の保存先を指定ください)
●画像の横幅(新デザインでは基本1120px)
●画像の高さ(自由に変更してください)

宜しければ、Facebookページに『いいね!』をお願いします

20170423 大阪・あべの
ママでも1日でホームページが作れちゃう講座

~WordPressでシンプル可愛いサイトを作っちゃおう~

ABOUTこの記事をかいた人

流れ構築プロデューサー岩本あきら

起業家、サロン経営者、人気カウンセラー、セラピスト、飲食店などにブログ、SNSを使ったマーケティング、コンサルティングを行っています。WEBサイトの制作、WEBツールの活用でサポートを行っています。