余白の調整(記事のタイトル) | アメブロをカスタマイズしよう!

アメブロをカスタマイズしよう!

最近、サイトの見栄えやSEO対策により、アクセスアップを図ろうとする傾向が顕著になってきました。そこで、その解決策の一つとして、アメブロのカスタマイズを研究してみようと思います。あなたのブログのご参考にしてくださいね。

ご訪問ありがとうございます。
人気ブログランキングの応援
をして頂けると励みになります。

ここをクリックしてくださいね。
ダウンダウン

人気ブログランキングへ



今回は、
記事のタイトルに関連する余白について考えてみましょう。



例えば、下図の場合、CSSは以下のようになります。

記事のタイトルに関連する余白/カスタマイズ前


[CSS]

#main .entry h3.title{
margin: 10px 20px 10px;/*①上位置10px②左右位置20px③下位置10px*/
padding:15px 10px 10px 20px;/*④上位置15px⑤右位置10px⑥下位置10px⑦左位置20px*/
}



上記の余白を見栄えよくカスタマイズすると、
例えば次のようになります。

記事のタイトルに関連する余白/カスタマイズ後


このCSSは、次の通りです。

[CSS]

#main .entry h3.title{
margin: 0 0 1px;/*上位置0px左右位置0px下位置1px*/
padding: 15px 0 0 10px;/*上位置15px右位置0px下位置0px左位置10px*/
}



上記のように、
marginpaddingの余白を調整することにより、
訪問者にとって見やすくなるように工夫してみましょうね。



今回は、以上です。



最後まで読んでいただき、
ありがとうございました。

人気ブログランキングの
応援クリックをお忘れの方は、
ここをクリックしてくださいね。
ダウンダウン

人気ブログランキングへ

クリックして戴けると、
とても励みになります。