MENU

アメブロ ヘッダー画像の入れ方(新デザイン)

2020 7/02

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

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

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

目次

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

その前に、ブログのヘッダーを作ります。

ヘッダーのサイズですが、横は1120px、縦は自由です。

ただし、350px以上あった方が見栄えが良いかと思います。

ヘッダーの部分全体にデザインを設定するのであれば横は2000px、縦は自由で設定します。 (解像度が異常に広いPCの場合は厳しいですが…)

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

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

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

ブログのヘッダーデザインをアップ。

この画像のパスというところに、画像のURLがアップされますので、あとでコピーして貼り付けます。

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

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

設置例

こんな感じで設置されました。

カンタンなので、ヘッダー画像がある方はぜひお試しください!

ヨリメグのアイコン画像ヨリメグ

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

アメブロのデザインテンプレートを販売中です。全体のデザインを統一していますので、チェックしてみてくださいね

この記事が気に入ったら
フォローしてね!

この記事を書いた人

メール対応・資料作成・Webサイト管理・SNS運用・ライティング・デザインまでワンストップ対応できるクリエイティブ秘書&ブロガー。

ブログは、フリーランスお仕事系お役立ち記事を載せています。
お仕事依頼はこちらから

目次
閉じる