はるのぶろぐ。

情報系大学生ハルが、ゆるゆるとIT関係についてや日々の雑記を綴ります。ちょっとだけ、あなたの役に立てる、そんなブログを目指しています。

【ブログカスタマイズ】様々なテーマではてなブログでヘッダー下におすすめ記事を表示させる【カード】

参加してます!ポチッとお願いします

記事名と
URLをコピー

こんにちは、情報系大学生のハル(Blog_IT_haru)です。

今回は、ブログカスタマイズとして、はてなブログの無料版でもできる、ヘッダー下におすすめ記事をカードで表示する方法を紹介します。

f:id:Blog_IT:20220115223828p:plain

やりたいこと

f:id:Blog_IT:20220115202928p:plain

https://neumorphism.fuji-blo.com/より引用

以上のように、ヘッダー下に、記事を紹介する画像を入れたいです。

これ、Neumorphismというはてなブログのテーマのデモサイトなんですが、こちらも、私が現在使用している、Minimalismと同じくらいおしゃれで、カスタマイズもしやすそう(テーマ作成者が結構カスタマイズ方法を紹介してくれている)ので、おすすめです。

では、カスタマイズ、やっていきましょう!

対応しているテーマ

Minimalism
Brooklyn
UnderShirt
Haruni
Innocent
Naked

※Neumorphism・Cappuccinoを使用している方は、以下の方法でやりましょう。

はてなブログCappuccinoにおすすめ記事を設置するカスタマイズ - フジブロっ!

やり方

①URLをコピペ

f:id:Blog_IT:20220115203546p:plain

https://www.fuji-blo.com/entry/recommendより引用

引用記事で、このような、URLを入力するところがあるので、入力していきます。

私の場合、記事のURLは、カテゴリのURLにしました。(これはお好みで良いと思います。)

表示する画像のURLについては、一度はてなフォトに画像をアップロードし、それのURLを取得して入力するのが良いと思います。

画像のURLを取得しよう

はてなフォトライフにいき、アップロードした画像を以下のように表示させます。

f:id:Blog_IT:20220115203810p:plain

②この画像を右クリックして、画像を新しいタブで開く、をクリックします。

すると、以下のようなページになるので、赤い下線のURLをコピーします。

これが、画像のURLです。

f:id:Blog_IT:20220115204222p:plain

②画像サイズを入力

以下のように、画像サイズを入力する場所があるので、入力します。画像のみで使用する方は、チェックを入れましょう。

f:id:Blog_IT:20220115204409p:plain

https://www.fuji-blo.com/entry/recommendより引用

③HTML,CSSをコピー

※コードを紹介する場合は引用や転載はせずにリンクを明記してください。

https://www.fuji-blo.com/entry/recommendより引用

とのことでしたので、コードははてなブログヘッダー下におすすめ記事を設置するカスタマイズ - フジブロっ!よりご確認ください。

はてなブログのデザインから貼り付け

HTMLは、デザインのヘッダーのタイトル下に貼り付けます。

f:id:Blog_IT:20220115205248p:plain

CSSは、デザインのデザインCSSに貼り付けると良いですが、これ以外に様々なカスタマイズを行っている方は、一番下だと、CSSがうまく適用されない場合があるので、一番上にしておくと、良いと思います。

f:id:Blog_IT:20220115205414p:plain

引用記事

www.fuji-blo.com

まとめ

いかがでしたか?

今回は、ヘッダー下に、おすすめ記事を貼る方法を紹介しました。

他にも、私が行った、ブログカスタマイズを徐々に書いているので、見ていただけると嬉しいです。

blog-it.hatenablog.com

この記事がいいな、と思ってくれたら、SNSなどで拡散したり、

ブックマークやコメントなどしてくれると励みになります!

下の方とサイドバーにある、サポートもお待ちしています!

更に、読者になってくれたら、お返しに私も読者になります!

また、この記事の内容についてなにかありましたら、

お問い合わせ、コメント、TwitterのDMなどによろしくお願いします。

それでは。