ブログのレイアウトを変更してみた その1

正直に白状すると、このブログの訪問者数はかなり少ない現状にある。
まあ、月に1回記事を更新するかしないかレベルだし、最近は記事に力が入っていないような……。正直、アフィリエイトで儲かるなどとは思っていなかったけれども、こういう記事を書くのは嫌いじゃない。
そこで居て副収入が入るのであれば、もっと嬉しい。
ついでに白状すると、我が家の経済状況もあまり宜しくないので、僕のお小遣いをアップ、等とは口が裂けても言えない。だから少しでもお小遣いが手に入れば嬉しい、といった理由もあったりする。

そんなわけで、気分一新、と言う積もりで色々と手を加えることにした。


<手始めに>

とは言ったものの、稼げるノウハウがあるわけでもないし、手探りでやっていくしかないのが現状である。
で、最初にどうしようか?と考えたら、やっぱり見栄えを気にすることを最初に考えることにした。となれば、レイアウトの変更である。

(見やすさの向上)

見易いとはどういう事か?を考えてみよう。
今まで、僕は記事を書く際に「見出し」としてポイントの違う文字を使っていたが、ここをまず工夫してみようと思う。<hr>とポイントを変えるだけでは、見易さの点で劣る様に思うからだ。

で、せっかくカスタマイズが容易なbloggerを使っているのだから、<h5>タグ辺りを利用することにする。

(タグを弄るには)

ここからはCSSの知識がないとちょいと辛い。
bloggerには「テンプレート」の編集で「HTMLの編集」が使える。が、直接テンプレートを弄るのもアリではあるが、カスタムCSSを使うという方法もあるらしい。
僕はカスタムCSSを使ったことがないので、HTMLの編集から.postの内容を変えることにした。
h5{
font-size:120%;
border-top:solid 1px #999999;/*上に線を入れる設定*/
border-left: 9px solid #0C2C4C;/*文字の横に付箋のようなマークを入れる*/
border-right:solid 1px #999999;/*右に線を入れる設定*/
border-bottom:solid 1px #999999;/*文字の下に線を入れる設定*/
width:515px;/*見出しの横幅*/
padding-left: 5px;/*文字の左にスペース*/
color:#3C333C; /*文字の色*/
}
.select{
    padding-top:8px;
    padding-left: 5px;/*文字の左にスペース*/
    font-size:10px;
    color:#999999;
    display: block;
}
と、このように<h5>タグの内容を変更してやる。
これは、kabo takeというサイトの見出しサンプル13を利用させて頂いている。

すると、こんな感じのタグになる。
変更後のタグ
おお、良い感じだ。

もうちょっと色々変更してみよう。

そう言えば、文字も大きくしたいところなので、.postの内容を少し変更してみる。デフォルトで110%になっていたので、150%に変更。文字間隔も広めにして、1.4から2にしてみた。
.post-body {
  font-size: 130%;
  line-height: 2;
  position: relative;
}

まあ、今後はちょこちょこと見易さ改善をしていきたいと思う。




このブログの人気の投稿

ハンドブレンダーをオススメ

エーハイム2213、呼び水でホースを口で吸うのが嫌な人の為に