Webフォントの絵文字フォントの老舗「FontAwesome」は、SVGには無い利点があり、現在でもその有効さは失われていません。

 

「FontAwesome Palette」は、専用パレットによる「FontAwesome」の入力を可能にします。

 

 

 

 

 「FontAwesome Palette」 操作マニュアル

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コード」をメモ帳などにペーストすると、下の様なコードが得られます。

<i class="fa-solid fa-pen-nib"></i>

 

このコードを「FontAwesome Palette」で利用するために、前後を以下の太字コードでサンドします。

 '<li><i class="fa-solid fa-pen-nib"></i></li>'+

 

 

ソースコードの編集画面を開く 

「Tampermonkey」のダッシュボードのツール名一覧で「FontAwesome Palette」の部分をクリックすると、ソースコードの編集画面が表示されます。

 

 

 

ソースコードの画面をスクロールして、以下の部分を探してください。

以下は、「ver.0.2」の絵文字のリスト部の最初の部分です。

 

「FontAwesome Palette」 ver.0.5 17行~

// 🟠🟠 以下のリストの行を編集・追加して、専用パネルのリストをカスタマイズできます。

let FontAwesome_list=
    '<li class="fap_category">矢印</li>'+ // 🟦🟦🟦
    '<li><i class="fa-solid fa-arrow-rotate-right"></i></li>'+
    '<li><i class="fa-solid fa-arrows-rotate"></i></li>'+
    '<li><i class="fas fa-external-link-alt fa-sm"></i></li>'+
    '<li><i class="fa-solid fa-arrow-up-right-from-square"></i></li>'+
    '<li><i class="fa-solid fa-arrow-right-to-bracket fa-rotate-90"></i></li>'+

 

1行ごとに「li要素」が並び、その中身は「FontAwesome 絵文字」のコードです。 先に加工したコードは、これら各行の基本形に合わせたものです。

 

 

加工した行を追加する 

上の「li要素」の行に加工したコードを追加すれば、「   」の文字が専用パレットに表示されます。

 

下は、3個目にあたる行の位置に追加をしたところです。

 

 

なお、「🟦🟦🟦」の印のある行は、「カテゴリー」区分の仕切りです。 この行をコピーして他の行間に割り込ませると、そこを区切り位置にする事ができます。

 

〔注意〕

「li要素」の行の最後だけは「</li>';」で終わる事に注意してください。

行を追加・削除をする場合は、末尾行は避ける と間違いがありません。

 

 

ソースコードを保存する 

「Tampermonkey」の編集画面でソースコードの編集後、画面左上端の「ファイル」メニューを選択し「保存」をクリックします。

 

 

編集内容が保存されて、新しい絵文字リストのカスタマイズが反映します。

 

 

 

 

「FontAwesome Palette」の最新バージョン

このツールの最新バージョンは、以下のリンクリストから探せます。