Warning: Constant POST_PLUGIN_LIBRARY already defined in /home/pasora/pasona-sp.com/public_html/wp-content/plugins/similar-posts/similar-posts.php on line 27
WPで記事書きを楽しく Webフォントが簡単に入れられるプラグイン | 思いだし にっき
サイトアイコン 思いだし にっき

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

<p><img class&equals;"aligncenter size-full wp-image-7332" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;05&sol;1d5739bdfb4bc8194dc377a16c052be7&lowbar;s&period;jpg" alt&equals;"" width&equals;"512" height&equals;"384" &sol;><&sol;p>&NewLine;<p>記事を書いていると説明の文頭なんかに「●」や「・」でなくわかりやすいアイコンなんてつけたいって思う事ないですか?<br &sol;>&NewLine;記号で変換すればいくつかのアイコンは出てきますが、珈琲や指さしマークなんてないですよね。<br &sol;>&NewLine;漢字変換で出てくる記号のアイコンも環境依存文字だったりします。<br &sol;>&NewLine;もっと手軽に可愛いアイコンを使いたい!そんな思いを解決してくれるプラグインをみつけました。^^<&sol;p>&NewLine;<p><&excl;--more--><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>WP Visual Icon Fontsのインストール<&sol;h2>&NewLine;<p>記事に簡単にWebフォント(アイコンのフォント)を簡単に設置できるのがこのプラグインです。<&sol;p>&NewLine;<p>このプラグインを利用すれば、文字が多い文章も、見やすくできますね^^<&sol;p>&NewLine;<p>さっそくインストール<span style&equals;"font-size&colon; 18px&semi;"><strong><span style&equals;"color&colon; &num;ff00ff&semi;"> <i class&equals;"fa fa-music"><span style&equals;"color&colon; transparent&semi; display&colon; none&semi;">icon-music<&sol;span><&sol;i> <&sol;span><&sol;strong><&sol;span><&sol;p>&NewLine;<p> <i class&equals;"fa fa-flag"><span style&equals;"color&colon; transparent&semi; display&colon; none&semi;">icon-flag<&sol;span><&sol;i> ãƒ€ãƒƒã‚·ãƒ¥ãƒœãƒ¼ãƒ‰ã®å·¦å´ã®ãƒ¡ãƒ‹ãƒ¥ãƒ¼ã‹ã‚‰ã€Œãƒ—ラグイン」&Implies;「新規追加」をクリックします。<&sol;p>&NewLine;<p> <i class&equals;"fa fa-flag"><span style&equals;"color&colon; transparent&semi; display&colon; none&semi;">icon-flag<&sol;span><&sol;i> æ¤œç´¢çª“に「WP Visual Icon Fonts」と入力して検索します。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-7333" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;05&sol;vf01&period;png" alt&equals;"インストール" width&equals;"504" height&equals;"51" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>いつもなら、プラグイン名を入力すると、一番先頭に探しているプラグインが表示されるのですが・・・<&sol;p>&NewLine;<p>今回のこのプラグインはなぜか3ページ目にありました。<&sol;p>&NewLine;<p> <i class&equals;"fa fa-flag"><span style&equals;"color&colon; transparent&semi; display&colon; none&semi;">icon-flag<&sol;span><&sol;i> è¡¨ç¤ºã•れたら「<strong>今すぐインストール<&sol;strong>」をクリックします。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-7334" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;05&sol;vf02&period;png" alt&equals;"" width&equals;"388" height&equals;"363" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p> <i class&equals;"fa fa-flag"><span style&equals;"color&colon; transparent&semi; display&colon; none&semi;">icon-flag<&sol;span><&sol;i> ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã§ããŸã‚‰ã€Œæœ‰åŠ¹åŒ–ã€ã‚’ã‚¯ãƒªãƒƒã‚¯ã—ã¾ã™ã€‚<&sol;p>&NewLine;<p><strong><span style&equals;"font-size&colon; 18pt&semi;">これで完了!<&sol;span><&sol;strong><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>簡単ですね^^ 使い方もとっても簡単<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>WP Visual Icon Fontsの使い方<&sol;h2>&NewLine;<p> <i class&equals;"fa fa-flag-o"><span style&equals;"color&colon; transparent&semi; display&colon; none&semi;">icon-flag-o<&sol;span><&sol;i> ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã™ã‚‹ã ã‘で投稿画面に図のような「Icons」というボタンができます。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-7335" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;05&sol;vf03&period;png" alt&equals;"" width&equals;"504" height&equals;"244" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>投稿画面は、ビジュアルエディタでもテキストエディタでもやり方は同様ですが、<&sol;p>&NewLine;<p>ビジュアルエディタだと、入れた時にアイコンを確認できます。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-7338" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;05&sol;vf03&lowbar;1&period;png" alt&equals;"" width&equals;"654" height&equals;"345" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p> <i class&equals;"fa fa-flag-o"><span style&equals;"color&colon; transparent&semi; display&colon; none&semi;">icon-flag-o<&sol;span><&sol;i> Webフォントを入れたいところにカーソルを点滅させます。<&sol;p>&NewLine;<p>「Icons」ボタンをクリックします。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-7336" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;05&sol;vf04&period;png" alt&equals;"" width&equals;"480" height&equals;"75" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p> <i class&equals;"fa fa-flag-o"><span style&equals;"color&colon; transparent&semi; display&colon; none&semi;">icon-flag-o<&sol;span><&sol;i> å›³ã®ã‚ˆã†ã«ã€ŒIcons」の右横に▼が表示されるのでクリックします。<&sol;p>&NewLine;<p>プルダウンメニューでWebフォントが選択できるようになります。<&sol;p>&NewLine;<p> <i class&equals;"fa fa-flag-o"><span style&equals;"color&colon; transparent&semi; display&colon; none&semi;">icon-flag-o<&sol;span><&sol;i> ä½¿ã„たいフォントをクリックすると、カーソルの位置にアイコンをいれることができます。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-7337" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;05&sol;vf05&period;png" alt&equals;"" width&equals;"473" height&equals;"343" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p> <i class&equals;"fa fa-flag-o"><span style&equals;"color&colon; transparent&semi; display&colon; none&semi;">icon-flag-o<&sol;span><&sol;i> æ®µè½ã®é ­ã«ã‚¢ã‚¤ã‚³ãƒ³ãŒã¯ã„りました<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-7339" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;05&sol;vf06&period;png" alt&equals;"" width&equals;"503" height&equals;"271" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>Webフォントの編集<&sol;h2>&NewLine;<p>挿入したWebフォントは、文字と同様に色を変更したり、文字サイズを変えたりできます。<&sol;p>&NewLine;<p>フォントの色と大きさを変えてみましょう。<&sol;p>&NewLine;<p> <i class&equals;"fa fa-flask"><span style&equals;"color&colon; transparent&semi; display&colon; none&semi;">icon-flask<&sol;span><&sol;i> Webフォントをドラッグで範囲指定します。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-7340" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;05&sol;vf08&period;png" alt&equals;"" width&equals;"197" height&equals;"176" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p> <i class&equals;"fa fa-flask"><span style&equals;"color&colon; transparent&semi; display&colon; none&semi;">icon-flask<&sol;span><&sol;i> ã€Œãƒ†ã‚­ã‚¹ãƒˆã®è‰²ã€ã®ãƒœã‚¿ãƒ³ã‚’クリックして、変えたい色を選択します。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-7341" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;05&sol;vf09&period;png" alt&equals;"" width&equals;"505" height&equals;"302" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p> <i class&equals;"fa fa-flask"><span style&equals;"color&colon; transparent&semi; display&colon; none&semi;">icon-flask<&sol;span><&sol;i> Webフォントのサイズ変更は「フォントサイズ」の▼をクリックして、<&sol;p>&NewLine;<p>プルダウンメニューからサイズを選びます。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-7342" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;05&sol;vf010&period;png" alt&equals;"" width&equals;"345" height&equals;"336" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>「テキストエディタ」では、図のようになっていますので色やサイズを変えるのもHTMLで記述します。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-7343" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;05&sol;vf07&period;png" alt&equals;"" width&equals;"506" height&equals;"218" &sol;><&sol;p>&NewLine;<div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-a">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;s&lowbar;j1&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">波空<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble"> これ使うのはビジュアルエディタのが楽ですね(^^; <&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-b">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;icon&lowbar;n2&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">猫にゃん<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble"> なんか同じWebアイコンて使えないの?二ついれたくてもはいらないみたいだにゃん <&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-a">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;s&lowbar;j1&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">波空<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble">そういえば、どこかのサイトで1回使うと同じアイコンを他の箇所に挿入できないとかって書いてあったような・・・でも、大丈夫^^ <&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-a">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;s&lowbar;j1&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">波空<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble">入れたいアイコンを範囲指定して、右クリックでコピー、入れたいところに貼り付けすればOK <&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-b">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;icon&lowbar;n2&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">猫にゃん<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble"> なんだ文字と一緒なんだにゃ <&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-7344" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;05&sol;vf012&period;png" alt&equals;"" width&equals;"382" height&equals;"306" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>Webアイコンはいっぱいあるから、よく使うものとか、どの辺にあるかみておくといいですね。<&sol;p>&NewLine;<p>図は左上から右に、そして次の行にと、順番に入れてみました。参考にしてください。<&sol;p>&NewLine;<p><img class&equals;"aligncenter size-full wp-image-7345" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2018&sol;05&sol;vf011&period;png" alt&equals;"" width&equals;"620" height&equals;"593" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>WP Visual Icon Fonts 最後に<&sol;h2>&NewLine;<p> <i class&equals;"fa fa-coffee"><span style&equals;"color&colon; transparent&semi; display&colon; none&semi;">icon-coffee<&sol;span><&sol;i> ã“れで、文字が多い記事も読みやすくできますね^^<&sol;p>&NewLine;<p>書くときも楽しくなります。なんといっても簡単・楽しいが一番^^<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><a href&equals;"&sol;&sol;www&period;blogmura&period;com&sol;ranking&period;html"><img src&equals;"&sol;&sol;www&period;blogmura&period;com&sol;img&sol;www88&lowbar;31&period;gif" alt&equals;"" width&equals;"88" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a href&equals;"&sol;&sol;www&period;blogmura&period;com&sol;ranking&period;html">にほんブログ村<&sol;a><&sol;p>&NewLine;&NewLine;


Warning: Undefined array key "adsense_ad_type" in /home/pasora/pasona-sp.com/public_html/wp-content/plugins/quick-adsense-reloaded/includes/amp-condition-display.php on line 298

Warning: Undefined array key "adsense_ad_type" in /home/pasora/pasona-sp.com/public_html/wp-content/plugins/quick-adsense-reloaded/includes/amp-condition-display.php on line 298

Warning: Undefined array key "adsense_ad_type" in /home/pasora/pasona-sp.com/public_html/wp-content/plugins/quick-adsense-reloaded/includes/amp-condition-display.php on line 298
モバイルバージョンを終了