魂を揺さぶるヨ!

ブログを通じて「魂を揺さぶり情熱を燃やせる何か」を探すゲーム制作を生業とする30代の男です。 アウトドア、インドア、なんでも好きです。

【図解あり!】かっこいいビジュアルの関連記事を表示する方法 【こんな記事も読まれてます】

スポンサーリンク


こんにちはユレオです!


ブログを巡回していて複数の画像が一か所にまとまった関連記事表記を見たことはないでしょうか?

 

関連記事が一つのウィンドウの中にまとまっている。

 

しかも画像が敷き詰められていておしゃれだし、見やすい!

 

f:id:soul-vibration:20170715083855j:plain

 

うーん、あんなおしゃれ表示はきっと難しい設定がいるんだろうなー 

 

と考えてたのですが、意外と簡単に設定できました。

 

今回はおしゃれ関連ページ表示、Milliard関連ページの設定方法ご紹介したいと思います。

Milliard関連ページプラグインについて | シスウ株式会社

 

 

合わせてお読みください 

  

設定手順1 関連記事ツール設定画面でコードを取得する

1:Milliard関連ページの関連記事ツール設定画面に行きます。  

関連記事ツール設定画面

 

 2:必要な個所に情報を入力します。

f:id:soul-vibration:20170714232652j:plain

設定が必要なのは以下の通りです。

 

 ①:トップのURLを入力。関連記事を作りたいブログのURLです。

 (例:http://www.tamashii-yusaburuyo.work/

 

 ②:サイトタイプの選択。

 

 ③:紹介文の指定。上部の関連記事の説明文を指定できます。

  (例:他にこんな記事も書いてます)

 

 ④:並び順を選択。

 

 ⑤:表示位置の選択。「挿入箇所」をお勧めします。

 

 ⑥:PCでの表示の指定。パネルタイプにすると目的の見た目になります。

 

 ⑦:スマホでの表示の指定。好みに合わせて指定してください。

 

最後にコード取得ボタン押します。

 

3:コードが表示されるので全選択してコピーします。

 OKを押せば1つ前の設定画面に戻ります。

f:id:soul-vibration:20170714234505j:plain

設定手順2 はてなブログ画面

1:はてなブログの デザイン→カスタマイズ→記事→記事下を選択します

f:id:soul-vibration:20170715082952j:plain

 

 

2:先ほどコピーしたコードを張り付けます。

f:id:soul-vibration:20170715000715j:plain

 

3:デザイン→カスタマイズ→記事→記事ページをプレビューを押します。

f:id:soul-vibration:20170715001049j:plain

 

4:記事下部分に先ほど張り付けたコードの関連記事が表示されます。

問題がなければ画面左上の「変更を保存」を選択します。

f:id:soul-vibration:20170715002354j:plain

 

 

以上で終了です。

 

関連記事がかっこよく並んで表示されるのでついつい見てしまいます。

 

うまくいけば別の記事を読んでもらえるきっかけになるのではないでしょうか。