こんにちは、サイト管理人の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] アメーバブログのグローバルメニュー設定のやり方へ進む
コメントを残す