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