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

気ままに殴り書き

日々感じたことを、気ままに書き記す予定でしたが。。。

記事下のMilliard関連記事プラグインを、見栄えよくカスタマイズ

はてなブログ ブログ運営 ブログ運営-カスタマイズ はてなブログ-カスタマイズ

f:id:kminebg1110:20160214130837j:plain

「はてなブログ」を利用している当ブログでは、関連記事の紹介に、しばらく「池田仮名」さんの「あわせて読みたいG」を使用していましたが、Google Feed APIの停止問題が生じて以降、「Milliard関連記事プラグイン」を使用しています。

がしかし、この「Milliard関連記事プラグイン」のプラグインは、「あわせて読みたいG」と比較すると、いま一つメリハリに欠けていました。パソコン版では「ゆきひー」さんの記事に基づき修正していましたが、今回 スマホ版も修正しましたので、そのレポートです。

 

▼ブログカードを利用したカッコいいものでしたが、Google Feed APIの停止問題にあわせ、当ブログでは「Milliard関連記事プラグイン」を使用。

▼特に、ブログのカスタマイズ関係では多いに参考にさせていただいている「ゆきひー」さんの記事を、今回も参考(コピペ)しました。

 

スポンサーリンク

 

 

Milliard関連記事使用のBefore・After

スマホ版のMilliard関連記事プラグインのBefore・Afterです。

Before

プラグインを弄ることなく、そのままの状態です。冒頭の「こんな記事も書いています」は太字になっているものの、もう少しメリハリが欲しいところ。

画像については、アイキャッチ画像のサイズが不揃いだったため、そのまま関連記事の画像のサイズも不揃いで、これはかなりカッコわるいものです。読者の方への影響はないと思いますが、ブログのデザインは統一性が欲しいです。

f:id:kminebg1110:20160214112526j:image

After

「こんな記事も書いています」の背景色は、ヘッダー・見出しと同色にしました。また、画像のサイズを揃え、トップ画面の画像カスタマイズと同様に黒枠を付け強調しました。

f:id:kminebg1110:20160214112906j:image

Milliard関連プラグインの導入・設定時の留意事項

「はてなブログ」「FC2」などのブログ毎の導入・設定方法は、以下の公式サイトに詳細な説明がありますので、ポイントのみの補足します。

 

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

 

設定時に「こうしたほうがよいのでは」と思うポイントは以下のとおりです。

f:id:kminebg1110:20160214120444j:plain

  • ①はご自身のブログを選択。
  • ②は「関連記事」など好みのものを入力。
  • ③の「表示位置」は「挿入箇所」のみをチェックし、記事下に関連記事を表示したいところです。
  • ④⑤の表示方法についてはそれぞれの好みですが、スマホでパネルにすると強調しすぎ感があり、私はリスト表示が好みです。
  • ⑥は「スクロールを無効にする」にチェックがよいです。私は以前、「パネル」表示の「スクロールあり」にしたことがありますが、逆に私の汚いアイキャッチ画像が目立つこととなり、ゴチャゴチャしすぎて、即削除した経緯があります。綺麗な画像を使用している方は「リスト表示」もありかと思います。

 

追加したCSS

「ゆきひー」さんの記事に記載のものに、一部追加・修正したものです。

以下のコードを追加しますが、「はてなブログ(Pro)」の追加箇所は、

  • スマホの場合、ダッシュボード・スマホの上記Milliard関連プラグインのコードを挿入した箇所。私は記事下に置いてますので、記事下に追加しました。
  • パソコンの場合、冒頭の<style type=text/css>と最後の</style>を除いたコードを「デザインCSS」に追加

 

<style type=text/css>
.ssImg{
width: 80px; /*サムネイル画像の横幅*/
height: 80px; /*サムネイルが画像の縦幅*/
border-radius: 0em; /*サムネイル画像の角の丸みをなくす*/
border: solid 3px rgb(61, 61, 61); /*画像の枠線をつける*/
}
.ssTitle{
font-size: 90%;
   }

.ssLimitedContainerHeader > div > div > div{
color: #ffffff ;
background: #2980b9;
font-size: 16px ;
padding: 10px 5px 10px 10px !important;
margin-top: 15px;
}
</style>

 

なお、上記コードを追加すると、私のスマホ(上記スクショ参照)と同じ仕上がりになります。

修正する場合のポイントは以下です。

  • width: heightの80pxは画像のサイズですが、お好みで調整ください。私は当初、トップページの画像サイズに合わせて90pxにしたところ、全体の幅の関係からか、正方形にならなかったため80pxにしました。
  • border-radius:border: solidは、画像の黒枠表示ですが、必要ない場合は2行を削除となります。
  • .ssTitle{font-size:はリンクタイトルのフォントサイズですが、こちらもお好みにて。
  • 最後の.ssLimitedContainerHeaderは「こんな記事も書いています」の背景色・フォントサイズです。背景色など、ご自分のブログデザインに合わせるとよいと思います。

以上となりますが、「池田仮名」さん・「ゆきひー」さんには重ねて感謝です。ありがとうございます。