はてなブログのデザイン変更まとめ CSSの見出し変更やアドセンス自動的挿入など個人的備忘録

はてなブログのカスタマイズ

検索して、試して、検索して。

この繰り返しで、はてなブログをうまく活用するための情報を収集しました。

まず、断っておきたいのが、他ブログのコードなどをコピペしてブログ内へ貼っています。

それは紹介しているブログが消えてしまっているケースが多々あったからです。

自分が使う目的で書きますので、ネタ元ブログへのリンクは入れます。

しかし、ネタ元ブログが消えない保証がないということで、ご容赦ください。

随時、カスタマイズで参考にしたものは、このページへ残していきたいと思います。

はてなブログの他のブログを作ってカスタマイズ実験しよう 

はてなブログの無料なら３つ、有料（PRO）なら１０個ブログが作れます。

一つ実験用ブログを作って、最初はそこへコードを貼って実験をすることがおすすめです。

現在、すでに更新しているブログに貼ってしまうとデザインが変なものとなったら大変です。

ワードプレスのような大幅改変ができないので、はてなブログでそこまで大きなトラブルはないと思いますが、くれぐれも安全運転で。

見出しに関して参考にしたもの

 見出しのデザインの参考にさせていただいたのはこのブログです。

現時点で、私が利用させていただいたのがペロっとめくれているというデザインです。

.entry-content h3 {
  padding: 6px 10px 6px 16px;
  position: relative;
  color: #fff;
  line-height: 1.5;
  background-color: #63b8cc;
}
.entry-content h3:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border-top: 12px solid #fff;
  border-right: 12px solid #2f92ab;
  box-shadow: 1px 1px 2px rgba(0,0,0,.1);
}

ただ、一つ私がこのコードを変更した点があります。

フォントサイズです。

下に出てきますが、アドセンス自動挿入時にH3やH4タグを利用してコントロールするので、フォントサイズをあわせる必要がありました。

.entry-content h3とあるところを、h4やh5に変更し、同じ様にCSSを貼り付ける必要があります。

編集画面ではデフォルトでは文字サイズが同じになります。

これを表示した時に同じ文字サイズにしたいので、フォントサイズを合わせる必要があります。

font-size: 25px;

このように私は全部のフォントサイズを合わせました。

このように表示されます。

見た目、H３，H４，H５は見分けがつかないのが良いです。

アドセンス自動的配置や挿入の参考

 デザイン＞カスタマイズ＞記事上、記事下にアドセンスコードを貼っていると思われるブログが多数があります。

私も貼ってみましたが、クリック率もイマイチですし、読者にもウザいので上手にコントロールできないか調べてみました。

参考とした記事は以下２つ。

はてなブログに関する情報がワードプレスに比べると圧倒的に少なく、うまくやっている人はどうやってカスタマイズを行っているのか理解できました。

記事中に自動で挿入することができます。

H４（中見出し）の上にアドセンスを自動挿入するようにすることにしました。

ただ、アドセンスを入れたくない記事もあるので下記のようなフォーマットにすることで解決できます。

アドセンスを入れるフォーマット

H３

目次

H4

H5

アドセンスを入れないフォーマット

H３

目次

H３

H5

以上とすることにしました。

そこで、H４の見出しの上にアドセンスを自動挿入する設定とするためのコード。

デザイン　＞　カスタマイズ　＞　記事　＞　記事上

<!-- 最初の見出し前にアドセンスを配置 -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h4');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<p style="text-align:center;" >スポンサーリンク<br>

※AdSense広告コード貼り付け位置

</p>
</div>
<!-- 最初の見出し前にアドセンスを配置ここまで -->

記事下で直下にアドセンスを入れる

デザイン　＞　カスタマイズ　＞　記事　＞　記事下

<!--記事下アドセンス-->
<div id="my-footer">
<p style="text-align:center;" >スポンサーリンク<br>

※AdSense広告コード貼り付け位置
広告を２つ並べて「ダブルレクタングル」にする場合は
広告コードを２つ貼ってください。

</p>
</div>
<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>
<!--記事下アドセンスここまで-->

アドセンスがこれでコントロールできます。

H４やH５の見出しの上に選択して、入れるためにh4をh5などに変更したらできます。

ネタ元ブログの中に、自動で変動して広告を入れる方法が記述されています。

ただ、これはブログリンク先が消えているので不明です。

ブログデザイン改造

 ネタ元ブログをリンクします。

 サイドバーに目次が出てくる設定について書かれています。

目次装飾について書かれているこちらです。

ワードプレスのような目次ができないかと調べてみましたが、この方法が一番良いように思いました。

/* ==目次カスタマイズ== */
.entry-content .table-of-contents {
position: relative;/* 相対位置 */
font-weight: bold;/* 文字太さ */
background: #edf5f4 !important;/*背景色（優先）*/
padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
border-top: 40px solid #7fdbb6;/* 枠の太さ色(上 */
border-right: 3px solid #7fdbb6;/* 枠の太さ色(右 */
border-bottom: 3px solid #7fdbb6;/* 枠の太さ色(下 */
border-left: 3px solid #7fdbb6;/* 枠の太さ色(左 */
line-height: 2.0em; /*文の行高*/
}

/* 導入タイトルの設定 */
.entry-content .table-of-contents:before {
display: block;/* 要素を定義 */
content: '目次';/* 導入タイトル */
color: #fff;/* タイトルの文字色 */
font-weight: bold;/* タイトルの文字太さ */
font-size: 120%;/* タイトルの文字サイズ */
position: absolute;/* 絶対位置 */
top: -35px;
left: 40px;
}

/* 番号付きリストに変更（箇条書きにする場合は削除） */
.table-of-contents ul,.table-of-contents li {
list-style-type: decimal/* 番号付きリストへ変更 */
}

/* リンクの下線無し（下線つけたままにする場合は削除） */
.table-of-contents a {
text-decoration:none/* リンクの下線無し */
}

これをCSSに貼り付けました。

色に関しては、総合的にカスタマイズしたいと思います。

• #edf5f4　：　枠内の背景色　（コード内に1ヵ所）
• #7fdbb6　：　枠の色　（同じく4ヵ所）
• #fff　：　文字の色　（同じく1ヵ所）

 上記コードを改変することで変更できるようです。

サイドバーに目次を入れる。

これみんなどうやっているのだろうかと思っていました。

はてなブログ向けのサイドバーで追尾する目次【ver3】 

この記事はgithubなので、消失することはないと思うのでコードは直接上記より取得してください。

 貼り方については、このブログの方が丁寧に解説しています。

これに関しては、一時設置しましたが当ブログでは排除しました。

はてなブログドメイン設定

私はロリポップ転送を使っています。お名前のURL転送機能とほぼ同じ金額となります。

どっちが良いかと思いますが、はてなブログを２つ以上利用する気持ちがあるのでロリポップを選びました。

個人的には金融系ブログはこちら、もう一つは記事を流す系としたいと感じています。