読者です 読者をやめる 読者になる 読者になる

Yukihy Life

ゆきひーによる日常生活をアウトプットするブログ 映画・TOEIC・教育ネタとだいぶ物理とWeb制作

Milliard関連記事プラグインのCSSをいじり2列にしてブログになじむようにしてみました

Web制作
スポンサーリンク

関連記事の表記に再びMilliardの関連記事プラグインを使い始めました。

その関連記事のデザインを変更したので書いておきます。(許可はとってあります)

 

Milliard関連記事プラグインとは?

f:id:ftmaccho:20150720133310j:plain

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

Milliard関連記事プラグインは、はてなブログに搭載されていない関連記事を入れることができるプラグインです。

記事数が増えてくるといちいちリンクを貼るのも面倒なので、関連記事プラグインで回遊率を上げよう!というものです。

かなりオシャレで、表示される記事もしっかり関連したのが出てきます。

 

導入した結果

この関連記事表記は、パネルとリストと選ぶことができます。パネルの方がおしゃれですが、今回はシンプルにリストにしてみました。

 

普通に導入するとこんな感じになります。

f:id:ftmaccho:20150720143844j:plain

ですが、何となく無駄なスペースが空いてしまうので、CSSをいじってみました。

 

いじった結果はこちら

f:id:ftmaccho:20150720143921j:plain

変更点としては、

  • 画像の縦横サイズを固定
  • 二列にしてスペースを無駄なく
  • 「関連記事」の文字の周辺の装飾

というところです。

スマホではまた一列にもどるようにしています。

 

実際のカスタマイズ

まずは導入画面での選択はこんな感じにしています。

f:id:ftmaccho:20150720144626j:plain

で、導入した後に、CSSをいじっていきます。追加したコードはこんな感じです。

 これを「デザインCSS」に入れます。すると先ほど貼ったように、こんな感じに。

f:id:ftmaccho:20150720143921j:plain

加えたコードの説明をしていきます。

  • 1~3行目→画像の縦幅と横幅のサイズ指定です。サイドバーの最新記事などのサイズと合わせています。
  • 6~8行目→フォントをちょっと縮めます。
  • 9~16行目→二列にするための部分です。元々の線を消して上に線を足しているのは、サイドバーのものと合わせるためにやってます。
  • 17~23行目→「関連記事」の文字の周りの装飾なので、適宜個人で変えていただければと思います。

レスポンシブにしている人は、スマホ画面で一列に戻さないと窮屈になってしまうので、下に

を入れると元に戻ってくれます。

 

ちなみに、おそらく元々のHTMLでデザインされている部分は、「!important」をつけて優先度をあげないと変わってくれないみたいです。

ただこれをつけると、デザインCSSに忠告のような黄色いものが出てきますが、とりあえず気にしないでいきます。

 

このプラグインの欠点

以前、一回このプラグインを利用させていただいていました。

www.yukihy.com

 性能面では全く文句ないのですが、このプラグインの欠点としては、「PageSpeed Insights」で計測すると、点数が25~30点くらい下がってしまうんです^^;

現在こんな感じ。

f:id:ftmaccho:20150720134021j:plain

ひゃー!!!PCは36点です。それぞれ導入前はモバイル55点、PC70点はあったんですけど。

 

ただ、点数は下がりますが体感速度としてページの読み込みが遅くなることはないです。なぜかは「Milliard関連ページに関するよくあるご質問 | シスウ株式会社」に書かれています。

 

SEOなどに関しては正確に言えないのですが、Google神のツールで点数が下がるとやっぱり不安ではあります。

 

まとめ

導入した結果はまだ分かりませんが、記事下に関連記事を入れて、ほぼWordPressブログと遜色ない感じになってきたんじゃないかと思います。

またいろいろと変更していくと思いますが、とりあえずこんな感じです!

 

ブログカスタマイズまとめはこちら

www.yukihy.com