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

気ままに殴り書き

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

はてなブログ、サイドバーのカテゴリー表示をスマホ版にコピペで移植

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

f:id:kminebg1110:20160515085133j:plain

先の記事「はてなブログ、カテゴリーの階層化を行い200記事をスッキリ整理」に続き、はてなブログ・デフォルトのスマホサイトにカテゴリーを表示しました。

以前から、スマホサイトに「子カテゴリー」のリンクをフッターに表示したかったものの、リンク設定が面倒だったため、長期間 作業を保留。今回は、パソコンサイト・サイドバーのカテゴリーを、ほぼコピペの簡単設定で完了させましたので、レポートします(はてなブログ Pro向けの記事となります)。

 

▼既存の「カテゴリーメニュー」。記事を読み終わった後、この選択メニューを見るために冒頭に戻る人は多くないだろうと思い、今回 フッターにカテゴリーを導入。

f:id:kminebg1110:20160515081139j:image

 

▼冒頭のメニューは「親カテゴリー」の選択形式にしています。

f:id:kminebg1110:20160515081850j:image

 

スポンサーリンク

 

 

サイドバーのカテゴリーを、コピペでスマホに移植する

▼まずは、現時点での完成版。疑似的に「親カテゴリー・子カテゴリー」のように見せかけています。疑似的にと言いつつも、機能しています。

f:id:kminebg1110:20160514192232j:plain

 

▼ブラウザにより対応が異なるかもしれませんが、Google Chromeの場合、以下のステップで、サイドバーのHTMLをコピーします。

 

  1. カテゴリーのところで、右クリックし「検証」を選択。
  2. そうすると、画像右のようにHTMLの内容を確認できるため、該当部分のHTMLをコピーします。利用している「ブログのテーマ」により、冒頭のHTMLの記述が異なるはずですので、「どこが始まりか」は記載しませんが、画像左の青くなっている部分と右側の表示がリンクしているハズです。

 

f:id:kminebg1110:20160514191528j:plain

 

▼上の画像の左半分を拡大。

f:id:kminebg1110:20160514191544j:plain

 

▼同じく、右半分を拡大。

f:id:kminebg1110:20160514191621j:plain

 

▼コピーしたHTMLを「はてなブログ・管理画面」のスマホのフッタ部分に貼付け。

f:id:kminebg1110:20160514191640p:plain

 

▼貼り付けた直後がこちら。「カテゴリー」の見出しはパソコンサイトと同じ配色となっています。私の場合はこのままいきます。ここで、必要に応じて修正すべき点は下記です。

  1. 私は、先の記事「はてなブログ、カテゴリーの階層化を行い200記事をスッキリ整理」のとおり、カテゴリーの階層分けを行っているため、続階層分けの「親カテゴリー」の名称が全てに記載されており、これは不要なので名称を変更します。例えば「スマホ-iPhone」の「スマホ-」の記述を削除。
  2. ()の記事数は、記事を増やしても可変とはならないため不要。

 

f:id:kminebg1110:20160514192222j:plain

 

▼上記1・2の不要な部分を削除するため、先ほど貼付けたHTMLを修正します。赤枠が修正後の事例です。親カテゴリーである「スマホ」の子カテゴリーであるように見せるため、「.....iPhone」と修正しました。同様に()の記事数は削除しています。

f:id:kminebg1110:20160514191649p:plain

 

▼そして、現時点での完成版。「親カテゴリー」「子カテゴリー」の関係が明確になりました。現時点としているのは、デザインをもう少し工夫したいとの意味で、機能的には問題ありません。

f:id:kminebg1110:20160514192232j:plain

 

まとめ

いかがでしょうか。私のサイトの場合、この対応にて、ヘッダーの「親カテゴリーの選択項目」と、フッターの「子カテゴリーの表示」となり、カテゴリーの挟み撃ちとなりました。
これで、アクセスが激増するわけではないのですが、少なからず読者・運営者双方の利便性が増しているかと思います。作業もほぼコピペのみの簡単設定であり、カテゴリーの大修整の場合にも少ない労力で対応できます。