後で編集し直します事を言っときます（大柄な）

/// 2025-06-20（最初のトピック記事）

アイコンにアニメーションが加わるっていう事は、背後でJavaScriptが其処の処理を担っている云う事になる。今回はWordpressのプラグインによって、cssとJavaScript関連の（FontAwesome）ライブラリがロードされた状況が考えられた訳です。

前回、FontAwesomeのリファレンスを斜め読みしましたが、豊富な利用例が散見されたので、通常の css & JavaScript（以後JS）ライブラリをHTML内でロードするパターンも有るんだろうなと（そりゃそうでしょって言うレベルの話）言う前提で勝手に進めます。

ライブラリのロードに関しては、CSSはヘッダーに、JSライブラリはHTMLの最後の方に記述するのは、HTMLがブラウザで読まれる場合、先頭からでなく、最終行から読み込まれるからで、先に読ませたほうが、不具合が起き難いと云う理由からなので、cssと同様ヘッダーでロードさせても不具合が起こらない場合も有るかもしれません。（やってみてください。）JSライブラリをボディエリアの最後に記述する際、オリジナルのJSライブラリは確か先に読ませた方が良かったと思います。（間違ってたらすいませんレベルの話だし、厳密にはJSの処理内容で変わって来る話だと思う。）組み込み方と記述方法は FontAwsome のリファレンスを当たって下さい。多分載っていると思われます。これで準備が整ったとしまして・・・。

通常 iタグはリスト表記か何かに用いられてましったっけ？汎用タグだと思ったら違うようで FontAwsome の独自ライブラリ、その中のクラス名が”class”で、アイコン種や動きを指定、汎用クラスのstyleへは色やサイズが指定されると言う考えの下に記述してますが、今の処不具合は見当たりません。例えばアイコンへ独自のアニメーションを加えたいと考えた時は、”class”に対応したオリジナルのJSライブラリを記述して、FontAwsome提供のJSライブラリより後？か先？にロードされる様にHTMLへ記述すれば良い事に為ります。（”i” ≒ id、”class”≒クラス、class=”a b c”のa,b,cはプロパティで　”アイコンカテゴリ、アイコン種（名）、アニメーション種” になってんだとコードを見ての結果に為ります。独自アニメーションのJSライブラリを記述する上での最低限のルールがコールされた時にサブルーチン（≒オブジェクト）側が引数として受け取った値が何か（カテゴリなのか？アイコン種なのか？アニメーション種なのか？）を決める上での順番に為ってるんですかね。

ここ迄、半分は机上の理論です。と言うのも、FontAwsomeのリファレンスに、そう書いてた箇所を見た訳でないからで、現状のIT業界を余り知らないせいか、その様に理解する流れが当然の範囲なのかどうか？も良く解らん古いプログラマ見たいな存在なのかもしれないと感じるんです。SNS上では変な技術情報しか出てこないからかも知れません（当然、やだわーと感じていますし、状況把握する上で混乱を招く一因に為っています）

上記のプロパティ、ここは勝手にプロパティ（＝属性）と決めつけて呼んでいるんですが、独自のJSライブラリをプログラミングする場合、逆に並び順を変更したら、本家のライブラリとプロパティ名が被らなくて都合いいんじゃない？などと考えたりもします。例えば自作のJSライブラリ側では、アイコン種、カテゴリ名、アニメーション種 とかにしてみるとか。

今回の手法は、cssとJSライブラリを読み込む準備だけで、HTML上でアイコンを操作出来るので、汎用性は高い方でしょうと勝手に思っています。ワードプレスで FontAwsome と言うアイコン用のプラグインを組み込んでみたら、こう言う流れに為りましたが、メジャーなアイコン用ライブラリ見たいなんですが、現状は無料枠なので利用できる数は制限されています。それでも相当数のアイコンが使えています。

（言い訳ですが「少々ヤバい時期」の一晩のアイコン実装と記事でしたので、ヒデェーなー感が在ったので、以下に編集し直してみました）

/// 2025-06-20

（過去記事を少し解かり易く編集してみました）

アイコンにアニメーションが加わるっていう事は、背後でJavaScript内でコールされているプログラム（関数、コマンド、タグ、独自表記の場合が在ると思われます）が其処の処理を担っている云う事になります。今回はWordpress のプラグインによって、cssとJavaScript関連の謂わば、FontAwesomeの独自（自作）ライブラリがロードされている状況が考えられた訳です。

前回、FontAwesomeのリファレンスを斜め読みしましたが、豊富な利用例が散見されたので、jQuery の css & JavaScript（以後JS）ライブラリをHTML 内でロードし、ホームページ上へアニメーション（≒動き）を付加するパターンも有るんだろうなと（そりゃそうでしょって言うレベルの話で）言う前提で勝手に進めます。

ライブラリのロードに関しては、CSSはヘッダーに、JSライブラリはHTMLの最後の方に記述するのは、HTML がブラウザで読見込まれ、実行される過程は、html文の先頭行からでは無く、最終行から読み込まれるからで、先に読ませたほうが、不具合が起き難いと云う理由からの様で、cssと同様ヘッダーでロードさせても不具合が起こらない場合も有るかもしれません。（やってみてください。）JSライブラリをボディエリアの最後に記述する際、オリジナルのJSライブラリは確か先に読ませた方が良かったと思います。（間違ってたらすいませんレベルの話だし、厳密にはJSの処理内容で変わって来る話だと思う。）組み込み方と記述方法は FontAwsome のリファレンスを当たって下さい。多分載っていると思われます。これで準備が整ったと致しまして。

通常 iタグはリスト表記か何かに用いられてましったっけ？FontAwesomeライブラリロード済配下だと汎用タグだと思った iタグは FontAwsome の独自タグとして機能して、その中のクラス名が”class”で、アイコン種や動きを指定、汎用クラスのstyle へは色やサイズが指定されると言う考えの下に記述してますが、今の処不具合は見当たりません。例えばアイコンへ独自のアニメーションを加えたいと考えた場合には、”class”に対応したオリジナルのJSライブラリを記述（自分が速攻で記述するとしたら、自分がイメージするアニメーションと似たサンプルのJSのスクリプトを改変して自作のJSライブラリとしてスクリプト記述ファイル内へ加えると思います）して、FontAwsome提供のJSライブラリより後？か先？にロードされる様にhtml内へ記述すれば良い事に為ります。（”i” ≒ id、”class”≒クラス、class=”a b c”のa,b,cはプロパティで、それぞれ “アイコンカテゴリ、アイコン種（名）、アニメーション種” になってんだなとコードを見ると解かります。独自アニメーションのJSライブラリを記述する場合は、コールされた時にサブルーチン（≒オブジェクト）側が引数として受け取る値がカテゴリなのか？アイコン種なのか？アニメーション種なのか？その並び順は決まっている理由は単に、FontAwesomeライブラリ内の実行プログラム側で受け取った複数の引数は順番に各変数領域へ格納されるので、以後の実行コード中では、1番目にセットされた変数領域１は、例えばアイコンのカテゴリと言う認識で使われると言う事です。

ここ迄、半分は机上の理論です。と言うのも、FontAwsomeのリファレンスに、そう書いてた箇所を見た訳でないからで、現状のIT業界を余り知らないせいか、その様に理解する流れが当然の範囲なのかどうか？も良く解らん古いプログラマ見たいな存在なのかもしれないと感じるんです。SNS上では変な技術情報しか出てこないからかも知れません（当然、やだわーと感じていますし、状況把握する上で混乱を招く一因に為っています）

上記のプロパティ（≒ 引数）ここを勝手にプロパティ（＝属性）と決めつけて呼んでいるんですが、独自で似たようなJSライブラリをプログラミングしたい場合、逆の発想で並び順を変更して、本家のライブラリとプロパティ名が被らなく為って、都合がいい場合も在るんでない？等と考える事も出来ます。例えば自作のJSライブラリ側では、アイコン種、カテゴリ名、アニメーション種 とかにしてみるとか。それが有益な場合が在るとすればFontAwsomeライブラリと独自ライブラリを同居させても、プログラマが決める引数（渡す値）が被りずらいので誤動作が起こる可能性が低くなると言う事でしょう。

今回の手法は、cssとJSライブラリを読み込む準備だけで、HTML上へアニメーション付きアイコンを実装出来るので、汎用性が高いでしょうと勝手に思っています。ワードプレス上で FontAwsome と言うアイコン用のプラグインを検索で発見し、組み込んで見たら、こう言う流れに為りましたが、メジャーなアイコン用ライブラリ見たいです。現状は無料枠なので利用できるアイコンの数は制限されていますが、それでも相当数のアイコンサンプルが使える見たいです。

/// 2026-05-29

（FontAwesome 関連の追記）

以前、デジハリ（デジタルハリウッド）から出版されていた（jQueryに関する）書籍を購入していました（2019年頃）。その中に収められていたサンプルの応用に為るのかも知れません。

推測が当たっていたので WordPress 上へ、今回の手法でブラウザ上（現状はフロントページ上のみ）にアイコンを実装（≒表示）出来た様なんです。

かなり前（2025年6月頃）の記憶に為ります。FontAwesome 関連の解説ページを眺めていると、現状存在する殆どのアニメーションの実装ライブラリへ対応しているんでないか？と思えたんです。なので、プラグインとしてのFontAwesome をWordpress 上に実装した配下では、デジハリ本解説でのjQuery版とでも言いましょうか、html上へ、該当する汎用CSSライブラリ、自作CSSライブラリ、同様に汎用JavaScriptライブラリ、自作JavaScriptライブラリが展開された状態が在ると言う推測です。

一般的にヘッダ側でロードする CSSライブラリ、フッター側でロードする JavaScriptライブラリ の、あのパターンの html です。其処に当て嵌めながら FontAwesome の解説ページ内のサンプルを眺め、それらの表示方法からhtml、CSS、JavaScript のタグの役割を見て逆順に追って解析した結果だったんです。以前のブログ中で一番、印象に残っているのは<i>タグの役割で、これは、どう考えても紛らわしいだろう？と思えたからです。汎用タグの<i>も在るからです。その時、良く吟味して無かったので、解かりませんがライブラリを読み込む順番を変えた場合、汎用タグとして機能するのかなと思っていたのを覚えています。そりゃ無いか、確か標準のタグリファレンスでって何だ？と思って引いたら在ったと言う事は標準ライブラリなんだろうから・・・

[*1] 解かり易く、ここはデジハリのjQueryサンプルから汎用JavaScriptライブラリのURLを確認して下さい。諄い追記をする様で何なんですが、ネット上の汎用ライブラリには、ダウンロードし個人のストレージへの展開を許されている場合も在るので、それでも良いと思われます。ここで言う、個人のストレージとは、企業や個人で所有（レンタル、リース含む）しているクラウドサーバーの場合も在るでしょうし、ローカルサーバーで運用している場合は、会社や自宅の（ローカル）ストレージと為ります。