小 中 大
■ ■ ■ ■ ■ ■ ■

Home > 2025年 > 8月 > 25日

タグを出現回数によってタグの文字の大きさを変更するコードを実装しました.

2025年08月25日

Logging

おはようございます.先日の休みに昼寝から目を覚ましたときに「あっそういや」と思って実装した機能がタグを出現回数によってタグの文字の大きさを変更するコードでした.記事の最後の最後あたりに付いているタグ文字の大きさが記事によって変わっているのが分かると思います.

こういうアイディアはもともとあるけれど、そのアイディアさえも思いつかなくなってしまったら悩ましいですね.因みにリアクトをこのサイトに実装するという計画はまだ実行に移していません.

if(document.querySelector('#main_content')){
    let txt = document.querySelector('#main_content').textContent;
    let tagElements = document.querySelectorAll('.tag');
    [...tagElements].forEach(element => {
        element.style.fontSize = fontSizeChange(txt,element.textContent);
    });
}
function fontSizeChange(text,word)
{
  const regex = new RegExp(word, "gi");
  const matches = text.match(regex);
  let cnt = matches?.length ?? 0;
  const sizes = ['medium', 'x-large', 'xx-large', 'xxx-large'];
  let fontSize = sizes[
    cnt > 6 ? 3 :
    cnt > 4 ? 2 :
    cnt > 2 ? 1 : 0
  ];

移したら技術共有か何かで記事を書くかもしれないです.

明日へ続く

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2025年08月25 07:00日

タグ

```, アイディア, あたり, コード, サイト, タグ, とき, リアクト, 休み, 先日, 共有, 出現, 回数, 変更, 実行, 実装, 技術, 文字, 明日, 昼寝, 最後, 機能, 計画, 記事,