《アメブロカスタマイズ》新CSS対応＊ヘッダー画像の変更②

いつもいいねや読者登録

ありがとうございます。

すごく嬉しいですっ

おはようございます！

あか子です

アメブロで集客をするためには、
ヘッダー画像のカスタマイズは必須

と言っても良いでしょう！
　
まだ変更していない人は、

ぜひ実施する事をお勧めします。
　
なぜなら。。。
　
ページの第一印象は2.6秒で決まるからです。

前回は1番簡単なヘッダー画像の変更方法

をご紹介しました

今回は

②自分でCSSを編集してデザインをしていくもの

ブログタイトルと説明文のテキストを非表示

にしてオリジナルのヘッダー画像を表示します

ブログ管理 → デザインの変更

↓

↓

↓

↓

カスタム可能のテンプレートを表示させる

ここまでは前回同様です

↓

↓

その中からさらに

css編集用デザインを選択します

↓

↓

レイアウトを決めて【適用する】をクリック。

↓

↓

次に【CSSの編集をする】に進みます。

ヘッダー画像をアップロードします

アップロードした画像の下に

画像のURLが表示されます。

このパス(URL)はコピペして使います

 

画面の下に進むとCSSの編集画面があります。

その一番下に【その他、拡張があれば記述】

という部分があるので、

下記のコードを貼り付けましょう。

※パソコンのメモ帳などに移して編集した方が安全です。

/* ヘッダー背景 */
.skin-bgHeader {
background-image:url(画像URL);
background-repeat: no-repeat;
background-size: 1120px;/*画像の横幅*/
height: 380px;/*画像の高さ*/
background-color: #f0ece2;/*背景色を変えたければここを変えます*/
background-position:top;
padding: 15px 0 15px 0;
}

/* ブログタイトル */
.skin-blogMainTitle {
display:none;
}

/* ブログ説明文 */
.skin-blogSubTitle {
display:none;
}

/* ヘッダータイトル */
.skin-headerTitle {
padding:0;
text-align: center;
height:380px;/*画像の高さ*/
}

*タイトル、説明文をヘッダーに画像として埋め込んだ場合の方法

↓こうなります

これで保存をしてブログを確認してみると、

きちんとヘッダーが表示されているはず

ぜひ、チャレンジしてみて下さいね

ご質問も気軽にどうぞ

すき間時間でお小遣い稼ごう！

---------------------------------

お小遣いサイトに登録する時は

safariなどの標準ブラウザから

登録してください

※紹介ポイントが付与されないことがあるそうです。

↓↓↓ポイントインカム↓↓↓
ネズ吉などイベント多くて楽しい?

 

 ↓↓モッピー↓↓

?

ポイントタウン            2iポイントサイト

         

ちょびリッチ                     ハピタス  
　         

プリぽん

?

　LINEPayカード
   
     　100円で2ポイント！超おすすめのプリペイドカード
　CASHｂ　ABB7B
     
     　レシートでポイントゲット！
　サンプル百貨店　wyszQAGZ
     
     　招待コード入力＆携帯番認証で500円クーポン！

        LINE＠友達登録で50円クーポン！

　GRL
        ここからの招待登録で800円分のポイント！
　副業まとめ　OY1FNMV8
        紹介コード入力で500円！毎日起動するごとに50円！
　検索ニュース＋　
        検索するのに使うだけでポイント！