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

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

はてなブログに限った話ではないが、ブログをカスタマイズすると、何がいいのか。実際にいじくりまわしてみて、いいことは３つあることに気が付いた。

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

ブログの滞在時間が長くなり、Google先生からの評価がよくなる。愛着がわいてブログを更新しよう（というより、ブログを育てていこうという感覚に近い）という気になる。いいこと尽くめだ。

だが、プログラミングとかまったく知らないWeb初心者のぼくにとって、ブログのカスタマイズというのはなかなか至難の業だった。そこで、はてなブログをカスタマイズしていく上で、簡単コピペで実装できて、本当に参考になった記事を一挙に公開していく。

カスタマイズが終わったあとに、はてなブログで本腰入れて稼いでいこう！とお思いであれば、以下の記事で初心者から収益1万円を突破するまでの過程を全公開しているので、興味があればぜひ見ていってほしい。

関連記事：【収益公開】はてなブログ初心者がアフィリエイト収入1万円を稼ぐまで

【収益公開】はてなブログ初心者がアフィリエイト収入1万円を稼ぐまで【始め方を紹介】

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

最初に注意点

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

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

<style type=text/css>

 /*---ここにコードを入れる---*/

</style>

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

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

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

当ブログでは文字の大きさを少し大きくしている。はてばブログの初期設定だと文字小さいよね。。参考にした記事はこちら。ちなみに当ブログは、PCスマホ両方16.5pxだ。

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

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

まずは見出しのデザインを変えた。この記事を参考にした。バリュエーションが多いからいろいろ選べるのが嬉しい。

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

目次のカスタマイズ

目次のつけかた

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

めっちゃ簡単。カスタマイズってほどでもないけど。本文に追加したら自動で、つけた見出しを目次にしてくれる。

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

目次のデザイン変更

目次に番号をふったり、目次の背景の色を変更したりすることもできる。

参考記事：はてなブログの目次のデザインを少しカスタマイズしたよ

トップの画像うまくフィットさせる

PCでヘッダ画像（トップの画像）を設定したはいいが、スマホでちょうど良い大きさで表示されない。なんかはみ出してしまう。そんなときはこの記事のcssをコピペすればOK。

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

SNS関連

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

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

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

SNSフォローボタンの設置

フォローボタンも可愛らしいデザインが豊富だ。このブログでは以下の記事を参照にした。めっちゃいい感じになるぞ。

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

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

PC実装図。これでだいぶおされに。

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

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

スマホの実装図。実際にこれを設置したことで、確実にブログ内の回遊率は上がっている。カテゴリが見えているのがいいのかも。

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

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

サイドバーの固定

サイドバーをスクロールしていって、記事の下の方になってくると、サイドバーが真っ白になってしまう。これはもったいないので、サイドバーの一番下に表示されているメニュー（モジュールという）を固定してしまうという技。プロフィールとかを固定するといいかもね。

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

記事下にプロフィールを張り付ける

これはプロフィールだけじゃなくて、他にもいろいろ応用が利く。ぼくの場合は、オリジナルLINEスタンプの宣伝を張り付けたりしていた。参考にした記事はこちら。

参考記事：はてなブロガーは必須！はてなブログの記事下にプロフィールを貼り付ける方法。

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

右下についている。薄い黒くて丸いボタン。あれを押せば、ページのトップに戻ることができる。これを実装したことでブログへの愛着度が倍増した。（実装図）

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

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

ぼくのページトップへ戻るボタンだが、角に丸みを出し、ちょっと透けさせている。その方法は、下記のコードを写真のとこに挿入すればいい。

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

    border-radius:5px;
    background-color:rgba(0,0,0,0.4);

検索窓を設置する

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

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

本文のカスタマイズ

引用時のデザイン

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

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

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

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

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

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

こんな感じで吹き出しをつけて会話形式にすることができるんだ。
参考にした記事はこちら。

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

アドセンス広告の配置

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

アドセンス広告は配置とサイズが重要であるとよく耳にする。その配置に関してだが、文中にアドセンス広告を入れることを強くおすすめする。自分の場合、収益が大きくアップした。下記の記事を参考にした。

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

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

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

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

だいちが開発したカスタマイズ

ここからは当ブログの著者が開発したカスタマイズだ。問題が発生したらすぐに教えてほしい。そして不備の出る可能性もないこともないので、きちんと元のコードをメモした状態から取り組んでほしい。

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

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

<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>

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

.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;
}

「あとで読む」の設置

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

<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>

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

.hatena-bookmark-button2{   
　　background: #00A4DE;
　    float:right;
　    font-size:10px; 
 　   color:white;
　    padding:3.5px;
　    border-radius:3px;
}

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

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

<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>

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

.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;
}