オリジナル絵文字を導入してみた話

こんにちは、言詠です
掲題の通り、今回はこのブログにオリジナル絵文字を導入した話なわけですが、これ、本当に個人的に

めちゃくちゃ良かったです

個人談ですが、オリジナル絵文字を取り入れたことで一昔前の個人サイトの雰囲気に一歩近づいた感じがするのが良いんですよね〜、昔デコメとかとても魅力的だったので
当時携帯なんて持ってない時代だったのでPCで素材を使ってそれっぽいブログみたいなのを書いてたりもしたわけですが……と、この話は長くなりそうなのでここでおしまい

話題が逸れましたが、ここからは本題のオリジナル絵文字導入のメリットや導入方法について、備忘録的に綴っていこうと思います！

このプラグインを活用する場合、FTPソフトでの画像アップロードが必須です。
FTPソフトの使い方が分からないという方にはオススメできない方法となる点、ご了承いただけますと幸いです

そも、本記事における「絵文字」とは

そうですこれですね
ことろぐを読んだことがある人は今更何を言ってるんだという感じだと思いますが、ことろぐ上で現在導入している絵文字は上記のことである、ということを一応明確にしておこうと思います
顔文字っていいですよね、ひとつあるだけで表情というか感情が伝わりやすくて
という理由もあり、ことろぐでは顔文字メインの絵文字を作りましたが、これに限らず、

文章内に入る小さなイラストであればなんでも使える

というのが今回の絵文字導入におけるメリットかなと！
一昔前のデコメや現代におけるLINE絵文字を想像すればわかりやすいと思いますが、要はそれです
では早速、「WordPressで書いているこのブログにどうやって絵文字を導入したのか？」という本題を解説していこうと思います

絵文字用プラグインを活用する

ふと絵文字を使いたいと思ったときに色々調べたのですが、その際とある記事を発見しまして。
ですが2025/07/16時点で該当記事は削除されてしまった模様
読ませていただいて「これだ！！」と思ったのが、その方が紹介されていた「wp-Monalisa」というプラグインでした

イメージ画像に一瞬「んん……？_{（なんか怪しい）}」となりましたが、こちらを活用することで、以下のように文章中にオリジナル絵文字を導入できるようになります

その通り、絵文字の他にバナーなども追加できるので、記事の中でよく使うな、と思ったものはここに追加しておくと良いと思います
では早速、絵文字の導入にあたりプラグインをインストールして有効化、設定を進めていきましょう

絵文字挿入機能(プラグイン)の設定

プラグインを有効化すると、メニュー一覧の下の方に「wp-Monalisa」というメニューが追加されます。

メニューを開くと、英語で書かれた設定画面が出てくるので、まずはここで設定を進めていきます。

記事内で絵文字を使うにあたり、1番上の「Show smilies on edit」「Show smilies in Rich-Editor」には必ずチェックを入れるようにしましょう！
ここにチェックが入っていないと、以下のように編集ツールの選択肢に絵文字挿入機能（Smilies）が表示されず、プラグインを入れている意味がなくなってしまいます

その他の項目は必要に応じて設定すれば良いので、基本的にはここにチェックが入っていれば絵文字挿入の準備は完了です

オリジナル絵文字の追加方法

ここからは、このプラグインの醍醐味とも言えるオリジナル絵文字の追加方法について解説していきます
絵文字の追加にはFTPソフトを使用するので、ことよみはFileZillaを用いてアップロードしました。

ですです、そのアップロード先というのが、設定画面の1番上にあった「Iconpath」の部分に書かれているフォルダーになります。
デフォルトだとwp-content/plugins/wp-monalisa/iconsになっているはずなので、まずはFTPソフトでこのフォルダーを開きましょう。

フォルダを開いたら、まず中身の確認です
WordPress管理画面で設定ページを開いたとき、ページ下部に以下のような絵文字一覧が表示されていたかと思います。

上記の画像は既にことよみ仕様になってしまっていますが、初期設定の場合はこの部分にデフォルトでいくつかの絵文字が表示されているはずです。
これらの絵文字がwp-content/plugins/wp-monalisa/iconsのフォルダに表示されていたら、そこに絵文字をアップロードすれば間違いなく表示される、ということの確認ができます
この確認ができたら、そのフォルダ内に絵文字として使用したいイラストを追加していきましょう

アップロードが完了したら、管理画面の設定ページに戻り、先ほどの絵文字一覧を確認します。
アップロードしただけではまだ絵文字が表示されていませんが、1番上の「New Entry」と書かれている行の「Icon」の部分でプルダウン表示をすると、そこにアップロードした絵文字のファイル名が表示されます。

新規でアップロードしたファイル名の一覧をよく見ると、XXX.jpg*のようにファイル名のあとに「*」がついていると思います。
これは、「フォルダ内にアップロードされているけど、詳細設定がまだだよ！」ということを表しているようです
この詳細設定を行うことで絵文字の挿入ができるようになるので、アップロードした絵文字ひとつひとつに設定をしていきます。

設定は一覧表示の一番上の行、「New Entry」の欄で行います。

① Emoticon：任意の文字列を入力
→ デフォルトの絵文字のように、:test: のような形式での入力がオススメです。
② Icon：絵文字として設定する画像を選択（「*」がついているもの）
③ On Post：チェックを入れる（投稿で表示するための設定）
※On Commentはコメント機能を使用していて、コメントでも表示する場合にチェック

上記を設定したら、ページ最下部にある「Save」ボタンを押して設定を保存します。
これをアップロードした画像（絵文字）全てで行なったら、

絵文字として利用可能になります

実際に投稿画面を開いて、ツールバーの「 ∨ 」を押すと、

上記のような「Smilies」が表示されていると思うので、それをクリックすれば……

オリジナル絵文字が表示された

となるはずです
これでBOXの中から使いたい絵文字をクリックするだけで、文章中に絵文字が挿入できるようになりました、なんて便利

便利な一方で、一部デメリットも。

自分らしさを演出する、という意味でも絵文字はかなり有効だと思いますが、絵文字は即ち画像要素の挿入でもあるため、場合によってはサイトが重くなってしまうこともあるようです
ことよみは1記事に結構絵文字を入れて（る方だと思って）ますが、今のところサイトが重くなった実感はなく、レンタルサーバーを契約して運用しているWordPressサイトであれば現状問題ないかなと思っています。

本当にそれはそう
とはいえサイトの状況次第であることは変わりないので、自分のサイトに導入して明らかに重くなってしまった、というような状況になったら、プラグインの導入は控えましょう

さいごに

絵文字は導入するだけでとても楽しくなりますね
今回はプラグインを活用しましたが、実はプラグインを活用せず、WordPressにもともと備わっている「インライン画像」を活用すれば似たような（というよりほぼ同じ）ことが出来るのですが、メディアライブラリの画像整理が必要になってくるので、今回はプラグインを頼って絵文字を使っています

もしプラグインなしに切り替える場合、今まで挿入した絵文字はどうなる？と試しにこのプラグインを無効化してみましたが、なんとそのまま表示されているという大発見
メディアライブラリの整理が完了して、絵文字の挿入も簡単にできそうであればゆくゆくはプラグインなしに切り替えようと思います

以上、「オリジナル絵文字を導入してみた話」でした！
ここまでお読みいただきありがとうございました