wordpressにオリジナルの絵文字を使用する

wordpressを使用していて、もう少しオリジナリティのある絵文字やアイコンを本文に簡単に挿入できないか、そんな風に思っている方も少なくはないと思います、確かにwordpressのプラグインで絵文字やアイコンを表示させるプラグインはいくつもご紹介されていますが、バージョンが変わりいつのまにか使えなくなっていたっていうことも結構ありますよね、

そこで今回は私自身が使用してみて非常に簡単に設置できて、なおかつ自作のアイコンやフリーで使えるピクセルアイコンも簡単に登録できるプラグインCustom Smilies Ver.2.7をご紹介します。作者は中国の方ですね。

down まずはプラグインのダウロード、以下からファイルをダウンロードできます。
≫http://goto8848.net/projects/custom-smilies/
中国語サイトなのでダウンロードする場所が分かりづらかったのですが、本文中の【Get it】からダウンロードできます。

down 解凍しサーバー【wp-content/plugin/】にアップロードします。

down 管理画面に行きプラグインを有効化して設置完了です。

↑以上の作業で管理画面にpic-25のスマイルアイコンが追加されていますのでクリックすると
pic-14
↑こんな感じでデフォルトの絵文字が選択できるようになっています。

down コメント欄にアイコンを追加する
せっかく使えるようになったアイコン達をコメントしてもらう時にも使用して貰いたいものですよね。以下のコードをテンプレート内に埋め込むとコメント欄でも使用できるようになります。モノストックでコメント欄に表示されているような感じです。

[php][/php]

down オリジナルのアイコン・絵文字を追加する
オリジナルの絵文字を追加したい場合は、サーバー内の【wp-includes/images/smilies/】にデフォルトのアイコン達がいるのでそこに新しいアイコンを追加します。
アップロードが終わったら管理画面≫設定≫Smiliesの設定に行くと以下の画面になります。

スマイルアイコン追加時

先ほど【wp-includes/images/smilies/】に追加しアップロードしたアイコン達が仮登録の状態になっています。そこに本文を入力するときに使用する置き換え文字の設定をしていきます。アイコン右の空白に置き換える文字列を挿入【例,:::ico1:::】など本文中であまり使用しない文字列が良いです。

すべての空白が置き換え文字で埋まったら、下にある【update】をクリックします、このとき【update Options】をクリックしてしまうとせっかく入力した置き換え文字がリセットされてしまうので注意してください。

updateがうまくいったら、投稿画面のスマイルアイコンとコメント欄のスマイルアイコンを確認してください。アイコンが増えていれば完了です。

補足で、管理画面下の【Smilies Options】の設定ですが、【Popup window width:・Popup window height:】っとある所は、投稿時にポップアップウィンドウで出てくるアイコン表示の大きさを出します。アイコンが増えれば増えるほど、高さの数値を伸ばさないと隠れてしまいます。

pic-14←このこと

以上で、オリジナルのアイコン・絵文字の使い方法でした。

down おまけ
わたしがオススメする、ブログでも使えるピクセルアイコンのサイトをいくつかご紹介しておきます。
★464個のハイクオリティアイコンが無料でダウンロードできるサイト
無料のピクセルアイコン

≫http://splashyfish.com/icons/

★320個のピクセルアイコンがフリーで使える素材です。

≫http://icondock.com/free/mini-pixel-icons

これであなたのブログも可愛く彩れますね〜、是非ご参考下さい。

※記載されている画像は、作者の作成された画像を使用させていただいている場合がございます。
※基本的にフリー素材となっておりますが、作者様の著作権を保護するために、ダウンロードする際は作者様の利用規約などもご一読ください。
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

デザイン系のスキルを身につけるサポートをしてくれるオススメサービス

Adobeをお得に自分のペースで学びたい方にオススメ

Adobe Creative Cloudをお得に始めたい方へ。
アドバンスクールオンラインは、Adobe公認のプラチナスクールパートナー。通信講座を受講することで誰でも学生扱いとなり、社会人の方でも学割価格【68,800円(税込)】でフル機能のCreative Cloudを利用できます。IllustratorやPhotoshop、Premiere Proなど人気ソフト11講座がセットになり、質問し放題で1年間じっくり学習可能。学習ノルマはなく、好きなタイミングで受講できるので、デザイン・動画制作・イラスト・ゲーム開発など幅広いクリエイティブに挑戦できます。個人での商用利用も可能なライセンス。今こそ学割価格でAdobeを活用し、スキルアップを実現しませんか?

未経験からWebデザインを学んで手に職をつけたい方にオススメ

『Fullme』は、100万部以上のデザイン本を手掛けたingectar-eが講師を務めるオンラインデザインスクールです。「けっきょく、よはく」など人気書籍のノウハウをもとに、分かりやすく実践的なカリキュラムを提供。バナーやLP制作から、UI/UXやコーポレートサイト制作まで幅広く学べ、プロによる添削で実務力を磨けます。レッスンはビデオオンデマンド形式なので、仕事や子育てと両立しながら自分のペースで受講可能。デザイン初心者からキャリアアップを目指す方まで、スキルと表現力を同時に伸ばし、転職・副業・フリーランスへの一歩を後押しします。

未経験からWebマーケ転職を実現できる!デザインとマーケで手に職を!!

業界TOP1%のWeb広告代理店が運営する、未経験からでも安心して学べるWebマーケティングスクールです。講師はすべて現役のWebマーケターで、最新のノウハウをもとに完全個別指導を実施。生徒一人ひとりの目的やレベルに合わせて最適なカリキュラムを提案します。単なる知識の習得にとどまらず、実際のマーケティング業務を体験できる「実践講座」も用意しており、現場で即戦力として活躍できるスキルが身につきます。500社以上のマーケティング支援実績を通じて蓄積したノウハウを凝縮した独自の学習プログラムで、転職・副業・フリーランスなど多様なキャリアをサポート。さらに、転職支援コースでは、紹介企業への入社で受講料が「実質0円」になるキャンペーンも実施中です。未経験から新しいキャリアを築きたい方、自分の市場価値を高めたい方に最適なスクールです。

目次