[STEP3-6] アメーバブログヘッダー画像の設置

Pocket

アメブロのヘッダー画像の設置の仕方

 

メブロの設定も疲れてしまいますよね。お疲れ様です。

こんにちは、サイト管理人のYUです。

今回も記事を見ていただきありがとうございます(^ω^)

 

さて、今回は前回作ったヘッダー画像を、実際にアメブロに設置していきます!

まだヘッダー画像を作成していない方は、前回の記事を参考にして作ってみてくださいね。

前回記事:ヘッダー画像の作成はこちら

 

早速ヘッダー画像の設置方法ですが、実は2通りあります。

・便利な多機能ツールを使って2分で設定する方法

・手動で頑張って設定する方法

 

多機能ツールを使う場合は有料になってしまいますが、他にもアクセスアップなどアメブロの運営に非常に役立つツールです。

こちらを使えばすぐに設定できます。

超便利なアメブロ用多機能ツールを使って簡単に設置する方法はこちら

 

 

ここでは手動で設定する方法を解説しますね!

 

まずはアメブロのデザインをcss編集というモードにする必要があります。

アメブロのデザインは一般的にはボタン一つで完了になるのですが、このcss編集では一つ一つ手動でやる必要があります。

 

ヘッダー画像を設置できるのはこのcss編集のみで、見やすさも良くなるのでこれを使います。

 

css編集にするには、まずアメブロマイページを開き、画面右上の設定→ブログデザインのデザイン変更をクリックします。

 

デザイン変更画面で下の方にスクロールし、「ほかのカテゴリーからデザインを探す」の中の「カスタム可能」をクリックします。

 

出てきたデザイン一覧の中から、「css編集用デザイン」をクリックし、「適用する」をクリックして設定します。

ここではスタンダードとタイルの2種類がありますが、スタンダードで大丈夫です。

 

 

そうしたら、ブログ管理→デザインの変更から、cssの編集をクリックします。

 

まず、ファイルを選択→アップロードでヘッダー画像をアップロードします。

 

cssの入力で、cssタグの最後に

 

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

 

こちらを入力します。

途中、“アップしたヘッダー画像のURL”のところを画像のurlに変えてくださいね。

これでヘッダー画像は完了です!

 

では、また次の記事でお会いしましょう!

それでは\(^o^)/

次記事:[STEP3-7] アメーバブログのグローバルメニュー設定へ進む

 

友だち追加

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です