Milliard関連ページプラグインをGRAPHIE(DigiPressテーマ)に導入

ブログのエントリーに関連したページを良い感じで表示できるプラグイン「Milliard関連ページ」をDigiPressテーマ「GRAPHIE」に導入しました。

実際には、導入するにあたり画像が上手く表示できないトラブルに出会い、プラグイン作者の星野善彦さんに協力頂き、導入できました。

Milliard関連ページプラグイン

このプラグインは関連するページを、アイキャッチ画像を上手く使って、かなり格好いい感じに表示してくれます。PCサイトでは、関連するページのリストをスクロールしてドンドン表示してくれます。

Milliard関連ページプラグイン.001.jpg

しかも、レスポンシブル対応なので扱いやすく、スマートフォンの表示ではスクロールを止める設定もできる優れた機能をもっています。

WordPress.org公式ディレクトリ登録済みのプラグインです。なお、Blogger・はてなブログ・ライブドアブログにも対応しているプラグインだそうです。

参考エントリー

設定方法

管理画面のプラグイン 新規追加画面からインストールします。「by milliard」で検索出来ます。インストール後、管理画面の「設定」-「Milliard関連ページ」を開きます。

表示場所を「挿入箇所」のみにチェックします。また、スマホでの表示の「挿入箇所のスクロールを無効にする」にもチェックを入れ、5件表示するように設定します。

表示したいウィジェット(場所)に「テキスト ウィジェット」を配置し、下のコードを書き込むことで、関連ページのリストが表示されます。

[code] <ins id="ssRelatedPageBase"></ins> [/code]

これでOKなのですが、GRAPHIEの場合、画像の表示にエフェクト効果のCSSが設定されており、これが原因で、当初は画像が表示されない現象に悩みました。

このトラブルに関連しているのが、下のトラブルです。

  • [箱] 【GRAPHIE トラブル解決】Simple MapプラグインのGoogle Map 地図が表示されない | [箱]ものくろぼっくす → https://mono96.jp/?p=24664

作者さんに連絡してトラブル解決

CSSを調整しようか、、と、思いつつ、ちょうど作者の星野さんとは、数日前にイベント(オフ会「Edge dRunk」)にて、お会いしていたご縁があったので、トラブルをfacebookメッセージにて相談させて頂きました。

  • メルマガ「Edge Rank」初のオフ会・「Edge dRunk」が無事終了しました。お越しいただきました皆様に感謝です #EdgeRankBloggers #EdgedRunk | → http://www.odaiji.com/blog/?p=9282

このプラグインのCSSは配信元のサーバーから読み込んでいるそうで、配信(開発)元サーバー側からCSSを修正していただき、見事に解決できました。感謝です。

PC表示でもスマートフォンでも良い感じ

このプラグインの関連するページの表示デザインは素晴らしいです。PCではPCのメリットを、スマホではスマホに合わせた表示となっており、画像の印象も活用した関連するページを表示できます。

アイキャッチ画像を上手く活用できるので、関連ページを上手く紹介したいなぁと考えられている場合には、試して見る価値があると思います。

この記事を書いた人

ものくろ(Webコーチ)

フリーランスのブロガー・Web&Blogコーチ。個人・法人様を問わず、情報発信をコンサルティングとサポートしています。( 活動実績はこちら

親指シフトのorzレイアウト開発者でもあり、日本語入力のエキスパート。

ブログは月間65万PVを記録(2016年1月)したことも。200回を超えるワークショップ開催・のべ1,000名のブログサポートに携わっています。

WordPressが得意です。WordPressコミュニティのイベントにも参加しております。お会いした時はよろしくお願いします。

東京 秋葉原に拠点と住民票がありますが、大阪や名古屋を中心に、日本を移動しながら仕事をしつつ暮らしています。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

今日のピックアップ記事はこちら