ブログタイトルとヘッダー画像が重なり見えにくい場合


ヘッダーは、

  • 文字
  • 写真


この2つで作ることができます。

両方とも、とても大事です。

例えば、

写真だけだと花屋なのか、フラワー教室なのかわからりません

写真だけならば、お花屋さんのブログなのか、フラワー教室のブログなのか、分かりません。

逆に、
『○○駅5分 フラワーショップ』
など文字だけならば、何のブログかは分かります。

しかし、良さがわからず、魅力に欠けます。

これが写真と文字両方あれば、何のブログかわかり、魅力も伝えやすくなります。

文字を画像化させずに、アメブロの基本設定で設定したブログタイトルをそのまま表示させた場合、写真と文字が重なって見えにくくなる事があります。

こんな感じで。
写真とタイトルが重なると見にくい
これだと文字の役割が果たされませんので、もったいないです。

このようにブログタイトルと、写真が分かれて表示されていると文字も見やすくなります。

写真とタイトルが分かれていると見やすい

以前のカスタム可能デザインの『ベーシック』では、ヘッダー画像の方で文字が来る余白の部分も作る必要がありました。

それが、CSS編集用デザインでは、CSSで設定可能です。

[クイックリンク] ⇒ [スキンCSSの編集] でヘッダー画像を入れる次のCSSを追加します。

/*ヘッダー画像*/
.skinHeaderArea {
background:url(画像URL) left bottom no-repeat; /*背景*/
height: 400px!important;/*高さ*/
}

画像URLの部分は、アメブロにアップロードしたヘッダー画像のURLに変えます。

●例えば、ヘッダー画像の高さが300pxだとします。
heightも300pxにした場合、上の例のように画像と文字が重なります。

●下の例では、ヘッダー画像の高さよりも、hegihtを100pxほど大きくします。
ヘッダーの範囲が400pxになりましたが、画像の大きさは300pxです。

画像URLの後ろにある left bottom で画像の基準を左下にすることで、ヘッダー画像の上に100pxほどの余白ができます。



その余白の部分に、ブログタイトルがくるという事です。
これで見やすくなります。

heightの数字は、環境に合わせて変えてみてください

2017年3月からのアメブロ常時SSL化に際しまして、「フリープラグイン」を使ったカスタマイズが利用できなくなる可能性があります
【追記あり】アメーバブログの常時SSL化に伴う仕様変更について|スタッフブログ
フリープラグインを使ったカスタマイズはせずに、CSSを使ったカスタマイズを行ってください

コメントを残す