2021/12/14

Blogger のラベルの階層化

Google Bloggerのラベルを階層化しました.私のこのブログ「シニアエンジニアの独り言」のラベルが階層化されていることがわかるでしょう.私が考える Blogger の最も使い難い点は,ラベルが階層化されていないことです.ブログの内容をざっと見る興味のある項目を探す手段はラベルしかありません.それが階層化されていないとなると,かなり読者には辛いです.

そこで,ラベルを階層化することにしました.階層化する方法の詳細は私の WEB  サイトのラベルの階層化を参照下さい.ラベルの階層化をする概要は,以下のとおりです.

  • Blogger のレイアウトにあるガジェット「HTML/JavaScript」を使います.
  • このガジェット内に HTML を記述します.
    • リスト (<ul>〜</ul> あるいは <ol> 〜 </ol>) で階層化します.入れ子も可能です.
    • ラベルは「https://あなたのサイト.blogspot.com/search/search/?=ラベル」を使い,リンクを張ります.
    • 検索条件の論理積演算には「+」,論理和には「|」を使います.括弧も使えます.

この方法を使うと Blooger のラベルの階層化はとても簡単にできます.読者にも優しいと思います.

私のガジェットの中身 (HTML) は,以下のとおりです.

<ul style="list-style-type:square;">

<li><a href="https://yamamo10.blogspot.com/search/?q=label:コンピューター">コンピューター</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:コンピューター+label:インターネット">インターネット</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:コンピューター+label:レトロ">レトロ</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:コンピューター+label:Blogger">Blogger</a></li>
  </ul>
</li>


<li><a href="https://yamamo10.blogspot.com/search/?q=label:科学|label:工学">科学・工学</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=(label:科学|label:工学)+label:物理">物理</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=(label:科学|label:工学)+label:数学">数学</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=(label:科学|label:工学)+label:その他">その他</a></li>
  </ul>
</li>

<li><a href="https://yamamo10.blogspot.com/search/?q=label:将来の夢">将来の夢</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:将来の夢+label:物理">物理</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:将来の夢+label:コンピューター">コンピューター</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:将来の夢+label:旅"></a></li>
  </ul>
</li>


<li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン">オピニオン</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+label:ビジネス">ビジネス</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+label:技術">技術</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+(label:環境|label:エネルギー)">環境・エネルギー</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+label:公共関係">公共関係</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+label:芸術">芸術</a></li>
  </ul>
</li>


<li><a href="https://yamamo10.blogspot.com/search/?q=label:経験">経験</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:経験+label:授業">授業</a></li>
   </ul>
</li>


<li><a href="https://yamamo10.blogspot.com/search/?q=label:散策">散策</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:散策+label:東京都内">東京都内</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:散策+label:道具">道具</a></li>
  </ul>
</li>


<li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出">思い出</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出+label:ブラジル">ブラジル</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出+(label:幼稚園|label:小学校|label:中学校|label:高校)">幼稚園/小/中/高校</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出+label:大学">大学</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出+label:社会人">社会人</a></li>
  </ul>
</li>


<li><a href="https://yamamo10.blogspot.com/search/?q=label:普段の生活">普段の生活</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:普段の生活+label:購入品">購入品</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:普段の生活+label:ひとり言">ひとり言</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:普段の生活+label:日記">日記</a></li>
  </ul>
</li>

</ul>

0 件のコメント:

コメントを投稿