【コピペOK】はてなブログデザインカスタマイズで初心者が簡単にできるものまとめ【HTML・CSS】

どうも、だいち（@spountant）です。

はてなブログに限った話ではないが、ブログをカスタマイズすると、何がいいのか。

実際にいじくりまわしてみて、良いことは３つあることに気が付いた。

デザインがきれいなだけで、読者からの信頼度が上がる。
自分のブログ内を徘徊してくれるようになる。
自分のブログに愛着がわく。

ブログの滞在時間が長くなり、Google先生からの評価がよくなる。

愛着がわいてブログを更新しよう（というより、ブログを育てていこうという感覚に近い）という気になる。良いこと尽くめだ。

だが、プログラミングとかまったく知らないWeb初心者のぼくにとって、ブログのカスタマイズというのはなかなか至難の業だった。

そこで、はてなブログをカスタマイズしていく上で、簡単コピペで実装できて、本当に参考になった記事を一挙に公開していく。

最初にはてなブログでHTML・CSSをいじるときの注意点
エントリーの文字の大きさの変更
見出しデザイン<h2><h3>…の変更
目次のつけ方
タイトル画像がはみ出してしまうとき、うまくフィットさせるcss
SNS関連
- SNSへのシェアボタンの設置
- SNSフォローボタンの設置
カテゴリメニューについて
- カテゴリ（グローバル）メニューの設置する
- カテゴリ（グローバル）メニューをスマホで横スクロールさせるcss
関連記事の表示
- フッターに自動的に関連記事を表示する
- 本文中に”合わせて読みたい”を表示する
サイドバーの固定
ページトップへ戻るボタンの設置
検索窓を設置する
本文のカスタマイズ
アドセンス広告の配置
- 文中にアドセンスを設置する
- 記事直下にアドセンスを設置する
筆者（だいち）が開発したカスタマイズ
もっとカスタマイズしたい！
WEBの色見本
ブログをカスタマイズすると愛着がすごいことになる

最初にはてなブログでHTML・CSSをいじるときの注意点

はてなブログでのカスタマイズの方法は、「デザイン」→「PC」・「スマホ」をいじる感じ。それぞれ下に「ヘッダ」とか「記事」とかあるので、そこにコードを追加していこう。（小さいのでアップしてみてください汗）

スマホ版ではしっかり<style>に囲まれているかを意識しておこう。

「なんかうまくいかない…むりげー…」と思ったら、<style>に囲まれているかを一番に確認したいところだ（ちなみに、PCのデザインcssにコードを埋め込む場合は、この記述は必要ない）。

<span class="synType"><style type=text/css></span>

<span class="synType"> /*---ここにコードを入れる---*/</span>

<span class="synType"></style></span>

あと自分も最初にわからなかったのが、HTML編集。パソコンで記事を書いてるとき、ここを編集できる。

記事の執筆中に、ここをいじることも多々あるから、存在ぐらいは覚えておこう。

エントリーの文字の大きさの変更

当ブログでは文字の大きさを少し大きくしている。はてばブログの初期設定だと文字小さい……

ちなみに当ブログ「むーびんぐ」では、PCスマホ両方とも16.8pxに設定している。

参考にした記事はこちら。

参考記事：はてなブログのカスタマイズ2 ～文字サイズの変更

見出しデザイン<h2><h3>…の変更

まずは見出しの<h2><h3>のデザインを変えた。

バリュエーションが多いからいろいろ選べるのが嬉しい。

以下のゆきひーさんの記事を参考にした。

参考記事：コピペ一発ではてなブログ見出しをカスタマイズ！ちょっとの工夫で印象が格段に変わる！

目次のつけ方

目次のつけ方だが、結論からいうと、以下のようにすればいい。

目次を挿入したい行に、次のように[:contents]と記述します。

めっちゃ簡単。

本文に追加したら自動で、つけた見出しを目次にしてくれる。

参考記事：記事中の見出しから目次を自動的に作成する「目次記法」を追加しました

タイトル画像がはみ出してしまうとき、うまくフィットさせるcss

PCでヘッダ画像（トップの画像）を設定したはいいが、スマホでちょうど良い大きさで表示されずに、なんかはみ出してしまう……。

そんなときはこの記事のcssをコピペすればOK。

参考記事：【CSS】コピペするだけ！はてなのヘッダのタイトル画像を切り抜きなしで画面にうまくフィットさせます

SNS関連

SNS関連をいじりたい人は以下の参考記事をどうぞ。

シェアボタン
フォローボタン

SNSへのシェアボタンの設置

ぼくは２Dのフラット型にしていたが、３Dのボタンもあり、なんとも可愛らしい……これは愛着がわく。。

参考にしたのは、これもゆきひーさんの記事。

参考記事：はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2)

SNSフォローボタンの設置

フォローボタンも可愛らしいデザインが豊富だ。

このブログでは以下の記事を参照にした。めっちゃいい感じになるはず。

参考記事：はてなブログに11種類から選べるSNSフォローボタンをコピペ＋αで実装するカスタマイズ

カテゴリメニューについて

グローバルメニューとも言ったりするが、そのカスタマイズ方法を以下の見出しで紹介していく。

カテゴリ（グローバル）メニューの設置する

PC実装図。これでだいぶおしゃれに。（以前のイメージです）

スマホにも対応しているcssなので、以下を参考にすればメニューは基本的にOKだろう。

参考記事：CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】

カテゴリ（グローバル）メニューをスマホで横スクロールさせるcss

スマホの実装図。実際にこれを設置したことで、確実にブログ内の回遊率は上がった。

カテゴリが見えているのがいいのかも。

（ゆきひーさん大変お世話になっております）

参考記事：CSSでスマホ画面で横スクロールするレスポンシブ対応のメニューを作るカスタマイズ

サイドバーの固定

サイドバーをスクロールしていって、記事の下の方になってくると、サイドバーが真っ白になってしまう。

これはもったいないので、サイドバーの一番下に表示されているメニュー（モジュールという）を固定してしまうという技。

プロフィールとかを固定するといいかも。

参考記事：【はてなブログ】サイドバーの一番下にあるモジュールを固定する方法

ページトップへ戻るボタンの設置

右下についている。薄い黒くて丸いボタン。あれを押せば、ページのトップに戻ることができる。

これを実装したことでブログへの愛着度が倍増した。（実装図）

こちらの記事を参考にした。

参考記事：うっすら透明な「上に戻る」ボタンのはてなブログ設置法

ぼくのページトップへ戻るボタンだが、角に丸みを出し、ちょっと透けさせている。

その方法は、画像の指すところに青枠のcssを追加すればいい。（※画像は上記の記事のコードを元にしています）

角に丸みを出すのがborder-radius。透けさせるのがrgbaの最後の数字の部分。

<span class="synType">border-radius:5px;</span>
<span class="synType">background-color:rgba(0,0,0,0.4);</span>

検索窓を設置する

検索窓を置くことでユーザビリティが高まり、ブログ内の回遊率も上がることを期待して設置した。

参考にした記事はこちら。

参考記事：【はてなブログ】ブログ内検索ボックスをスマホ用ページの上部に表示させる方法

本文のカスタマイズ

以下からは本文のカスタマイズ方法を紹介していく。

本文をカスタマイズすると読みやすさが格段にアップするはずだ。

引用時のデザイン

これを実装すると、大きなコロンが表示され、引用したとき可愛らしいぞ。

参考記事：はてなブログのデザインカスタマイズ方法（簡易版）

太字に蛍光ペン風のマーカーを引く

これは、太字にした箇所に自動的に蛍光ペン風のマーカーを入れることができるコードだ。もう愛着でしかない。

参考記事：はてなブログの強調表示を蛍光ペン風にマーキングする

吹き出しで会話形式にする方法

こんな感じで吹き出しをつけて会話形式にすることができるんだ。

参考にした記事はこちら。

参考記事：吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】

吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】

アドセンス広告の配置

次に広告の配置のカスタマイズについて。

文中にアドセンスを設置する

アドセンス広告は配置とサイズが重要であるとよく耳にする。

その配置に関してだが、文中にアドセンス広告を入れることを強くおすすめしたい。

自分の場合それで収益が大きくアップした。

参考記事：【改良版】コピペで簡単！はてなブログで「文中にアドセンス広告を入れる」を自動化する方法

記事直下にアドセンスを設置する

シェアボタンが記事の終わりと認識している人が多いらしく、そのシェアボタンよりも上にアドセンスを配置することで、収益性を上げることができる。

参考にした記事はこちら。

参考記事：【はてなブログ】記事本文の直下にアドセンスを設置する方法

筆者（だいち）が開発したカスタマイズ

ここからは当ブログの著者が開発したカスタマイズだ。

不備が出る可能性もないこともないので、きちんと元のコードをメモした状態から取り組んでほしい。

「おすすめの記事たち」の設置

以下のHTMLを「記事上」にコピペ（PC,スマホ同様）

<span class="synType"><div class="recommended"><i class="blogicon-good"><b><span class="rere"> おすすめの記事たち</span></b></i></div>
<div class="re"><ul>
 <li><a href="URL">記事のタイトル</a></li>
 <li><a href="URL">記事のタイトル</a></li>
 <li><a href="URL">記事のタイトル</a></li>
</ul></div></span>

で、以下のcssをPCなら「デザインcss」に、スマホなら上記と同じく「記事上」に<style></style>で囲んでコピペ。

<span class="synType">.recommended{
    margin-top:10px;
    font-size:22px;
    font-family: "Tsukushi B Round Gothic","筑紫B丸ゴシック";
    font-weight: bold;
    border-radius:3px;
}
.rere{
    font-size:20px;
}
.re{
     border-bottom: 2px solid darkgray;
     margin-bottom:10px;
}</span>

「あとで読む」の設置

以下のHTMLをおすすめの記事たちの直後にコピペ（PC,スマホともに「記事上」）

<span class="synType"><a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button2" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"> あとで読む</i></a></span>

それから、以下のcssをPCなら「デザインcss」に、スマホなら「記事上」に<style></style>で囲んでコピペ。

<span class="synType">.hatena-bookmark-button2{   
　　background: #00A4DE;
　    float:right;
　    font-size:10px; 
 　   color:white;
　    padding:3.5px;
　    border-radius:3px;
}
</span>

記事直下のフォローボタン

以下のHTMLを「記事下」にコピペ（PC,スマホともに）。「ここにアカウント名を入れる」ってところには、＠マークは不要なので注意。

<span class="synType"><div id="my-footer">
<div class="follow-btn2">
<style>/*記事直下のフォローボタン*/</style>
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=ここにアカウント名を入れる" target="_blank"><i class="blogicon-twitter lg"> フォローする</i><br></a>
<p class="writer">Writen by あなたの名前</p></div></div></span>

で、以下のcssをPCは「デザインcss」に、スマホは「記事下」に<style></style>で囲んでコピペ。

<span class="synType">.follow-btn2{
    width: 100%;
    text-align: center;
    margin: 10px 0px;
    float:right;
    border-bottom:2px solid darkgray;
}
.follow-btn2 .writer{
    float:left;
    font-size:11px;
    margin-bottom:2px;
}
.follow-btn2 .twitter {
    color: #00ACEE;
    background: #ffffff; 
    float:right;
    font-size:10px;
    margin-bottom:2px;
}
.follow-btn2 .twitter:hover {
    color: #ffffff;
    background: #00ACEE;
    transition: all .3s;
}</span>