こんにちは、情報系大学生のハル(Blog_IT_haru)です。
今回は、ブログカスタマイズとして、はてなブログの無料版でもできる、ヘッダー下におすすめ記事をカードで表示する方法を紹介します。
やりたいこと
以上のように、ヘッダー下に、記事を紹介する画像を入れたいです。
これ、Neumorphismというはてなブログのテーマのデモサイトなんですが、こちらも、私が現在使用している、Minimalismと同じくらいおしゃれで、カスタマイズもしやすそう(テーマ作成者が結構カスタマイズ方法を紹介してくれている)ので、おすすめです。
では、カスタマイズ、やっていきましょう!
Minimalism
Brooklyn
UnderShirt
Haruni
Innocent
Naked
※Neumorphism・Cappuccinoを使用している方は、以下の方法でやりましょう。
はてなブログCappuccinoにおすすめ記事を設置するカスタマイズ - フジブロっ!
やり方
①URLをコピペ
引用記事で、このような、URLを入力するところがあるので、入力していきます。
私の場合、記事のURLは、カテゴリのURLにしました。(これはお好みで良いと思います。)
表示する画像のURLについては、一度はてなフォトに画像をアップロードし、それのURLを取得して入力するのが良いと思います。
画像のURLを取得しよう
①はてなフォトライフにいき、アップロードした画像を以下のように表示させます。
②この画像を右クリックして、画像を新しいタブで開く、をクリックします。
すると、以下のようなページになるので、赤い下線のURLをコピーします。
これが、画像のURLです。
②画像サイズを入力
以下のように、画像サイズを入力する場所があるので、入力します。画像のみで使用する方は、チェックを入れましょう。
③HTML,CSSをコピー
※コードを紹介する場合は引用や転載はせずにリンクを明記してください。
とのことでしたので、コードははてなブログヘッダー下におすすめ記事を設置するカスタマイズ - フジブロっ!よりご確認ください。
④はてなブログのデザインから貼り付け
HTMLは、デザインのヘッダーのタイトル下に貼り付けます。
CSSは、デザインのデザインCSSに貼り付けると良いですが、これ以外に様々なカスタマイズを行っている方は、一番下だと、CSSがうまく適用されない場合があるので、一番上にしておくと、良いと思います。
引用記事
まとめ
いかがでしたか?
今回は、ヘッダー下に、おすすめ記事を貼る方法を紹介しました。
他にも、私が行った、ブログカスタマイズを徐々に書いているので、見ていただけると嬉しいです。
この記事がいいな、と思ってくれたら、SNSなどで拡散したり、
ブックマークやコメントなどしてくれると励みになります!
下の方とサイドバーにある、サポートもお待ちしています!
更に、読者になってくれたら、お返しに私も読者になります!
また、この記事の内容についてなにかありましたら、
お問い合わせ、コメント、TwitterのDMなどによろしくお願いします。
それでは。