Webフォントの絵文字フォントの老舗「FontAwesome」は、SVGには無い利点があり、現在でもその有効さは失われていません。
「FontAwesome Palette」は、専用パレットによる「FontAwesome」の入力を可能にします。
ver. 0.6 以降に対応 2023.10.31 更新
「FontAwesome」の環境構築
このツールを使う前提として、「編集画面」「ブログページ」で「FontAwesome」が表示できる必要があります。
●「FontAwesome」を「編集画面」で表示するには、下のツールが必要です。
●「FontAwesome」を「ブログページ」で表示するには、下のツールが必要です。
上のページに、それぞれの最新バージョンの入手先リンクがあります。
「FontAwesome Palette」の常駐と扱い方
「FontAwesome Palette」を「Tampermonkey」に登録した後、常に「ON」にして常駐させます。 これにより、ブログ編集画面を開くと「FontAwesome Palette」が自動的に起動する様になります。
専用パレットの表示
このツールを常駐すると、編集パレットに「FontAwsomeのタブ」が追加されます。
●「 」のタブを「左Click」すると、専用パレットが表示されます。
▪ 専用パレット上の絵文字は横8列で、登録した文字数に応じて縦に伸びます。
▪「FontAwesome Palette」 のソースコードの絵文字リスト部を編集して、任意の絵文字を揃えたパレットにカスタマイズ出来ます。
「FontAwesome絵文字」を本文中に挿入する
●「FontAwesome」絵文字を挿入する本文中の位置にキャレットを入れます。
● 専用パレット上で、必要な絵文字を「左Click」します。
下は実際に絵文字を入力した所ですが、周囲の前後の文字「▢」と間に「半角空白」が出来ます。
▪ 他の文字の間に絵文字を挿入した場合、この半角空白は削除できます。
▪ 行の先頭に絵文字が置かれると編集画面の特性で削除されるので、その対策のために半角空白を入れていますが、他の文字の後なら半角空白を削除できます。
●「FontAwesome」絵文字を他の文字間に記入する場合で、両側の半角が不要なら、専用パレット上の必要な絵文字を「Shift+左Click」します。
「絵文字コード」の直接入力
記事の編集中に専用パレットに無い絵文字が必要になった時、編集を中断せずに絵文字を探して来て入力する機能です。
❶「Html-Code」のボタンを「左Click」すると、別タブに「FantAwesome」サイトの「絵文字の検索画面」が表示されます。
▪必要な絵文字を探し、その「絵文字コード」をコピーして取得します。
❷「絵文字コードの入力枠」にペーストします。
▪「Enter」キーを入力で、編集枠のキャレット位置に絵文字が貼付けられます。
▪ これは「HTMLコードのみ」の書込み仕様で、他の文字間に書込む事が必要です。
▪ 入力コードは「iタグ」が含まれる事のみを簡易にチェックします。
▪ 入力枠は、編集画面の終了でリセットされます。
専用パレットを閉じるには
● 専用パレットを閉じるには、パレット右端の「✖」を「左Click」します。
▪「ESC」キーを押す事でも、専用パレットを閉じる事が出来ます。
絵文字のリストのカスタマイズ方法
「FontAwesome Palette」の専用パレットの絵文字リストは、比較的簡単にカスタマイズできます。 よく使う絵文字がデフォルトのパレットに無い場合は、カスタマイズをお勧めします。
FontAwesome の Htmlコードを入手
下の「FontAwesome」のサイトで必要な絵文字を探します。
例として、上の絵文字一覧で「 」の文字を選択すると、下の絵文字の詳細ページが開きます。
❶「HTML」を選択します。（SVGを選択すると、SVGコードを取得できます）
❷「絵文字のHTMLコード」をクリックすると、クリップボードにコピーされます。
〔注〕❸ に「PRO」表示がある文字は、ブログ利用が出来ません。（空白になる）
入手したHTMLコードを加工する
コピーした「絵文字のHTMLコード」をメモ帳などにペーストすると、下の様なコードが得られます。
このコードを「FontAwesome Palette」で利用するために、前後を以下の太字コードでサンドします。
ソースコードの編集画面を開く
「Tampermonkey」のダッシュボードのツール名一覧で「FontAwesome Palette」の部分をクリックすると、ソースコードの編集画面が表示されます。
ソースコードの画面をスクロールして、以下の部分を探してください。
以下は、「ver.0.2」の絵文字のリスト部の最初の部分です。
「FontAwesome Palette」 ver.0.5 17行～
1行ごとに「li要素」が並び、その中身は「FontAwesome 絵文字」のコードです。 先に加工したコードは、これら各行の基本形に合わせたものです。
加工した行を追加する
上の「li要素」の行に加工したコードを追加すれば、「 」の文字が専用パレットに表示されます。
下は、3個目にあたる行の位置に追加をしたところです。
なお、「🟦🟦🟦」の印のある行は、「カテゴリー」区分の仕切りです。 この行をコピーして他の行間に割り込ませると、そこを区切り位置にする事ができます。
〔注意〕
「li要素」の行の最後だけは「</li>';」で終わる事に注意してください。
行を追加・削除をする場合は、末尾行は避ける と間違いがありません。
ソースコードを保存する
「Tampermonkey」の編集画面でソースコードの編集後、画面左上端の「ファイル」メニューを選択し「保存」をクリックします。
編集内容が保存されて、新しい絵文字リストのカスタマイズが反映します。
このツールの最新バージョンは、以下のリンクリストから探せます。
