はてなブログの記事下の関連記事の表示が８通りもあるって知ってた？
最近、記事下の関連記事の部分もカスタマイズしました。
参考にさせて頂いたサイトをまとめておきます。
カスタマイズの理由
これまでの記事下の関連記事の表示も気に入っていたのですが、
変更に踏み切った理由はただ一つ。
ページの読み込みが遅いからです。
以前の関連記事の表示
以前の関連記事の表示には、
こちらのゆきひーさんのカスタマイズを使用させて頂いていたのですが、
ゆきひーさん自身も仰っているように、
ページの表示が、すごく遅くなるんですよね。
SNS公式ボタンの読み込み
以前は、ページの読み込みが遅くても、なんとかだましだまし使っていたのですが、
SNSフォローボタンのカスタマイズを止めて、
ソーシャルメディアの公式ボタンを採用してから、
そちらのボタンの読み込みにも、時間がかかるようになってしまいました。
関連記事のカスタマイズ
ちょうど良い機会だから、これまで表示の遅さが気になっていた関連記事も
一緒にカスタマイズするか〜と思って、挑戦しました。
まず初めに試してみたのが、ゆきひーさんのオリジナルのカスタマイズ。
大きな問題にぶつかる
これまで使っていたデザインとも似ているし、
読み込みも早くなるしで、いいんじゃないかな〜と思ったのですが、
ここで大きな問題にぶつかりました。
スマホ版は、問題なく作動するのですが、
PC版が、うんともすんとも動かない。
何が問題なのか？
パンくずリストを設置しているせいかと思って、
Javascriptの数字や挿入位置を確認しても駄目。
ブログのテーマによる違いかと思って、ゆきひーさんのアドバイス通りに
Javascriptの13行目の数字をいじっても、全く反応しない。
いろいろ試した結果、現在の私の推理として、多分原因は、
トップページを記事一覧にしているしているせいではないかと思っています。
（余談ですが、ウェブサイトの問題を追求するのって、
探偵小説の謎解きに似ている気がしませんか？）
トップページを記事一覧にする弊害
以前の記事でも紹介したように、私のような一日に複数回更新する雑記ブログでは、
トップページが記事一覧の方が見やすいなと思ってから、それを採用しています。
しかし、こちらのブログで紹介されていたJavascriptで転送する方法なので、
少し弊害もあるようです。
今回のゆきひーさんの関連記事が、私のPC版では使えないのは、
そこら辺が理由なのかなと思っています。
（または、Writtenのデザインテーマと相性が良くないのか…）
２つの違う方法を試す
トップページを記事一覧にする方法は、他にも２つ方法があるので試してみました。
１つ目は、前回の記事でも紹介した、こちらですが、
私には少し高難易度すぎて、挫折しました。
いつものやり方に戻る
２つ目は、交流のあるブロガーさんが、以前に掲載して下さった記事です。
このカスタマイズをするなら、「続きを読む」のカスタマイズも一緒に必要です。
これも、すごく良い方法なのですが、私が求めている物とは少し異なっているので、
結局、いつものやり方に戻りました。
８通りの関連記事の表示法
トップページの問題を解決できないのなら、
他の関連記事の表示を探さないとな〜と思っていた時に見つけたのが
有名ブログ「やぎろぐ」さんの、こちらの記事です。
なんと、はてなブログで記事下に関連記事を表示する9つの方法を
紹介してくださっているじゃないですか！！
このまとめ記事は、すごく役に経ちました。
ただ５番目に紹介されている記事は、
ブログを終了されていらっしゃるので、
実際は９通りではなく、８通りになります。
Milliardのパネル表示
この９通りの関連記事の表示法を、一通り検討した結果、
ひとまず、Milliardのパネル表示を採用することにしました。
わたしのブログは文章が中心なので、全体的なデザインを考えると、
記事下の関連記事の部分で、画像がたくさんあるというのは、
最後まで読んで下さった読者の方の目を楽しませてくれるのかなと思いまして。
これまでは仕事が忙しくて余裕がなかったのですが、
もう少し落ち着いたら、自分が撮った写真とかも挑戦してみたいです。
まとめ
巡り巡って考えてみたら、
一番最初の問題であった「ページの読み込みの遅さ」は、
あんまり解決しなかった気がしますが（笑）
ひとまず気に入ったデザインの関連記事の表示ができたので、
今のところは、満足しています。
カスタマイズって、いろいろ変更してみても、また元に戻したり、
最初の問題は結局解決しなくても、思わぬ収穫があったり、
そんな予測不能なところがありますよね〜（笑）
