はてなブログ3年目の当ブログで行ってきたカスタマイズまとめ

こんにちは。マリ（＠damarino_oheya）です！

このブログははてなブログproで書いています。（追記＊現在はワードプレスに移転しました）

私がブログを始めたのは2016年の9月なので、ブログ歴は2年ちょっとです。

ブログを始めたばかりの頃は、はてなブログカスタマイズの右も左も分からない状況でした。

それから約2年、少しずつCSSやHTMLを勉強してきました。

この記事では、当ブログでこれまで行ってきたはてなブログのカスタマイズについてまとめています。

（＊2019年2月にワードプレスに移転しました）

はてなブログのヘッダーにおすすめ記事をCSSだけで作ってみた

はてなブログのヘッダーに細長いテキストリンクを挿入する方法

はてなブログのヘッダーに細長いテキストリンクを挿入する方法

はてなブログのヘッダーのカスタマイズ

このブログのトップページに行くと

• 「おすすめ記事」へのリンクが4つ
• 細長いテキストリンク

が表示されます。

ワードプレスのようなおすすめ記事

パソコン版ではこんな感じ。

スマホ版はこんな感じ（2種類のうち常にどちらかを使っています）

このヘッダーのおすすめ記事はHTMLとCSSのコピペで作っているのですが、シンプルなおすすめ記事が表示したいと思っていたので自作してみました。

▼こちらの記事に詳しくまとめています。

はてなブログのヘッダーにおすすめ記事をCSSだけで作ってみた

はてなブログのヘッダーにおすすめ記事をCSSだけで作ってみた

【お詫び】2019年1月5日まで、間違ったHTMLを公開しておりました！

使ってくださっている方や検討されていた方がいらっしゃいましたら本当に申し訳ございません！

＊現在は正しいHTMLを公開しております！

ヘッダーにおすすめ記事を表示したい方の参考になれば幸いです。

（コメント欄にてご指摘いただいた【聖地巡礼に酒は必要】のnichinichisou0808さま本当にありがとうございました！）

ワードプレスのような細長いテキストリンク

ワードプレスのブログで流行っている、ヘッダーに細長いテキストリンクを表示するカスタマイズです。（青い部分です）

スマホ版ではこんな感じです。

こちらもはてなブログのカスタマイズ記事が見つからなかったので自作しました。

はてなブログのヘッダーに細長いテキストリンクを挿入する方法

はてなブログのヘッダーに細長いテキストリンクを挿入する方法

「not found」ページのカスタマイズ

アドセンスの審査に何度も落ちている状況の時に、何を思ったか「アドセンスに通らないのはnot foundのせいだ！」と、「not found」を充実させるためにカスタマイズしました。

はてなブログのnot foundページのカスタマイズ

はてなブログの「not found」に検索窓・人気記事・カテゴリーを表示するカスタマイズ

「not found」になってしまうページに行くと、

• 検索窓
• 人気記事
• カテゴリー

の3つが表示されるカスタマイズです。

意味があるかはよく分かりませんが、ワードプレスのブログはnot foundの時に検索窓などが出てくるテーマが多いので、SEO的に良いんだと信じています。

内部リンク用のボックスを作成

はてなブログのブログカードって見やすくて良いですよね。

そのブログカードを使った内部リンク用のボックスを作りました。

こんな感じです。

ブログカードを貼り付けるだけでなく、少し装飾することで目立って分かりやすいかな？と思っています。

▼カスタマイズ記事はこちらです。

はてなブログのブログカードを使った内部リンク用のボックスを作ってみた

「固定ページ」の見出しをカスタマイズ

はてなブログでは固定ページが作れます。

私の場合は、

• プロフィール
• プライバシーポリシー
• お問い合わせ
• サイトマップ

など、記事以外のことを書くのに使っています。

その中で、見出しや文字の大きさなど、記事ページとは少し違う変化をつけるのにカスタマイズしてみました。

はてなブログの固定ページをCSSでカスタマイズする方法

正直なところ、めんどくさいカスタマイズですね。

私の場合、アドセンスになかなか通らず試行錯誤した結果、固定ページのカスタマイズに行き着きました。

今なら「アドセンスに通りたいなら固定ページカスタマイズしても時間の無駄だからやめておけ」と教えてあげられるのですが、アドセンスに通ってない時はなぜ通らないのか分からないんですよね。

ただ、こちらもnot found同様に「固定ページにもこだわっている！」と、ブログに愛着がわくという意味ではおすすめです。

ブログデザインのカスタマイズ（PC）

はてなブログpro（有料会員）になった際、広告がつかなくなり、好きなデザインにしたくてブログデザインをリニューアルしました。

ブログデザインをリニューアルしました！カスタマイズまとめ。

去年の5月にリニューアルし、ちょっとした変更をしながらもいまだに使っているお気に入りのデザインです。 

また思い切ってリニューアルしたい気持ちはあるのでそのうち頑張るかもしれません。

ブログデザインのカスタマイズ（スマホ）

このブログは、スマホからのアクセスが7割と大部分を占めています。

そのため、スマホからのデザインってすごく重要だと思っているので、パソコンとは少し違うカスタマイズをしています。

• スマホ版でもトップページをカード型
• 背景色の変更
• 目次のデザイン
• 記事内の文字の大きさ

などなど、とても細かいところですが気になるところはスマホで読みやすいように変更しています。

【カスタマイズ】はてなブログのスマホ版ブログデザインでカスタマイズしたこと

PCに加えてスマホのデザインも変えるのって、正直ぱっと見では分かりにくいし、めちゃめちゃめんどくさい作業です。

トップページの文字サイズや背景色変更など、目立つところから少しずつカスタマイズしていくとだんだん楽しくなるかなと思います。

おわりに 

というわけで、当ブログで行ってきたカスタマイズでした！ 

ブログのカスタマイズは訪れた人が見やすいだけでなく、ブロガー自身もブログに愛着を持って継続するためにも結構重要なのかなと思います。 

このような記事もあります

Word Press（ワードプレス）でブログを作るのは難しい？はてなブロガーがWPでブログを作ってみた