くうかんしんぷるライフ

賃貸2LDKのおうちでも快適に、シンプルに暮らしたい

- Pickup -

エコ洗剤活用術
メゾネットのメリットデメリット
2LDK
無印おすすめ

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

f:id:ku-kahan:20200113233940p:plain

こんにちは、くうかです!

 

当ブログははてなブログで運営しています。
2019年夏にブログデザインをリニューアルし、数か月後にデザインテーマはそのままで雰囲気だけ少し変えました。

 

今回はトップページのおすすめ記事など、新しくカスタマイズしたところを記事にしておきたいと思います。

 

 

『UnderShirt』追加カスタマイズ

当ブログははてなブログの『UnderShirt』というテーマを使わせていただいています。
カード型でシンプルな、カスタマイズしがいのあるテーマです。

 

今まで行ったカスタマイズ記事はこちら

www.kurasitotonoe.com

www.kurasitotonoe.com

 

この2つの記事のあと、新しく追加したカスタマイズを今回書いていきます。
テーマが『UnderShirt』でなくてもできるカスタマイズだと思います。

 

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

トップページのヘッダーに、おすすめの記事を4つ並べるカスタマイズを入れました。
はてなブログっぽくなくておしゃれになりますよね(^^♪

f:id:ku-kahan:20200113223527p:plain



実はこれは完全に自分のためです(・´з`・)
自分が見たい備忘録ページにすぐアクセスできるように入れたのです。笑
いや、でも4記事のうち、3記事は本当におすすめですよ!(;´∀`)

 

f:id:ku-kahan:20200113223532p:plain

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

 

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

www.bambi.pro

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

 

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

 

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

f:id:ku-kahan:20200113223522p:plain

 

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

blog.niketcha.com

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

 

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

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

 

それをやると、検索からその記事を探してくれた方は、はてなブログの404 Not foundのページに遷移されてしまいます。
多くの方はそこで離脱してしまう可能性があるかもしれない。

 

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

 

f:id:ku-kahan:20200113225819p:plain

 

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

h-s-hige.hateblo.jp

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

 

最後に 

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

 

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

 

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

 

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

 

本日も最後までご覧いただき、ありがとうございました。

 

こんな記事もあります

www.kurasitotonoe.com

www.kurasitotonoe.com

www.kurasitotonoe.com

www.kurasitotonoe.com