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

Tweet

Pocket

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

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

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

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

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

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

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

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

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

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

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

ヘッダー画像の設置手順

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

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

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

ヘッダー画像を設置できるのはこのcss編集のみで、見栄えが全然違いますのでこちらを使います。

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

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

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

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

そうしたら、ブログ管理→デザインの変更から、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] アメーバブログのグローバルメニュー設定のやり方へ進む

Tweet

Pocket