ブログの知識

はてなブログをワードプレス風にカスタマイズ!ヘッダー下にカテゴリーや記事を固定する方法

2020年10月25日

悩む人
はてなブログでカテゴリをアイキャッチで画像で固定できないの?
悩む人
読んで欲しい記事あるのに新着記事で埋もれちゃう

 

こんな悩みありませんか?

 

僕はずーっとこれで悩んでいました。

 

ワードプレスみたいにカテゴリーをアイキャッチ画像で表示したり、自分の一押しの記事をトップページにドーンと目立たせたい!

マブハイ
ワードプレス羨ましい

 

その方法を見つけましたので紹介したいと思います。

現在このブログはワードプレスで運営しています。

ポイント

  • カテゴリーをアイキャッチ画像で表示したい人
  • 一押し記事を目立たせたい人
  • はてなブロガーさん

はてなブログのトップページ

f:id:mabuhayblog13:20201024105524j:plain

(このブログは「Naked」のテーマを使用しています。)

はてなブログのトップページって新着記事順に並ぶだけです。

ワードプレスだと新着記事をヘッダー下に並べたり出来ますよね!

新着記事が並んでいるだけだと過去に書いた記事がどんどん埋れてってしまい、読者さんがページに来てくれた時に最新記事だけをみて

このブログ興味ねえわ

って言って離脱してしまう可能性があります。

読者さん!ここにいい記事ありまっせー!

って言ったところで、探してまで読んでくれるわけありません。

トップページに記事を固定する

ワードプレスみたいに、ヘッダー下にアイキャッチ画像でオススメ記事を固定して

読者さん!このブログはこんなこと書いてますよ!

ってアピールしたくないですか?

または、カテゴリをアイキャッチで画像表示してワードプレスの「JIN」っぽくしたくないですか?

出来ますよそれ!

っていうかもうやってますww

\PCから見た画面/
f:id:mabuhayblog13:20201024110816j:plain

\モバイルから見た画面/
f:id:mabuhayblog13:20201024111019j:plain

どうですか?

これだとブログに来てくれた読者さんに、一押し記事をアピールすることが出来ます。

そのブログが「何について書かれている」のかがすぐ分かるので

このブログ興味あるからもっと読んでみよ!

ってなってくれる可能性があります。

これを応用すればカテゴリもアイキャッチ画像で表示することが出来るのでワードプレスの「JIN」っぽいトップページに出来ます。

記事をアイキャッチ画像で固定する方法

参考にさせて頂いたサイト

こちらの【Bambi`s BLOG】さんの記事を参考にさせて頂きました。

ありがとうございました!

この方のブログでは、他にも【はてなブログ】のカスタマイズについて色々詳しく書いてくれてます。

PCスキル初心者の僕が「このhtmlは〜」とか「このcssはですね〜」って、説明できませんので興味ある方はこちらのサイトを見てください!

記事にアイキャッチを設定さえしてれば、コピペのみで10分ぐらいで出来ます。

CSSって美味しいの?

このレベルの僕が出来たので大丈夫ですww

丸投げですか?

じゃあ1つだけ補足

アイキャッチ画像は4:3の比率で作るとうまく収まります。

このブログでは「横800px縦600px」で作りました。

この数字が正解かどうかは分かりませんが、うまく表示できているので個人的にはOKです。

サイドバーに記事を固定する方法

ブログのデザインを崩したくないって方はサイドバーに一押し記事を固定する方法もあります。

ポイント

  • カテゴリに「一押し記事」を追加する
  • 記事を作ったらカテゴリ「一押し記事」にも入れる
  • サイドバーに「一押し記事」を追加する

記事のカテゴリは2つ以上にも入れれるので、例えば「フィリピン」+「一押し記事」という感じにしておけば両方に表示されます。

「一押し記事」は好きな名前にしてね!

サイドバーの作り方は「デザイン」→「カスタマイズ」→「サイドバー」→「+モジュール追加」→「カテゴリー」で追加できます。

サムネイルを画像で表示にチェックを入れるとこんな感じになります。

f:id:mabuhayblog13:20201024115039j:plain

これだけでも全然違いますね!

まとめ:はてなブログをワードプレス風にカスタマイズ

このやり方2ヶ月ぐらい探してたんですけど、やっと出来ましたー!

モバイルだと何の違和感もないんですけどPC表示するとヘッダーがちょっと浮いてますね。

これから記事書きつつ試行錯誤していきたいと思います。

はてなブロガーさんで、このやり方探してた方はぜひ参考にしてみてください!

マブ嫁
Bambiさんの記事をね!
そうだね(´∀`)
マブハイ

  • この記事を書いた人
マブハイブログ管理人

マブハイブログ管理人

2020年7月より完全初心者でブログ開設。ブログに熱中するあまり趣味がブログになる。20歳でフィリピーナと結婚。今年で結婚16年目。フィリピンの事や日常のあれこれを書いています。

-ブログの知識

© 2020 マブハイブログ