はてなブログの関連記事を超簡単にかっこよく表示した！【Milliard】

こんにちは！ぽんでです。

はてなブログユーザーのみなさん、ワードプレスのブログデザインって憧れません？なんかどこかおしゃれな感じしますよね！かっこいいなぁって思ってたのでCSSすら全くわからないですが、ちょこちょこコピペなどを利用してはてなブログでもデザインをいじってワードプレスみたいにかっこよくしたいと試みています。

今回はフッタや記事下に固定で付いてる「関連記事」または「あわせて読みたい」の部分を作って見ました！というか、僕は何もしていないんですけどね。笑

「関連記事」「あわせて読みたい」って？

記事下などによく見かける内部リンクです。

今まで使っていたのははてなブログに初期設定で備わっている「関連記事」機能

はてなブログの管理画面から「デザイン」→「カスタマイズ」→「記事」

の中にある「関連記事を記事下に表示する」にチェックを入れるだけでできます！めっちゃ簡単。

▼ こんな感じになります

記事の内容に関連が強いものを自動で選んで設定してくれるので、機能としては申し分はないのですが、ワードプレスのブログとかでもっとおしゃれな感じの見たことありません？いっつも「いいなぁーー」って見てました。

しかし

▼ Milliardで作った関連記事がこちら

これ実ははてなブログでも超簡単にできるんです！！

知らなかった…所要時間10分もかからないので、おしゃれにしたい人は是非試して見てください。

Milliardで簡単に設定＆作成

僕が説明するまでもなく公式が丁寧に説明してくださっているんですよね、これ。

公式HP：Milliard関連ページをはてなブログで設定する方法 | シスウ株式会社

一応手順だけはしっかり説明しておきます。

まずは次のリンクに行きます

関連記事ツール設定画面

するとこういう画面が出てきます。

ここに必要事項を全て記入していきます。

※「紹介文」の欄には「あわせて読みたい」「関連記事」など、記事のリンクの説明文を入れます。

※並び順

「関連記事」…現在の記事に関連する内容の記事から順にリンクを貼ってくれます。

「更新日付」…更新した日付順に記事のリンクを貼ってくれます。

「ランダム」…ランダムにリンクが張られます。

※表示

「リスト」は整然と並べてくれて、「パネル」はサイズをずらしてちょっとおしゃれに見せてくれます。当ブログはPCがパネルで、スマホがリストで設定しています

全部書いたら「コードを取得」！あとは貼るだけだ！

表示されたコードをコピーして、はてなブログの管理画面へ戻ります。

「デザイン」→「カスタマイズ」→好きな場所にリンクをペースト！

おすすめは「記事」→「記事下」です

設定し終えたら、pc版・スマホ版共に反映されているか確認しましょう！

まとめ

めちゃくちゃ簡単にかっこよく関連記事を表示させる方法でした！

コードをかけない人からしたらこういうコピペでかっこよくデザイン作ってくれるのって本当に助かりますよねー。これからもちょこちょこかっこいいブログデザインを目指していけたらなと思っています！

以上！