アメブロカスタマイズ

アメブロのヘッダー画像を設定する


アメブロのヘッダー画像を設定する




アメブロカスタマイズの松本です。

こんにちは。

今回は、『CSS編集用デザイン』を適用したアメブロのヘッダー部にヘッダー画像を設定する手順をご紹介します。

オリジナルのヘッダー画像はブログの看板ですので、良いヘッダー画像を作成して設定しておいてください。


アメブロのヘッダー画像を設定する手順



■まず最初に、①マイページ右上の『三』のようなボタンをクリックし、開いたメニューにある②『デザインの変更』をクリックします。


■『CSSの編集』ページが開いたら、『現在使用中のデザインCSS』の文字入力欄を、一番下までスクロールします。



■そして、以下のコードを『現在使用中のデザインCSS』の一番最後に追加する形で貼り付けてください。

/* アメブロヘッダー画像設定用CSS貼り付けコード */
.skinHeaderArea{
  height:300px;
  background-image:url(画像のURL);
  background-repeat:no-repeat;
  background-position:center top;
}



■ここで、一旦ページの一番上まで戻って、ヘッダー画像に設定する『画像のURL』をコピーします。


(ここがわからない場合は、ヘッダー画像用の画像をアップロードするをご覧下さい)

■再び、『CSS貼り付けコード』を貼り付けた位置に戻り、『CSS貼り付けコード』内の『画像のURL』と書いてある部分を削除して、その場所に、先ほどコピーしてきたヘッダー画像に設定する『画像のURL』を貼り付けてください。


■また、『height:300px;』の部分を実際のヘッダー画像の高さに変えてください。


ヘッダー画像の高さがわからない場合は、ひとまず『300』のまま置いておいて、設定後の状況を見ながら、ヘッダー画像の下の方が隠れる場合はより大きい数値に、ヘッダー画像の下に空白ができてしまう場合はより小さい数値に調整するといいと思います。

■『画像のURL』と『画像の高さ』を設定できたら、『保存』ボタンをクリックして設定を保存しましょう。


■保存完了はちょっとわかりにくいのですが、一番最後になっていた『現在使用中のデザインCSS』のスクロールバーが、一番上まで上がり、CSSの先頭が見える状態になれば保存完了と考えていいと思います。


■ただし、その時に、リクエストは既に処理中であるか無効ですという赤い文字が表示されたときは、保存されていませんので再度保存を試みてください。


■CSSが保存できたら、ブログを表示して確認してみましょう。


保存はちゃんとできたのに、表示が変わらないという場合は、F5キー(Windowsの場合)を押すなどして、ページを更新してみてください。

以上の手順で、『CSS編集用デザイン』の文字だけのヘッダーに、ヘッダー画像を表示することができますので挑戦してみてください。




関連記事


アメブロの画像アップロード方法と画像のURL取得方法
CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次
アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん



コメント(294)