お仕事ブログとしてアメブロを使う方にとって、既存デザインではなく、アメブロのヘッダーは自分のサービスのイメージに合ったものにしたいと思いますよね。

 

 

お仕事ブログへのカスタマイズの第一歩は、ヘッダーの設置!


難しいのかな???と思うアメブロカスタマイズですが、ヘッダーやメニューバーなどはコツを押さえれば意外と簡単です。

 

ということで、早速ヘッダー画像の入れ方をお伝えします。

 

アメブロカスタマイズ ヘッダー画像の入れ方

その前に、ブログのヘッダーを作ります。
 
 
ヘッダーのサイズですが、横は1120px、縦は自由です。
 
ただし、350px以上あった方が見栄えが良いかと思います。
 
ヘッダーの部分全体にデザインを設定するのであれば横は2000px、縦は自由で設定します。 (解像度が異常に広いPCの場合は厳しいですが…)
 

作り終わったら、設置をします。

管理画面→デザインの変更から、
新デザインに対応したCSS編集用デザインを選択します。
 
 
管理画面→デザインの変更から、新デザインに対応したCSS編集用デザインを選択します。
 
 
赤線が付いているものが、新デザインのものです。
その隣のリストタイプのものも新CSSなので使えますよ。
 
 
ブログのヘッダーデザインをアップ。
 
この画像のパスというところに、画像のURLがアップされますので、あとでコピーして貼り付けます。
 

CSS編集デザインに記載されているCSSタグの一番最後に下記を入れます

↓ここから↓
 
/* ヘッダーの背景色とヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center;
background-color: 【背景色】;
background-image: url(*);
}
/* ヘッダーの横幅を設定する */
.skin-bgHeader [data-uranus-layout="headerInner"] {
width: 1120px;
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [data-uranus-layout="headerInner"]>a {
height: ヘッダーの高さを入れるpx;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}
 
↑ここまで↑
 

background-image: url(*);のところに、先ほどアップされた画像のパスのURLを入れてください。
ヘッダーの高さは作ったヘッダーの高さに合わせて入力してください。

 

設置例

 
こんな感じで設置されました。
カンタンなので、ヘッダー画像がある方はぜひお試しください!
 
 

 

 

オンラインアシスタント・秘書 事務局代行 デザイン制作

irodori works

 

提供メニュー制作実績お問い合わせ