アメブロのタイトル(ヘッダ)上の広告を目立たないようにする工夫

  • 投稿 : 2012-06-22
  • 更新 : 2013-05-13
※カスタム可能/CSS編集用デザイン(新スキン)用です


・サンプル1は、背景を設定するだけで実現可能です。
・サンプル2は、サンプル1にヘッダ広告を少し横にずらして、左側にロゴ(画像)をおいています。

サンプル1

デザインの変更のCSSの編集の最後に追加してみてください
.skinFrame{
 background:#F2EFEA url(背景画像のURL) left top repeat-x;
 z-index: 2;
}
サンプルに使用している背景画像です。
広告のサイズは、縦が90pxなので縦110px程度の背景画像を使用しました。
背景色は#F2EFEA の部分ですので、これを変更することで背景色を変更できます。

サンプル2

サンプル1に以下を追加することで実現可能です。
.headerBnr{
width:980px;
 background-image: url(ロゴ画像のURL);
background-repeat: no-repeat;
z-index: 3;
}

/*広告を横に移動*/
.headerBnrArea .ad_frame{padding-left: 225px;
}
サンプルに使用したロゴ画像はこれです。
横幅は200pxです。200px程度の大きさの画像がおけます。透過PNG(GIF)で作成して背景と重ねることもできます。

目立たなくするには?

1.広告自体をタイトルロゴに埋め込む
2.広告よりも大きいタイトル枠を広告下に設置

ビジネス系で使ってる人は、2番が多いようです。

スポンサーリンク