意外と知らない？はてなブログで絶対やるべき4つのカスタマイズ
（追記：現在のブログデザインとはだいぶ違います。ご了承下さい）
一体このブログはどこを目指しているのでしょうか？
イギリスの王女の話とKindleのセール記事の後は「はてなブログのカスタマイズ」記事です（苦笑）
ただのカスタマイズ記事だとつまらないので、今回は「意外とやっている人が少なそう」なカスタマイズを4つ紹介したいと思います。ちなみにこのブログは全部やってますよ〜。
文字サイズを変える
まあコレが1番書きたかったことです。はてなブログって、ちょっと文字が小さくて読みづらい気がしませんか？特にスマホ版。このままではユーザビリティが悪いですよね。
そこで、コピペで簡単に文字のサイズを変える方法をご紹介。
参考にしたのはこちらの記事。
まずはPC版の文字サイズを変更します。デザイン→カスタマイズ→デザインCSS。
デザインCSSに以下の記述。コピペでOKです。
.entry-content {
font-size:◯◯px;
}
◯◯には文字サイズを記載します。このブログのPC版は20で設定していますが、もう少し小さくてもいいかもしれません。
次にスマホ版の文字サイズ。デザイン→スマートフォン→ヘッダー→タイトル下。
タイトル下には以下の記述。先ほどと少し違うので注意です。
<style type="text/css">
.entry-content {
font-size:◯◯px;
}</style>
これでおしまい。このブログのスマホの文字サイズは15pxですが、14~16辺りでお好みで調整するといいと思います。
GoogleAdSenceをリード文の後ろに
続いてはGoogleAdSenceについて。導入している方も多いと思います。
このブログでは、アドセンスを「リード文の後ろ」に設置しています。有名ブログでもよく設置している方が多く、事実このブログでも1番クリック率が高い場所です。
今回は、これを自動で設置する方法をご紹介します。
参考にしたのはこの記事。
デザイン→カスタマイズ→記事→記事下。
以下のコードをコピペで記述。なお、「広告」のところはこのブログでは「スポンサードリンク」に変更しています。
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<p>広告</p>
<!--ここに自分のアドセンスのコード-->
<p> </p>
</div>
スマホ版も同様。ただし、レクタングル（大）はスマホでは横揺れの原因となってしまいますのでNGです。
見出しを変更する
これは結構有名かも。見出し（h3,h4タグ）をオリジナルのモノにカスタマイズする方法です。
参考にしたのはこちらの記事。（はてなブログの中で最もカッコいいブログです。ぜひご一読を！）
デザイン→スマートフォン→ヘッダー→タイトル下。
以下を記述。
<style type="text/css">
.entry-content h4 { color: rgb(59, 66, 126);/*文字色*/
background: rgb(243, 242, 252); /*背景色*/
padding: 10px 10px; /*見出しまわりのスペース 上下、左右*/
border-left: 9px solid rgb(97, 101, 134); /*見出し左の線*/}
</style>
ちなみに、当ブログの場合はこんな感じの記述。h4（中見出し）の他に、h3（大見出し）もデザインを変更しています。
シンプルに下にドットで線を引いているだけですが、なかなかいい感じ！（だと個人的にはおもっています）
<style type="text/css">
.entry-content h3 { color: rgb(59, 66, 126);/*文字色*/
background: rgb(255, 255, 255); /*背景色*/
padding: 10px 10px; /*見出しまわりのスペース 上下、左右*/
border-bottom: 3px dotted rgb(97, 101, 134); /*見出し左の線*/}
.entry-content h4 { color: rgb(59, 66, 126);/*文字色*/
background: rgb(255, 255, 255); /*背景色*/
padding: 10px 10px; /*見出しまわりのスペース 上下、左右*/
border-bottom: 3px dotted rgb(230, 230, 250); /*見出し左の線*/}</style>
追記
現在はちょっと見出しのデザインも変更しています。以下の記事を参照。
コピペ一発ではてなブログ見出しをカスタマイズ！ちょっとの工夫で印象が格段に変わる！ - Yukihy Life
メニューバーもどきを設置する
はてなブログは、メニューバー的な機能がありません。メニューバーが無いと、ページ/セッションがイマイチになってしまいます。そこで、当ブログではメニューバーもどきのモノをスマホ版で設置しています。
今のところ「劇的に数値が改善した！」というほどでもありませんが、まあ無いよりはマシだと思うので一応設置方法をご紹介。
デザイン→スマートフォン→ヘッダー→タイトル下。
このブログの場合は、以下の記述をしています。各自URLと画像をご用意下さい。
変更箇所は太字になっている部分です。また、サイズに関しては6個並べる場合はこのままで大丈夫ですが、もっと少なくor多くする場合は随時変更していただければと思います。
<a href='カテゴリのURL' target='blank'><img id='名前' src='画像URL' alt='名前' width='46' height='45'></a>
ただし、画像の読み込みの際に時間がかかるなどのデメリットもありますので、そこはよく考えて設置したほうがいいかと。
追記
現在はデザインを変更しています。詳しくは以下の記事。
まとめ
はてなブログは、デフォルトのままだとデザインに差がつきにくいため（特にスマホ）他のブログとの差別化に困ったりします。
上手にカスタマイズして、自分なりのブログを作ってみるのはいかがでしょうか？
今回参考にさせていただいた皆様、有益な情報をありがとうございます！！
