関連記事の表記に再びMilliardの関連記事プラグインを使い始めました。
その関連記事のデザインを変更したので書いておきます。（許可はとってあります）
Milliard関連記事プラグインとは？
Milliard関連ページプラグインについて | シスウ株式会社
Milliard関連記事プラグインは、はてなブログに搭載されていない関連記事を入れることができるプラグインです。
記事数が増えてくるといちいちリンクを貼るのも面倒なので、関連記事プラグインで回遊率を上げよう！というものです。
かなりオシャレで、表示される記事もしっかり関連したのが出てきます。
導入した結果
この関連記事表記は、パネルとリストと選ぶことができます。パネルの方がおしゃれですが、今回はシンプルにリストにしてみました。
普通に導入するとこんな感じになります。
ですが、何となく無駄なスペースが空いてしまうので、CSSをいじってみました。
いじった結果はこちら
変更点としては、
- 画像の縦横サイズを固定
- 二列にしてスペースを無駄なく
- 「関連記事」の文字の周辺の装飾
というところです。
スマホではまた一列にもどるようにしています。
実際のカスタマイズ
まずは導入画面での選択はこんな感じにしています。
で、導入した後に、CSSをいじっていきます。追加したコードはこんな感じです。
これを「デザインCSS」に入れます。すると先ほど貼ったように、こんな感じに。
加えたコードの説明をしていきます。
- 1~3行目→画像の縦幅と横幅のサイズ指定です。サイドバーの最新記事などのサイズと合わせています。
- 6~8行目→フォントをちょっと縮めます。
- 9~16行目→二列にするための部分です。元々の線を消して上に線を足しているのは、サイドバーのものと合わせるためにやってます。
- 17~23行目→「関連記事」の文字の周りの装飾なので、適宜個人で変えていただければと思います。
レスポンシブにしている人は、スマホ画面で一列に戻さないと窮屈になってしまうので、下に
を入れると元に戻ってくれます。
ちなみに、おそらく元々のHTMLでデザインされている部分は、「!important」をつけて優先度をあげないと変わってくれないみたいです。
ただこれをつけると、デザインCSSに忠告のような黄色いものが出てきますが、とりあえず気にしないでいきます。
このプラグインの欠点
以前、一回このプラグインを利用させていただいていました。
性能面では全く文句ないのですが、このプラグインの欠点としては、「PageSpeed Insights」で計測すると、点数が25~30点くらい下がってしまうんです^^;
現在こんな感じ。
ひゃー！！！PCは36点です。それぞれ導入前はモバイル55点、PC70点はあったんですけど。
ただ、点数は下がりますが体感速度としてページの読み込みが遅くなることはないです。なぜかは「Milliard関連ページに関するよくあるご質問 | シスウ株式会社」に書かれています。
SEOなどに関しては正確に言えないのですが、Google神のツールで点数が下がるとやっぱり不安ではあります。
まとめ
導入した結果はまだ分かりませんが、記事下に関連記事を入れて、ほぼWordPressブログと遜色ない感じになってきたんじゃないかと思います。
またいろいろと変更していくと思いますが、とりあえずこんな感じです！
ブログカスタマイズまとめはこちら
