みっかぼーず

日常も仕事もゲームも下ネタも徒然なるままに書いていく。更新は不定期(水or日)

【ブログカスタマイズ】スマホページ用のカテゴリ一覧を表示させてみた

どーも、いとです。
ブログカスタマイズでスマホ版に「カテゴリ一覧」を表示させました。今までもカスタマイズ自体はコッソリやっていたのですが、せっかくなので経緯と対応について記事を書きます。


カテゴリ一覧追加の経緯


f:id:sousakuito:20180104003702p:plain:w640

当ブログはPC版(画像はChromeブラウザの表示)ではサイドメニューに「カテゴリ一覧」を表示していますが、スマホ版にはカテゴリ一覧を付けていませんでした。

最近では、マイクラだけでなくFGOやPythonの記事を書いており、コンテンツが増えつつあります。コンテンツのジャンルが増えた分、特定ジャンルに惹かれてブログに来訪してくださった方がいらっしゃると思うのですが、ここで問題が一つ発生します。
マイクラ記事に興味を持って来たのに、記事一覧がFGOのガチャ爆死記事ばかりだったため、目当てのマイクラ記事を見つけられない!ということになりかねないのです。

当ブログ来訪者はPCよりスマホのユーザさんが多いので、スマホでもお目当ての記事を探しやすいよう、「カテゴリ一覧」をページ上部に設置することにしました!


カテゴリ一覧の設定


下記サイトの「スマホページ上部にカテゴリー一覧をリスト表示する方法」を参照し、カテゴリ選択のプルダウンリストを設置しました。

各カテゴリのURLはこんな感じで取得しています(画像赤枠)
f:id:sousakuito:20180104113236p:plain:w640
「ブログURL/archive/category/カテゴリ名」ですね。URLを貼り付けると、カテゴリ名の全角かなや漢字箇所が「%E3%82~」のような表記になりますが、そのまま貼り付けて大丈夫でした。


設定後のスマホページ


↓カテゴリ一覧設置後のスマホ版表示がこちら↓

【デベロッパツール(Galaxy S5)の表示】
f:id:sousakuito:20180104004330p:plain

※デベロッパーツール使用時のChromeバージョンは「62.0.3202.94」です。


プルダウンリストを押下すると、各カテゴリがリスト形式で表示されます。
f:id:sousakuito:20180104004130p:plain

カテゴリを押下することでカテゴリタグが付いた記事の一覧ページに遷移できます。


最後に


カテゴリ一覧を追加して思ったこと

★メリット
目当てのカテゴリ記事が探しやすくなった

TOPページ(記事一覧)にカテゴリ一覧があるので、読みたいカテゴリを見つけるのが楽になったかなぁと思います。

★デメリット
保守が面倒

各カテゴリ名や記事一覧のURLは手動で埋め込んでいるため、新しいカテゴリを追加したりカテゴリ名を変更したりした場合は、その都度「カテゴリ一覧」のソースを修正する必要があります。

メンテナンスのしやすさやデザイン面で気になることはあるので、今後改修する予定です。(各記事にカテゴリ一覧はいらないのでは?とか、カテゴリ一覧の表示がでかいとか……)
が、しばらくはこのままでいきます。

直帰率やらPV数やらの下心が1mmもないかと言われれば嘘になりますが、せっかく来訪してくださった方にとって不親切なのはいかがなものかと思い、機能追加を優先しました。(自分が他者のブログを読んでいるときにカテゴリ一覧があると便利だと思ったので追加した、というのが一番の理由だったり)

皆様にとって少しでも読みやすいブログになっていれば幸いです。


では、今回はこのへんで(*^^*)ノシ