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

Pocket

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

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

 

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

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

前回記事:アメーバブログのヘッダー画像を綺麗に作成する

 

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

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

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

 

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

このツールを使えば、すぐに設定できます。

この方法については、「1日3分でアメブロのアクセスを大量に集める方法」という記事で解説しています。

 

ヘッダー画像の設置手順

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

 

まずはアメブロのデザインを、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に変えてくださいね。

これでヘッダー画像は設置完了です。

 

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

それでは。

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

Pocket

コメントを残す

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