はてなブログのタイトル下に「おすすめ記事」を設置するのをやってみた。

注目させたい記事をタイトル下に設置する

まだ今はお試しなので「カテゴリー」のページを設置してみただけなんだけど、これは読んでもらいたい!と思うページをタイトル下のわかりやすい部分に配置する方法を調べてみました。

 

参考にさせていただいたのはこちらのブログ

www.fuji-blo.com

フジグチさん(id:utoutosara)が公開されているHTMLをそのまま使わせていただきました。素晴らしいカスタマイズをありがとうございます♪

 

カスタマイズ方法に関しては上のブログをちゃんと読み進めていけば同じようにできると思います。基本的にはSTEP1からSTEP6まで順番にやっていけばOKです。

 

そこで、自分が設定方法でちょっとつまづいた部分について書き残しておこうと思います。

 

 

1、画像サイズを入力するところで、実際どのくらいのサイズにすれば良いのかわからなかった。

「画像のアスペクト比は2:1に設定しています。対比が違うとはみ出た部分は切り取られて表示されます。」とのことだったので、幅200、高さ100とかで設定してみましたがデッカい画像が表示されるだけで全然小さくならなかった。

 

後から気づきましたが、HTMLの設定だけでなくCSSの設定も必要だった。

結果的に画像は幅150、高さ150で設定して現在にいたる。

 

 

 

2、HTML設定だけでなく、CSS設定も忘れずに行うこと。

急いで設定したかったのでちょいちょい読み飛ばしながら進めてしまった僕が悪いのです。

HTMLのコードだけ入力すれば良いと思って設定したところ、デカイ画像が並んでしまいました。画像サイズを小さくすればいい?と思って小さくしたらタイトル下に文字列だけが並ぶようになってしまったり。

HTMLの設定だけでなくCSSコードもちゃんと貼り付けましょう!

 

 

つまり説明書きはちゃんと読んで理解してから作業しないといけないよってことです。

 

 

これでとりあえずオススメページをタイトル下に配置できるようになったので、今度はそこにオススメできるものを書かないといけませんね。はてなブログのカスタマイズをやりたい人は是非ともフジグチさん(id:utoutosara)のブログを見てみてね!

 

www.fuji-blo.com

 

 

追記

このブログをパソコンではなくスマホで見てみたら写真がデカすぎた(爆)

 

f:id:miapom618:20220611002005p:image

 

レスポンシブデザインと書いてあったからそのままで大丈夫だと思ったんだけど、何かしら調整する必要があるね。

 

 

はてなブログ管理画面→デザイン→スマートフォン→詳細設定

ここにある「レスポンシブデザイン」にチェックを入れることで解決しました!

 

 

f:id:miapom618:20220611005643p:image

 

ブログタイトルが見切れちゃうけど、読めないわけではないのでこれでヨシとしよう♪

思った通りにお勧めが4つ並んでくれてご満悦!!