【はてなブログ】おすすめピックアップ記事・not foundカスタマイズ

こんにちは、主婦ブロガーくうかです。

はてなブログのトップページにおすすめ記事を４つ表示させるカスタマイズと、not foundページのカスタマイズを行いました。

今回はその２つのカスタマイズについてご紹介しています。

※現在はワードプレスへ移行しています。

トップページのヘッダーにおすすめ記事を表示するカスタマイズ

トップページのヘッダーに、おすすめの記事を４つ並べるカスタマイズを入れました。

くうか

はてなブログっぽくなくておしゃれ♪

アイキャッチ画像だけのリンクになるので、画像にタイトルなど文字を入れていると何の記事かわかりやすいです。
まとめ記事やサイトマップになるような記事を載せると効果的かもしれませんね。

参考にさせていただいた記事です。
ほぼそのまま使わせて頂いてますのでコードの記載は控えます。

Bambi's BLOG @ hatena

【はてなブログ】ヘッダー下におすすめ記事やアイキャッチを並べて表示するカスタマイズ方法 – Bambi's BLO…自分のブログを訪れてくれた人に読んでもらいたい「おすすめ記事」をトップページのヘッダー下に表示する方法です。 ブログは日々新しい記事が更新されるので、読んでもら…

バンビさんのカスタマイズは最近かなり使わせていただいてますね。
たくさんの素敵なカスタマイズをありがとうございます(*’▽’)

このおすすめ４記事は個別の記事ページには表示されないので、検索等で記事に直接飛んできた方には見えません、残念ながら(^^ゞ

そしてさらにその、おすすめ記事・新着記事の上に見出しを付けるカスタマイズ

こちらはニケッチャさんの記事を参考にさせて頂きました。

ニケッチャメモ

はてなブログのトップページカスタマイズ-ブログっぽさを無くすはてなブログのトップページに施したカスタマイズをまとめました。できる限りオシャレっぽく、はてなブログ感を薄める感じのコンセプトです。今の当サイトのトップページは…

ニケッチャさんの記事はおすすめ記事を６記事も載せてますね！
とてもおしゃれです♡

404 Not foundページカスタマイズ

ブログを続けていると、記事を削除したり、記事のURLを変更することも時々あります。
私はわかりづらいURLをいくつかカスタムURLに変更しました。

そうすると、検索からその記事を探してくれた方は、はてなブログの404 Not foundのページに遷移されてしまいます。

多くの方はそこで離脱してしまう可能性があるかもしれない。

そこでカスタマイズしたNot Foundのページを用意して、トップページやおすすめの記事へ促すメッセージを表示し、少しでも離脱を回避できたらとカスタマイズしました。

参考にさせて頂きました！

Nekonote

【JavaScript】jQurey を使わずに 404 Not found のページを変更する方法 – Nekonote404 Not found とは ざっくりな説明だと、ページが見つからないときのエラーのことです。 詳しくはこちらです。 HTTP 404 – Wikipedia はてなブログでは、エラーが起きた時…

ほぼそのまま使わせていただいて、メッセージを少し変えただけです(*’▽’)
ありがとうございました！

最後に 

今回はおすすめ記事と、Not foundページのカスタマイズをご紹介しました。

CSSは未経験で自分でCSSを生み出すことは難しいので、参考にさせて頂いたブログをご紹介させていただくことしかできません(;´Д｀)
気になるカスタマイズがあれば見に行ってみてくださいね。

今年の抱負に書き忘れたけど、CSSを少し勉強したいなと思っています。
まだ、思ってるだけですが。笑
現役の頃、デバッグ＆修正が得意だったのでちょっと直すくらいはできるんですよね。
でももっと理解を深めてカスタマイズをしたい…！

時間があればチャレンジしてみたいと思います。