2014年02月25日

メインブログのためのCSS調整【第2回】【アドセンスのビッグバナーをタイトル下に設置する】


 今日は早速ですがGoogleアドセンスのビッグバナーをタイトル下に設置してみました。「アドセンスをやっている方のヒントになればいいな」と思って書いていきます。


 通常は何も考えずに<デザイン>→<コンテンツ>で自由形式のコンテンツを設置しても、タイトルのイラストに重なってしまって見栄えがよくありません。


 どこを弄ったかだけメモしていきますので、皆様で自分の環境に合うように改変してください。


 調整中にタイトルの位置がずれましたので、合せるために調整しました。

h1 {
margin:0px;
padding-top:150px;
padding-bottom:0px;
padding-left:30px;
font-weight:bolder;
font-size:24px;
font-family:Verdana;
}

 タイトルの白が見にくかったので「どうせ見にくいなら!」と、背景のイメージに合わせて薄いピンクにしてしまいました。

h1 a{
color:#ffcccc;
text-decoration: none;
font-weight:bolder;
}

 次は肝心の「#banner」領域の調整です。バナー領域を下に拡大することで、本文や左カラムに重ならないように設定し調整しました。

#banner{
background-image:url(http://blog.seesaa.jp/img/bg/memories/head.jpg);
background-repeat:no-repeat;
background-position:50% 0%;
padding-left:30px;
margin:0px;
text-align:left;
height:310px;
}

 タイトル下のブログの説明部分もタイトルに合わせて薄いピンクに変更し、書き出しの位置をタイトルに合わせて調整しました。

.description {
color:#ffcccc;
font-family:Verdana;
font-weight:bold;
padding:0px 10px 0px 30px;
}

 CSSを弄ったのは以上です。次にレイアウトが崩れないように、「コンテンツ」でアドセンスのバナーを設置します。


 私は次のように「#banner」領域に『自由形式』のコンテンツボックスを使って設置しています。

20140225.png

 まずスペース調整用のコンテンツの中は、こう書いています。

<center>
<a href="http://*********.up.seesaa.net/image/*****.gif" target="_blank">
<img border="0" alt="spacer.gif" src="http://**********.up.seesaa.net/image/*****-thumbnail2.gif" width="1px" height="38px">
</a>
</center>

 これは幅:1px、高さ:38pxの透明な gif画像がブログ説明の下に入って、アドセンスのバナーを押し下げている感じです。

 元の画像もこのサイズで作ればいいのでしょうが面倒です。そこで「縦×横」が「1px×1px」の画像を作って縦に拡大しています。つまり、heightの数字を弄れば、1px単位の微調整が可能ということです。



 そしてアドセンス用の自由形式コンテンツを作って、アドセンスのタグを挿入します。

<center><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ******************* -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-****************"
data-ad-slot="**********"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></center>

 これで完成です。今回弄った領域の高さやデザイン調整用の透明gifブロックの大きさを調整すれば、自分好みのレイアウトに近づくと思います。


 あとは試行錯誤しながら頑張って、自分のサイトに合ったレイアウトにしてください。






posted by 要 at 22:46| Comment(0) | デザイン CSS | このブログの読者になる | 更新情報をチェックする

2014年02月24日

メインブログのためのCSS調整【第1弾】【文字の大きさと間隔】


 HTMLやCSSの素人である私『要(かなめ)』が独学でSeeSaaブログのデザインを自分好みに調整していきます。皆様よろしくお願いします。



 通常のままですと、この【楓デザイン】は文字が小さく文字間が詰まっています。デザインとしては格好良いのですが、私には少々読みにくいので文字を大きめにして、文字間も広くとってみます。


 今回、オリジナルのCSSから変更したのは、『.title』と『.text P』の部分です。色を赤色に変えている所を変更したり付け加えています。


.title{
margin-top:0px;
margin-bottom:0px;
font-weight:bold;
font-size: 17px;
letter-spacing: 0.5pt;
line-height:150%;
}

 ブログの記事タイトルを「17px」に大きくしました。それに伴って文字間を「0.5pt」に、行間を「150%」に広げてあります。



.text P{
font-size: 14px;
letter-spacing: 0.5pt;
margin-top:0px;
line-height:19px;
}

 記事本文は、Pタグを使って <P>〜</p> と書いていらっしゃる方は、この『.text P』の部分を弄ればよいと思います。


 記事の方も文字のサイズを「14px」に大きくしています。文字間は「0.5pt」に、行間も「150%」に広げています。



 皆様でご自身が見やすいように、試行錯誤しながら調整して変更していくとよいと思います。



posted by 要 at 14:32| Comment(0) | デザイン CSS | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。