FontAwesome アイコン

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

/// 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番目にセットされた変数領域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を確認して下さい。諄い追記をする様で何なんですが、ネット上の汎用ライブラリには、ダウンロードし個人のストレージへの展開を許されている場合も在るので、それでも良いと思われます。ここで言う、個人のストレージとは、企業や個人で所有(レンタル、リース含む)しているクラウドサーバーの場合も在るでしょうし、ローカルサーバーで運用している場合は、会社や自宅の(ローカル)ストレージと為ります。

普通は先にやる

サイト構築上、普通先にやる事

  • 例えば、通称「パンくず」と呼ばれる、ウェブページのネスト状態を示す標識をWordpressで構成・表示させる場合、対象メニューの階層構造を正常にする必要が在り、順番が普通で無い作り方をしている当ウェブサイトではネスト構造がズレている部分も残っていて、修正作業はとっかかりが重い
  • その他、ワードプレスの話で、クエリーループと言うキーワードが在るが、聞いて直ぐ解る人も居ると思われる。現状、この操作をビジュアルエディター上では結構やりづらく成っている。キッチリ決まると、例えばスマホ上でのメルカリ様の(商品)ブロック表示ページを、す早く作れる。(CSSの新しめコマンド、呼び名は、今、出てこないが、ソレを使っているらしい)早い話、クエリーループでスマホ表示画面を変更する作業とか、普通優先順位高い作業工程だ
  • 数日前レンタルホストにログインした際、少し前に気付いていた、FTP接続時の不具合を修正するためにドメインのレコード登録状態をゾーンエディターで確認した処、変なレコードを発見し削除した。其れは Aレコードでタイプが”@”に為っていた。其処に、知らんIPアドレスが登録されていた。(その後、結局リセットを掛ける事に)30年以上前から使っているFTPアプリで、無事に正常接続出来る様になった。しかし、その後、同不具合を確認していたので、ここの修正。
  • その他、細かい処を飛ばしている傾向は自覚している。ついでに、さくらウェブコンテンツストア側のECサイトの構築。ここは以前に触れたかもしれないが、納税者番号(=インボイスID)との関連が在る。アカウントの不具合と居住地(住所)の登録情報などが絡んで来るので、直ぐに進められなかった事情が在った(グローバル基準の認証基準に為るNFT → ブロックチェーンに拠りデータがウェブ上で分散されている可能性が否めない・・・等と言う私自身も、さほど解っていない。理由として使う機会に恵まれていないから)。勿論ここに決済システム実装時の登録情報(この場合は主に納税者番号と登録住所)も絡むので、数年前のJCBカードで起こされていたアカウント偽装に纏わる不具合、現状では免許証偽装と他クレジットカード偽装に拘わる実装時の登録不具合などがECを構築する上で懸念材料と成っている。この辺は実際、作業に当った経験が在る人は解るはずだ。