「Milliard」で記事下に関連記事がタイル状に並ぶようにしました
記事下のスペースに、タイル状に色々な記事が紹介されているブログを拝見し、
ぜひともやってみたい！と思いました。
こんな感じのやつね！
（剣呑な絵がならんでいますが…）
このような感じの、記事下にタイル状で
ほかの記事が紹介されるようにするにはどうしたらいいのかな？と思って調べました。
1.はてなブログの「関連記事」を使う
最初に使わせていただいたのが、はてなブログ公式の「関連記事」でした。
こんな感じに記事下に関連記事が表示されます。
日付も出て、すっきりしていて見やすいですね。
これは、「デザイン設定」→「カスタマイズ」と開くと
関連記事についてのチェックボックスがありますので、チェックを入れるとできあがりです。
スマートフォン版にも入れられます。便利ですね♪
2.「Milliard」を使う
はてなブログ公式の「関連記事」も見やすくて好きだったのですが、
次から次へとタイルが現れるものにもしてみたくてあれこれ探していたら
シスウ株式会社さんの「Milliard」にたどり着きました。
使い方はこちらのページで詳しく解説されています。
まずは、「関連記事ツール設定画面」を開きます。
このようなページが出てきます。
トップのURLに、ブログのトップ画面のURLを入れ
サイトタイプは「はてなブログ」を選びます。
ちなみに、Milliardははてなブログのほかにも、
Blogger 、WordPress、ライブドアブログ、FC2ブログで使うことができるそうです。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
「紹介文」のところは、何も書かなければ「こんな記事も書いています」と表示されます。
「この薄い字ででてきている感じ…
どこかで習った覚えがあるぞ」
とりあたまのぽんきちさん、過去記事をあさります。（こんな時にMilliaedの表示がすごく便利）
「あった！
「ドットインストール HTML入門 #18」で習ったのでした。
（間違えていたらごめんなさい）
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
さあ、Milliardに戻ります。さっそく入力してみましょう。
URLとサイトタイプを選択し、あとはいじらないで「コードを取得」というボタンを押します。
すると、コードが現れるのでそれをコピーします。
「デザイン設定」→「カスタマイズ」→「記事」→「記事上下のカスタマイズ」→「記事下」
この、「記事下」のところに、先ほどコピーしたコードをはりつけます。
そして、「変更を保存する」ボタンを押すと
このようになりました！
記事数が多いと、時間がかかるみたいです。
私は記事数が少ないので、あっというまにこんな表示になりました。
スマートフォン版
スマホ版のデザインを、レスポンシブデザインにしている場合、表示が崩れる場合があるそうです。
記事上・記事下にMilliard関連ページ以外で設定されているコードが、PC専用だった場合、表示が崩れる可能性があります。
(例：width:1000pxなどを指定しているCSS)
ですので、上記の設定をした場合には、スマートフォンで表示がおかしくならないかどうかご確認下さい。
また、
はてなProになっている場合、
記事下のカスタマイズができるので問題ないようです。いいねPro！
「私はレスポンシブデザインにしていないし、
まあいいかな」
関連記事がタイル状になっているのを楽しめるのは
PC版だけということにしました＾＾；
関連記事を見るのがとっても楽しくて、
しかもかっこいいMilliard。
ぜひともためしてみてはいかがでしょうか。
