こんにちはパーフェクトマスター アメブロカスタマイズ講座のakiです。
アメブロ カスタマイズで初めにつまずいてしまう所と言えば、
ヘッダー画像を追加して表示させる事ではないでしょうか？
あなたのアメブロにヘッダー画像をつけることによって、
来訪者に興味を持ってもらい、
ブログ記事をしっかりと読んでもらう事が出来るようになります。
その結果、
読者登録をしてくれたり、
あなたのファンになってくれる可能性が非常に高くなりますので、
アメブロにヘッダー画像がついていない場合は、
こちらの動画を参考にしていただいて、ぜひ設置してみてください。
STEP 1 アメブロをCSS編集用デザインに設定しよう
- メニューからアメブロをクリックします。
- 左メニューのデザインの変更をクリックします。
- 他のカテゴリからブログデザインを探すの中の「カスタム可能」をクリックします。
- CSS編集用デザインを選択します。
- 今回は2カラム・メニュー右でカスタムを行っていきます。
選択したら適用するをクリックしましょう。 - ブログを確認してみましょう。
STEP 2 アメブロのヘッダー画像を用意します。
- 今回はサイズを横幅980px × 縦幅380pxの画像を用意します。
- ブログ管理ページの左メニューから「デザインの変更」→ 「CSSの編集」をクリックしてください。
- ブログデザインヘッダ・背景用画像の追加が表示されますのでこちらに
ヘッダー画像をアップロードします。 - ヘッダー画像のURLが発行されます。この画像のパスの部分ですね。
- これでヘッダー画像のアップロードは完了です。
STEP 3 CSSを編集して、ヘッダー画像を表示させます。
- それではブログデザインCSSの編集画面から
「ブログヘッダー」と検索をかけてみてください。 - ブログヘッダーに背景画像を敷きたいときという部分が表示されると思います。
- ここの波括弧の中に以下のように記述します。
background: url(ここにヘッダー画像のURLをコピペします) no-repeat;
width: 980px;
height: 300px;
上記のように記述出来ましたら、「保存」をクリックして、
表示を確認してみましょう。
これではヘッダー画像が表示されました。
STEP 4 ヘッダー画像のタイトルを消す方法
- ヘッダー画像のタイトルを消したい場合は、
「その他、拡張があれば記述」の部分に以下のように記述します。
heder h1,header h2{
display: none;
}
上記のように記述できましたら、保存ボタンをクリックしてください。
表示を確認するとヘッダーエリアのタイトルを消す事が出来ています。
以上で、ヘッダー画像をアップロードして表示させる方法の解説を終了したいと思います。
これからも、アメブロカスタマイズについていろいろなテクニックを
シェアしていきたいと思いますので、どうぞよろしくお願いします。
わかない事がありましたらコメント欄よりお気軽にご連絡くださいね。
aki