超おすすめ！はてなブログで差をつける6つのカスタマイズ
はてなブログのカスタマイズは本当大事ですよね。WordPressなどとは異なり、デフォルトのままでは他のブログと大して変わらない見た目になってしまいます。特に、モバイル画面は大事。
ということで、今回は「他のブログと差をつけるはてなブログカスタマイズ」を紹介します。参考にしてください。
1.ヘッダーを追尾で格好良くする
スマホからアクセスして頂くとよく分かるのですが、当ブログのヘッダーは固定追尾式となっています。
はてなブログにはメニューバーの機能が実装されていませんので、何らかの形で追加するのが望ましいかと思います。
また、はてなブログのモバイル画面で特に差を付けやすいのがヘッダーです。こちらも、ちょっと画像を変えてみるなどするといいと思います。
今回参考にさせて頂いたのはid:sho_yamaneさんの記事です。Twitterの方で要望に応えて頂き、記事の紹介も快諾して頂きました。本当に感謝です！！
（こちらのコードはブログによって異なりますので、元記事を参考にして下さい）
ただし、ヘッダー画像が無くなったりいろいろあるので、よ〜〜〜く考えて設置した方がいいと思います。
2.引用のデザインをカスタマイズ
ブログを書いていると、他のサイトから文を引用することがあるかと思います。はてなブログの引用分のデザインはデフォルトですと正直微妙なので、上図のようにカスタマイズするといいと思います。
参考にさせて頂いたのはこちらの記事。マジ感謝です！
/* 引用のデザイン1 */
.entry-content blockquote {
padding: 20px 55px;
background: rgba(245,245,245,0.8);
color: #222;
position: relative;
border: solid 1px #fff;
margin: 0.8em 0;
}
/* 引用のデザイン2 */
.entry-content blockquote:before {
color: rgba(200, 200, 200, 1);
content: "“";
font-family: serif;
font-size: 600%;
left: 0;
line-height: 1em;
position: absolute;
top: 0;
}
/* 引用のデザイン3 */
.entry-content blockquote:after {
content: "”";
font-family: serif;
position: absolute;
bottom: 0;
right: 0;
font-size: 600%;
color: rgba(200,200,200,1);
line-height: 0;
}
コードはこんな感じ。
PCの場合は、デザインCSSの部分にコピペでOKです。
スマホの場合は、上図のようにヘッダー→タイトル下にコピペして下さい。その際、コードを
<style type="text/css">
</style>
でコードを囲むと上手くいくと思います。
3.注目記事ランキングをカスタマイズ
はてなブログのモバイル画面にデフォルトで設置してある「注目記事ランキング」ですが、こちらも一手間加えるとかなりオシャレに変身します。
またしてもid:sho_yamaneさんの記事です。本当参考になるモノばかりで助かります...。ちなみに、こちらのShoYamane Blogですが、まだ読んでいない方は絶対読んだ方がいいです。超面白いですよ！！！
<style>
/* サムネイル画像の大きさ変更 */
.list-entry-article .thumb-image {
width: 70px;
height: 70px;
border-radius: 100%; /* 角丸修正 */
}.hatena-module-entries-access-ranking li {
padding-left: 0px;
}/* 1位 */
.hatena-module-entries-access-ranking .rank-1:before {
content: "1";
color: #fff;
background: rgba(190,156,0,.6)!important; /* 背景色変更 */
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 15px;
border-right: 1px solid #fff; /* 枠線の右部分の色 */
border-bottom: 1px solid #fff; /* 枠線の下部分の色 */
left: 0;
}/* 2位 */
.hatena-module-entries-access-ranking .rank-2:before {
content: "2";
color: #fff;
background: rgba(148,148,148,.6)!important; /* 背景色変更 */
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 15px;
border-right: 1px solid #fff; /* 枠線の右部分の色 */
border-bottom: 1px solid #fff; /* 枠線の下部分の色 */
left: 0;
}/* 3位 */
.hatena-module-entries-access-ranking .rank-3:before {
content: "3";
color: #fff;
background: rgba(158,85,22,.6)!important; /* 背景色変更 */
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 15px;
border-right: 1px solid #fff; /* 枠線の右部分の色 */
border-bottom: 1px solid #fff; /* 枠線の下部分の色 */
left: 0;
}/* 4位 */
.hatena-module-entries-access-ranking .rank-4:before {
content: "4";
color: #fff;
background: rgba(0,0,0,0.6); /* 背景色変更 */
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 15px;
border-right: 1px solid #fff; /* 枠線の右部分の色 */
border-bottom: 1px solid #fff; /* 枠線の下部分の色 */
left: 0;
}/* 5位 */
.hatena-module-entries-access-ranking .rank-5:before {
content: "5";
color: #fff;
background: rgba(0,0,0,0.6); /* 背景色変更 */
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 15px;
border-right: 1px solid #fff; /* 枠線の右部分の色 */
border-bottom: 1px solid #fff; /* 枠線の下部分の色 */
left: 0;
}</style>
コードはこんな感じ。まるっとコピペでヘッダー→タイトル下に設置で完成です。
4.スマホ画面のサムネイルを丸くする
当ブログでは色々カスタマイズ記事を書いているので合わせて紹介。まずはサムネイル画像を丸くするカスタマイズ。
すでに導入している方もいるようで...感謝です！
5.パンくずリストを設置する
これは絶対やるべき。アクセス数が段違いに増えました（もちろんブログによって効果は変わるとは思いますが）
ヒトデ兄貴のところでも紹介されました。
ブログのカテゴリー整理と合わせてやると効果的です。
6.フォントをカスタマイズ
はてなブログは、デフォルトのままだとちょっと文字が小さいですよね。特に、モバイル画面は結構見づらいです。
こちらではフォントを変更する方法も合わせて紹介しています。是非参考にして下さい。
まとめ
全部やるのは大変かと思いますが、少しづーつトライしてみてはいかがでしょうか？
今回カスタマイズを紹介するにあたり参考にさせて頂いた皆様、本当にありがとうございました！！！
