|この広告は、90日以上更新していないブログに表示しています。リンクはてなブログのPC版だとサイドバーにカテゴリを表示できます。はてなブログのスマホ用ページにはカテゴリ一覧がないんですよねぇ。これでは訪問者が他にどんな記事があるかわからず、一つの記事を読み終えたらすぐに帰ってしまいそう。いうことで、少しでもユーザの利便性が上がるようにスマホ用ページにカテゴリ一覧を設置することにしました。カテゴリ一覧のデザインと設置場所カテゴリを設置するにあたって最初に考えたのが、「どこに設置する??」ということ。これは自分があったら便利だなと思うヘッダーとフッターの2ヶ所にすることに。次に「どんなデザインで??」ということ。デザインの参考にと検索してみるとこんな感じの記事を発見しました。kumi-logヘッダーに関してグローバルナビゲーションの方は、カテゴリが一気に一覧で表示されるのでユーザーの目にとまりやすいという利点があります。プルダウンメニューの方は、カテゴリ選択のフォームを一つ設置するだけなので、ゴチャゴチャせずに済みます。これに関して、どちらの方がいいというのは運営しているブログによって違うと思うんです。元々のカテゴリの数が少なかったり、全てのカテゴリを表示させるのではなくイチオシのカテゴリを2~3だけ個置きたいといった場合はグローバルナビゲーションの方がいいと思いますし、全てのカテゴリを表示したいけどカテゴリの数が多いといった場合はプルダウンメニューの方がすっきりすると思います。私のブログの場合はカテゴリが多くなってしまいそうなんで、プルダウンメニューに決定。フッターに関してヘッダーと同じでプルダウンメニューでもいいかなと思ったんですが、ユーザーが記事を読み終わった後「この後どうしよう」ってなった時に、今度はカテゴリ一覧が全て見えるようになっていた方がいいんじゃないかと。いうことで、カテゴリ一覧リストっぽいものを自分で作ることに決定。↑最終的にはこんな感じ。デザインが決まったところで設置作業に取り掛かりました。上の記事に書いてあるソースを参考にして、少し手を加えさせていただきました。value="カテゴリ5のURL">カテゴリ5</option></select></div>style内の「select」「.menu-puldown」でマージンとプルダウンメニューのサイズを変更可能。「カテゴリ○のURL」と「カテゴリ○」のところは自分で記述。value=""></option>」は追加した分だけカテゴリが増やせます。これを「デザイン」→「スマートフォン(スマホのマーク)」→「ヘッダ」のタイトル下の中に書き込めばOKです。ヘッダーはこんな感じで完成。動作確認もできたので、次はフッターの設置。カテゴリの横に画像を設置したい場合は以下のソースで出来ると思います。href="カテゴリ5のURL">カテゴリ5</a></td></tr></table></div>これを「デザイン」→「スマートフォン(スマホのマーク)」→「フッタ」の中に書き込めばOKです。↑こんな感じになります。最終的には画像入りのカテゴリ一覧にしたいのですが、今のところ使えそうな画像がないので文字のみで落ち着きました(汗。これで直帰率が少しでも改善されればなぁと思います。検索Twitter&はてな読者登録@chipspdさんをフォローブログランキング人気ブログランキングへ当ブログは人気ブログランキングに参加しています。TOPはてなブログをはじめよう!chipsforestさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。