びーきゅうらいふ!

 ホラー映画やアニメやゲームを好きに語る感想サイト。ネタバレ多め。

スマホ版にLinkWithinを導入して関連記事を表示させました!~はてなブログ初心者のカスタマイズ奮闘記②

f:id:basiliskos:20151028042451j:plain

PC版をお使いの皆様には記事の下に表示されている「関連記事」。

「あわせて読みたい!」
「他にこんな記事も読まれてます!」
「あなたにおすすめの記事はこちら!」

などの文章の後、下にずらっと関連記事が表示されるという超便利な機能!
はてなブログで様々なカスタイマイズをされている方が紹介して下さっている機能です。(こちらについては後々しっかりと紹介させて頂きます!)

ただ、PC版のものはスマホ版にはつけられない・・・。

そこで今回!!
スマホ版に新たに「関連記事」を表示させる機能をつけました!

「LinkWithin」を導入!!

こちらの記事を参考に、関連記事を表示させる「LinkWithin」を導入致しました!
id:dokuwohakuさん!リンクカードの挿入記事、早速参考にさせて頂きました!ありがとうございました!!)

「オススメ記事はこちら!」などの文を入れる際、文字の色や太さを変更する方法は上記の記事を参考にさせて頂きました。こういった記事のおかげで導入することができました。本当にありがとうございます!!

「LinkWithin」で関連記事を表示する方法は既に自分が愛読しているブロガーさんたちが多く利用しており、ブログを覗くたび「とても見やすい良いデザインだ・・・!」と思っておりました。つまりパクリ
参考記事があるおかげで導入も超スムーズ!さすがみなさんが使われるだけあるぜ・・・!

悩みどころは・・・

ネックはPC版の関連記事表示と違ってカテゴリーごとの関連記事が出るわけではないという事と(でもかなり精度がよいので、カテゴリが少ない方ならあまり気にならないかも?)、
レスポンシブ対応ではなくスマホ版のみのレイアウトの場合関連記事を3つにすると横幅に収まらず、横スクロールが若干発生してしまう事・・・

「横スクロールしないよう、なんとか幅を調整できないか!?」と、今の今まで影で色々と調整していたのですが、やはり上手くいかず・・・

ただグローバルナビゲーションだけではなく、やはり関連記事は記事本文を読み終わってすぐの場所にあった方が、特にスクロールで下に下に読んでいくスタイルのスマホでは便利なハズ!!

というわけで、今回から本格的に導入してみました☆

ガラケーの自分にはスマホから直接レイアウトを確認することは出来ませんが、スマホから閲覧しているみなさん、普通に読めるでしょうか?

ものすっごい横はみ出てる!!!
とかないですか??

結構大きくカスタマイズしたのでちょっとドキドキです!
スマホから閲覧している方で物凄い読みにくい!とかここが変!とかありましたら、承認制なので若干のタイムラグはありますが、コメント欄などに一言頂けましたらありがたいです!

↓カスタマイズ初心者・奮闘の記録!