こんにちは。マリ（＠damarino_oheya）です！
このブログははてなブログproで書いています。（追記＊現在はワードプレスに移転しました）
私がブログを始めたのは2016年の9月なので、ブログ歴は2年ちょっとです。
ブログを始めたばかりの頃は、はてなブログカスタマイズの右も左も分からない状況でした。
それから約2年、少しずつCSSやHTMLを勉強してきました。
[say name="マリ" img="https://www.oheya-migaru.com/wp-content/uploads/2019/03/IMG_6011.jpg"]本当に少しずつ、カスタマイズができるようになってきました！[/say]
この記事では、当ブログでこれまで行ってきたはてなブログのカスタマイズについてまとめています。
（＊2019年2月にワードプレスに移転しました）
[kanren id="1862,1873,1873"]
はてなブログのヘッダーのカスタマイズ
このブログのトップページに行くと
- 「おすすめ記事」へのリンクが4つ
- 細長いテキストリンク
が表示されます。
ワードプレスのようなおすすめ記事
パソコン版ではこんな感じ。
スマホ版はこんな感じ（2種類のうち常にどちらかを使っています）
このヘッダーのおすすめ記事はHTMLとCSSのコピペで作っているのですが、シンプルなおすすめ記事が表示したいと思っていたので自作してみました。
▼こちらの記事に詳しくまとめています。
はてなブログのヘッダーにおすすめ記事をCSSだけで作ってみた
[kanren id="1862"]
【お詫び】2019年1月5日まで、間違ったHTMLを公開しておりました！
使ってくださっている方や検討されていた方がいらっしゃいましたら本当に申し訳ございません！
＊現在は正しいHTMLを公開しております！
ヘッダーにおすすめ記事を表示したい方の参考になれば幸いです。
（コメント欄にてご指摘いただいた【聖地巡礼に酒は必要】のnichinichisou0808さま本当にありがとうございました！）
ワードプレスのような細長いテキストリンク
ワードプレスのブログで流行っている、ヘッダーに細長いテキストリンクを表示するカスタマイズです。（青い部分です）
スマホ版ではこんな感じです。
こちらもはてなブログのカスタマイズ記事が見つからなかったので自作しました。
[kanren id="1873"]
[say name="マリ" img="https://www.oheya-migaru.com/wp-content/uploads/2019/03/IMG_6011.jpg"]ブログのお知らせや、Amazon・楽天のセールなどへのリンクを貼っても良いですね。[/say]
「not found」ページのカスタマイズ
アドセンスの審査に何度も落ちている状況の時に、何を思ったか「アドセンスに通らないのはnot foundのせいだ！」と、「not found」を充実させるためにカスタマイズしました。
[kanren id="1941"]
「not found」になってしまうページに行くと、
- 検索窓
- 人気記事
- カテゴリー
の3つが表示されるカスタマイズです。
意味があるかはよく分かりませんが、ワードプレスのブログはnot foundの時に検索窓などが出てくるテーマが多いので、SEO的に良いんだと信じています。
[say name="マリ" img="https://www.oheya-migaru.com/wp-content/uploads/2019/03/IMG_6011.jpg"]ブログへの愛着が高まるのでおすすめです。[/say]
内部リンク用のボックスを作成
はてなブログのブログカードって見やすくて良いですよね。
そのブログカードを使った内部リンク用のボックスを作りました。
こんな感じです。
ブログカードを貼り付けるだけでなく、少し装飾することで目立って分かりやすいかな？と思っています。
▼カスタマイズ記事はこちらです。
[kanren id="1888"]
「固定ページ」の見出しをカスタマイズ
はてなブログでは固定ページが作れます。
私の場合は、
- プロフィール
- プライバシーポリシー
- お問い合わせ
- サイトマップ
など、記事以外のことを書くのに使っています。
その中で、見出しや文字の大きさなど、記事ページとは少し違う変化をつけるのにカスタマイズしてみました。
[kanren id="1966"]
正直なところ、めんどくさいカスタマイズですね。
私の場合、アドセンスになかなか通らず試行錯誤した結果、固定ページのカスタマイズに行き着きました。
今なら「アドセンスに通りたいなら固定ページカスタマイズしても時間の無駄だからやめておけ」と教えてあげられるのですが、アドセンスに通ってない時はなぜ通らないのか分からないんですよね。
ただ、こちらもnot found同様に「固定ページにもこだわっている！」と、ブログに愛着がわくという意味ではおすすめです。
ブログデザインのカスタマイズ（PC）
はてなブログpro（有料会員）になった際、広告がつかなくなり、好きなデザインにしたくてブログデザインをリニューアルしました。
[kanren id="1995"]
去年の5月にリニューアルし、ちょっとした変更をしながらもいまだに使っているお気に入りのデザインです。
また思い切ってリニューアルしたい気持ちはあるのでそのうち頑張るかもしれません。
ブログデザインのカスタマイズ（スマホ）
このブログは、スマホからのアクセスが7割と大部分を占めています。
そのため、スマホからのデザインってすごく重要だと思っているので、パソコンとは少し違うカスタマイズをしています。
- スマホ版でもトップページをカード型
- 背景色の変更
- 目次のデザイン
- 記事内の文字の大きさ
などなど、とても細かいところですが気になるところはスマホで読みやすいように変更しています。
[kanren id="1912"]
PCに加えてスマホのデザインも変えるのって、正直ぱっと見では分かりにくいし、めちゃめちゃめんどくさい作業です。
[say name="マリ" img="https://www.oheya-migaru.com/wp-content/uploads/2019/03/IMG_6013.jpg "]とはいえ、このブログはスマホからのアクセスが7割なので無視はできません。[/say]
トップページの文字サイズや背景色変更など、目立つところから少しずつカスタマイズしていくとだんだん楽しくなるかなと思います。
おわりに
というわけで、当ブログで行ってきたカスタマイズでした！
ブログのカスタマイズは訪れた人が見やすいだけでなく、ブロガー自身もブログに愛着を持って継続するためにも結構重要なのかなと思います。
[say name="マリ" img="https://www.oheya-migaru.com/wp-content/uploads/2019/03/IMG_6011.jpg"]はてなブログはたくさんのテーマから好みのデザインを選ぶことができるし、ブログデザインもかなりいじれるところが良いですよね。[/say]
このような記事もあります
[kanren id="1891"]
