にちじょうみだれがき

役立ち情報から雑記まで幅広いジャンルを展開するブログ。

飽き性な僕がブログレイアウトを変更しました

当ブログもぼちぼちアクセス数が増えてきました。
もっともっとアクセスを伸ばしたいですが、アクセスお化けにならないように気をつけようと思う@chihayuu_です。

ブログレイアウトは、書き手の顔と言ってもいいのではないでしょうか。
その顔を多くの人に見てもらうなら、整えておいた方がいいと思います。ブサメンよりイケメンがいいですよね。


イケメン爆発しろ


あれこれ言ってますが、デフォルトに飽きただけです。

前置きはこれぐらいにしておいて、変更した点を書いていきます。
変更点に気づいた人もいるかもしれませんが、作業記録として書いていこうと思います。

f:id:ChihaYuu:20141002211423p:plain

変更点


・アドセンスの設置位置

これはやっぱり1番目立つ位置に設置します。
今まではタイトル下、サイドバー中段、記事下に設置してました。
今回の変更でヘッダー下、サイドバー最上段、記事下(ここは変わってません)に変更しました。

変更の意図は、絶対に目にする場所にアドセンスを設置したかったからです。
これで収益上がるかな(ゲス顔)

参考サイト


アドセンス広告のクリック率と単価(収入)を上げるための配置と必要な考え方 | らふらく^^ ~ブログで飯を食う~


・アドセンスラベル表示色変更

なんだか「スポンサーリンク」の文字が浮いて見えたので、表示色を変更しました。規約違反にならないか心配ですが大丈夫でしょう。


こんな感じの簡単なコードを書きました。

HTML

<div class = "Label">
  <p>スポンサーリンク</p>
</div>

CSS

.Label{
  /*好みの表示色*/
  color:#d3d3d3;
  /*表示位置調整*/
  margin-left:???px; /*???は調整値*/
}


・記事タイトル下ソーシャルボタン

アドセンスをこの場所からなくした変わりにソーシャルボタンを設置しました。ソーシャルメディアでの拡散が増えることを狙っています。

参考サイト


記事タイトル下にソーシャルボタンを設置する一番簡単な方法!FacebookやTwitterボタンを設置してソーシャルメディア対策を。 - クレジットカードの読みもの

忍者おまとめボタンで作成したソースを記事上にそのまま貼り付けたら、ボタンとタイトルが重なったのでCSSで修正しました。

デザインによってこの辺りは変わるでしょう。

CSS

/*記事タイトル下ソーシャルボタン位置修正*/
.ninja_onebutton{
   margin-top:20px;
}

まとめ

今の所はこんな感じでやってます。
まだ、何もかも勉強途中でデタラメレイアウトですがこれから煮詰めて行こうと思います。

HTML&CSS標準デザイン講座 【HTML5&CSS3対応】

HTML&CSS標準デザイン講座 【HTML5&CSS3対応】

レイアウトばかりに力入れずに記事に力入れろよ!って感じですが、見た目って大事なんですよね。納得の行く見た目になれば自然と記事を書く気力がわいてきます。HTMLやCSSを、もっと勉強しようと思う今日この頃。

この記事を気に入っていただけたら、はてなブックマークやツイッター等でシェアしていただけると、非常に嬉しく励みになります。

広告を非表示にする