アメブロカスタマイズ

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

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

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

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

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

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

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

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

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

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

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

管理画面→デザインの変更から、新デザインに対応した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を入れてください。 ヘッダーの高さは作ったヘッダーの高さに合わせて入力してください。

設置例

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

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

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

 

オシャレ&カンタンに作れるヘッダー画像の作り方

ブログやホームページに必要なものといえば、ヘッダー画像。 ヘッダー画像は、サービスのイメージを伝えるいわば看板のようなものです。 つまり、超重要! 自分で作る、デザイナーに作ってもらうなど、ヘッダーづ ...

続きを見る

  • この記事を書いた人
  • 最新記事
ヨリメグ

ヨリメグ

メール対応・資料作成・Webサイト管理・SNS運用・ライティングまでワンストップ対応できるクリエイティブ秘書&ブロガー。 ブログは、フリーランスお仕事系お役立ち記事を載せています。

おすすめ記事

1

確定申告の季節が近づいてきました。 ちなみに確定申告期間は2020年2月17日(月)から3月16日(月)になります。 確定申告をe-Taxで(電子申告)で行うと、青色申告は10万円の控除増加が期待でき ...

ヨリメグのペライチ 2

ペライチという1枚ページサイトに特化したサービスがあるのですが、そちらで秘書サービスに特化したサイトを作ってみました。 それがこちら↓ これこれ 結構上手に作れたのではないかと自画自賛。 内容がきちん ...

3

著作権が厳しい世の中になってきました。 フリー画像でもお仕事に関するものに使用する写真は「商用フリー」写真であることが利用の条件です。 ネットサーフィンをしていて見つけた商用利用可能なフリー写真サイト ...

4

インターネットで写真やイラストを販売することで、収入を得るストックフォト。 最近では、トッププレイヤーは月30万以上の収入を得ている方もゴロゴロいるそうです。 今回は、ストックフォトについてご紹介しま ...

5

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

-アメブロカスタマイズ
-,

Copyright© イロドリワークス|オンライン秘書・アシスタントサービス , 2020 All Rights Reserved.