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

お仕事ブログへのカスタマイズの第一歩は、ヘッダーの設置!
難しいのかな???と思うアメブロカスタマイズですが、ヘッダーやメニューバーなどはコツを押さえれば意外と簡単です。
ということで、早速ヘッダー画像の入れ方をお伝えします。
目次
アメブロカスタマイズ ヘッダー画像の入れ方
その前に、ブログのヘッダーを作ります。

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

管理画面→デザインの変更から、新デザインに対応したCSS編集用デザインを選択します。

丸が付いているものが、新デザインのものです。 その隣のリストタイプのものも新CSSなので使えますよ。

ブログのヘッダーデザインをアップ。
この画像のパスというところに、画像のURLがアップされますので、あとでコピーして貼り付けます。
CSS編集デザインに記載されているCSSタグの一番最後に下記を入れます
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /* ヘッダーの背景色とヘッダー画像を設定する */ .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; } |
設置例

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

カンタンにヘッダーを作るには、オシャレな画像を一枚用意して文字入れをするのがおすすめです!