*

WPで記事書きを楽しく Webフォントが簡単に入れられるプラグイン

公開日: : WordPress

記事を書いていると説明の文頭なんかに「●」や「・」でなくわかりやすいアイコンなんてつけたいって思う事ないですか?
記号で変換すればいくつかのアイコンは出てきますが、珈琲や指さしマークなんてないですよね。
漢字変換で出てくる記号のアイコンも環境依存文字だったりします。
もっと手軽に可愛いアイコンを使いたい!そんな思いを解決してくれるプラグインをみつけました。^^


スポンサーリンク


WP Visual Icon Fontsのインストール


記事に簡単にWebフォント(アイコンのフォント)を簡単に設置できるのがこのプラグインです。

このプラグインを利用すれば、文字が多い文章も、見やすくできますね^^

さっそくインストール icon-music 

 icon-flag ダッシュボードの左側のメニューから「プラグイン」⇒「新規追加」をクリックします。

 icon-flag 検索窓に「WP Visual Icon Fonts」と入力して検索します。

インストール
いつもなら、プラグイン名を入力すると、一番先頭に探しているプラグインが表示されるのですが・・・

今回のこのプラグインはなぜか3ページ目にありました。

 icon-flag 表示されたら「今すぐインストール」をクリックします。


 icon-flag インストールできたら「有効化」をクリックします。

これで完了!

簡単ですね^^ 使い方もとっても簡単

WP Visual Icon Fontsの使い方


 icon-flag-o インストールするだけで投稿画面に図のような「Icons」というボタンができます。


投稿画面は、ビジュアルエディタでもテキストエディタでもやり方は同様ですが、

ビジュアルエディタだと、入れた時にアイコンを確認できます。


 icon-flag-o Webフォントを入れたいところにカーソルを点滅させます。

「Icons」ボタンをクリックします。



 icon-flag-o 図のように「Icons」の右横に▼が表示されるのでクリックします。

プルダウンメニューでWebフォントが選択できるようになります。

 icon-flag-o 使いたいフォントをクリックすると、カーソルの位置にアイコンをいれることができます。



 icon-flag-o 段落の頭にアイコンがはいりました


スポンサーリンク


Webフォントの編集


挿入したWebフォントは、文字と同様に色を変更したり、文字サイズを変えたりできます。

フォントの色と大きさを変えてみましょう。

 icon-flask Webフォントをドラッグで範囲指定します。


 icon-flask 「テキストの色」のボタンをクリックして、変えたい色を選択します。


 icon-flask Webフォントのサイズ変更は「フォントサイズ」の▼をクリックして、

プルダウンメニューからサイズを選びます。



「テキストエディタ」では、図のようになっていますので色やサイズを変えるのもHTMLで記述します。


波空
これ使うのはビジュアルエディタのが楽ですね(^^;
猫にゃん
なんか同じWebアイコンて使えないの?二ついれたくてもはいらないみたいだにゃん

波空
そういえば、どこかのサイトで1回使うと同じアイコンを他の箇所に挿入できないとかって書いてあったような・・・でも、大丈夫^^
波空
入れたいアイコンを範囲指定して、右クリックでコピー、入れたいところに貼り付けすればOK
猫にゃん
なんだ文字と一緒なんだにゃ


Webアイコンはいっぱいあるから、よく使うものとか、どの辺にあるかみておくといいですね。

図は左上から右に、そして次の行にと、順番に入れてみました。参考にしてください。


WP Visual Icon Fonts 最後に


 icon-coffee これで、文字が多い記事も読みやすくできますね^^

書くときも楽しくなります。なんといっても簡単・楽しいが一番^^


にほんブログ村

スポンサーリンク




スポンサーリンク




Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


クリームパン足?足のむくみには名前があった・・対処方法は

なんだか最近足のむくみ方がかわってきました。 今まではふくら

イメージマップがスマホでずれる!プラグインで簡単解決

イメージマップがスマホでは位置がずれてしまい、予期せぬところにリンクし

Stinger8トップへ戻るボタンのアイコン変更&自作画像に変更

前回はStinger8のデフォルトの「ページトップへ戻る」ボタンの背景

Stinger8カスタマイズ トップへ戻るボタンの背景色変更

Stinger8のカスタマイズをしていて、下の方にスクロールした時に「

Stinger8カスタマイズ タイトルをロゴ画像に phpのコピー

Stinger8のヘッダー画像を変えてみましたが、タイトルを画像にいれ

→もっと見る

  • こんにちは。波空です

    好きなことを自由にやりたくて
    アフィリエイトにチャレンジ中

    好きなものは
    アニメ・漫画・ゲーム・お絵描き・
    映画を観ること・パソコンで遊ぶこと
    ・チョコレート・中島みゆきさんの歌・・

    やりたいことは・・
    空を飛びたい・馬に乗って自由に
    走り回りたい・猫を飼いたい・・

    いろいろあるけど、
    まずは資金と自由な時間を確保
    しないと進まない。
    日々どうしたらできるか考えながら
    リアル仕事に追われています。

PAGE TOP ↑