ブログの見通しを良くするために記事にカテゴリーを付けたいのですが、残念ながらBloggerにはその機能はありません。
ソースコードを変更すれば実現できるようですが、その場合、各記事側でも設定が必要で膨大な作業量となるので今更やる気にはなれませんでした😅。
そんな時に、ウィジェットに設置できるものをちょっと閃めき💡ました。
|
今回はこの『カテゴリー』ウィジェットの紹介になります。
■【Blogger備忘録】簡単にカテゴリーのウィジェットを設置してみる（ラベル機能使用）
●狙い（目標とするウィジェットの仕様）
作成する『カテゴリー』ウィジェットは
- 記事のカテゴリー名（大分類）をウィジェットに表示する
- ウィジェットのカテゴリー名を選択すると該当する記事の一覧を表示する。
という感じです。
●設置方法
・方針
Bloggerのそもそもあるラベル（タグ）機能を利用します。
既に各記事に設定しているラベルのうち、大分類として使えるラベルをカテゴリーとしてウィジェットに載せるようにします。
|
| 本ブログのラベルウィジェット（Chrome（PC版）画面）：普段は表示していません😅 |
・使用するウィジェット（[HTML/JavaScript]ガジェット）
Bloggerの編集画面の
- 『レイアウト』 > 『＋ガジェットの追加』
にある [HTML/JavaScript] を使います。
|
| Blogger『レイアウト』編集画面 |
[HTML/JavaScript] の中身は、リスト形式（<ul>, <li>タグ）にして各カテゴリーのソースコードを貼り付けるようにします。
|
| Blogger『レイアウト』編集画面 |
（タイトル（ウィジェットのブログ上での表示名）は『📁カテゴリー』としています。）
・使用するソースコード
使用するソースコードはBloggerに標準で備わっているラベル機能の検索用のコードです。
以下、簡単にできるコードの取得・編集方法を紹介します。
- ソースコードの取得
ここではBloggerの『ラベル』ガジェット（ウィジェット）を有効にしている（設置している）ことが前提になります。
|
ブラウザ（ここではChrome（PC版））でブログの『ラベル』ウィジェットが表示されているページを開いて右クリックで『ページのソースを表示』を選択します。
（ページのソースを表示させるのはBloggerの編集画面ではありません。実際のブログのページです。）
|
| ブログ画面（Chrome（PC版）） |
するとページのソースコード（HTML）が表示されます。
|
| ブログのソースコード（HTML）（Chrome（PC版）画面） |
このコードの中から『ラベル』ウィジェットで使われているコードを探して、カテゴリーで使いたいモノを使います。
『ラベル』ウィジェットで使われているソースコードは<span>タグで囲われているコードがずらずら並んでいる箇所です。慣れれば簡単に検索できると思います。
|
| ブログの『ラベル』ウィジェット部分のソースコード |
この中からカテゴリーとして使いたいラベル名を選んで、<a></a>タグで囲われている部分をコピーします（ここでは『スマートホーム』を選びました）。
|
| ブログの『ラベル』ウィジェット部分のソースコード |
- ソースコードの編集・ガジェットへの貼り付け
コピーしたソースコードをBlogger『レイアウト』編集画面の[HTML/JavaScript]ガジェットの<li></li>タグの間に貼り付けます。
|
| Blogger『レイアウト』編集画面 |
2つ目以降のカテゴリーも同様に<li></li>タグの間にソースコードを貼り付ければOKです。
（上記の画像では『電子工作・自作』のコードを貼り付けています。）
以上で、ウィジェットの設置は完了です。
・完成したウィジェット
実際にブログをブラウザで表示させるとこんな感じです。
どうです？結構ちゃんとしてますよね😋。
|
| 完成した『カテゴリー』ウィジェット（Chrome画面） |
●使用感
・カテゴリーの選択結果（表示）
ブログをブラウザで表示させて、実際にカテゴリー『スマートホーム』を選択するとこんな感じで、ラベル『スマートホーム』をつけた記事の一覧が表示されます。
（一覧の表示形式は個別のブログの設定により異なります。）
|
| カテゴリーを選択した結果（Chrome画面） |
カテゴリーとして機能していますね。いい感じです😋。
・そのほか
今回紹介したカテゴリーは、閲覧するヒト（人間）にとって見通しを良くする役割を果たしますが、検索エンジンにはカテゴリーとして認識されません。そのため、SEO対策にはならない点に注意が必要です。（そういう意味では『なんちゃってカテゴリー』かもしれません😅。）
●改善したい点
- 今のところありません😋。
●まとめ
Bloggerのラベル機能を使うことによって、簡単にカテゴリーとして使えるウィジェットを設置することができました。満足です😋。
ちなみにですが、本ブログの『索引』ページはこの手法で作成しています😋。
私の中では『ガジェット』という言葉はハードウェアを指していると思うのですが、Bloggerではサイドバーのウィジェットのことをガジェットを呼んでいます。本記事の中でもちょっと使い分けに困ってしまいましてぐちゃぐちゃですがご了承ください🙇🏻。
