この記事では【THE THOR（ザ・トール）】にある「アイコンオプション」のアイコンの使い方を、わかりやすく紹介♪
応用編としてアイコンの色の変更と、サイズの変更方法も紹介しています。
【THE THOR（ザ・トール）】のアイコンの種類
【THE THOR（ザ・トール）】に装備されているアイコンは沢山あります。
おすすめの【THE THOR（ザ・トール）】の使いやすい基本アイコン
私が使いやすいかなと思うアイコンを抜き出してみました。
このコードをコピペで使用してもOKです。
| icon-pencil | icon-heart | icon-star-full | icon-tag |
| icon-checkbox-checked | icon-checkmark | icon-warning | icon-radio-checked2 |
他にもアイコンは沢山あります。 使いたいアイコンはありましたか？
- じつは基本アイコンだけで、250個もあります。
すべてを見たい人は 右端にある + をクリックしてください♪ -
HTMLをちょこっと追加（コピペ）して終わりです♪
コピペが出来れはOKなので、初心者さんでもだいじょうぶ！
どこでも好きな位置に表示させれるわけではない ようなので気を付けてください。
＊吹き出しの中の使用も出来ません＊
THE THOR【ザ・トール】アイコンオプションの使い方
上の矢印の〇で囲ってある「アイコンオプション」をクリックして 自分が使いたい、アイコンを探します。
THE THOR【ザ・トール】使いたいアイコンを決める
アイコンオプションをクリックして、アイコンを表示させて、 自分が使いたいなと思うアイコンを見つけてください(^^)/ 例として、↓↓このアイコンで説明をしていきます。
アイコンを決めたら、アイコンの横にある、英語の文字をコピーしてください。
英語の文字の上にマウスを持っていき、3回クリックすれば選択になります。
クリック1回 場所選択 クリック2回 単語選択 クリック3回 文選択
覚えておくと便利です(^^♪
THE THOR【ザ・トール】アイコンを入れたい場所をクリック
次はどこにアイコンを表示させたいか です。
表示させたい場所みマウスを持っていきクリックしてください。
THE THOR【ザ・トール】アイコン挿入
上の画像の下矢印の〇で囲ってある「アイコン挿入」をクリックしてください。
↓↓このポップアップ画面が表示されますので 〇で囲ってある場所に、先ほどコピーしたアイコン名を張り付けてください。
張り付けた後は「OK」を選択すれば
この様にアイコンが表示されます。
小さいくて黒い画像が表示されます(￣▽￣;)
THE THOR【ザ・トール】アイコンを加工する
この黒の小さいアイコン・・・・ このままだと私は必要性を感じないです。
という訳でアイコンを加工していきましょう~♪
これからが楽しいのです(^^♪
小さすぎなので、まずサイズを大きくします。
残念ながら、このアイコンを文字のようにマウスで選択はできません。
それが出来たら楽なんですけどね(;^_^A
残念ながらHTMLのコードを追加してあげないとできません。
いつもは「ビジュアル」と「テキスト」のタブボタンを クリックしての作業を紹介していたのですが、 今回は「ツール」の「ソースコード」の使用を紹介します♪
〇で囲んである「ツール」の横の「▼」をクリックしてください。
「 ＜＞ソースコード 」をクリックしてください。
☆エディタに「ツール」が表示されていない場合は、「テキスト」タブをクリックしてください。
THE THOR【ザ・トール】アイコンについて
<p class=”icon-bookmarks” > という文字列を↑↑から見つけます。
見つけたら、下のコピペ文を後ろに追加してください。
THE THOR【ザ・トール】アイコンの大きさを20ｐｘにするコピペ文
style=”font-size: 20px;”
↑この文が文字サイズの大きさの指定のコードになります。
この文字列を ” p class=”icon-bookmarks” ”の後ろに足します。
←この大きさになります。
<p class=”icon-bookmarks” style=”font-size: 20px;”>
THE THOR【ザ・トール】アイコンの大きさを35ｐｘにするコピペ文
style=”font-size: 35px;”
<p class=”icon-bookmarks” style=”font-size:35px;”>
THE THOR【ザ・トール】アイコンの大きさを50ｐｘにするコピペ文
style=”font-size: 50px;”
<p class=”icon-bookmarks” style=”font-size:50px;“>
THE THOR【ザ・トール】アイコンの色を変える
ここでは、わかりやすいように大きなアイコンにしたものの色を変更します。
どの色にしますか？
例としてコピペ文にしてありますが、 自分の好きな色のコードを記入すればOKなのです。
下の記事で、色のコードを見てきて、好きな色のコードをコピペしてもOK♪
>>>【wordpress】文章の囲み枠で必要になる色のコードまとめ♪
THE THOR【ザ・トール】アイコン色を赤にするコピペ文
color: #a60303;
↑この文が色の指定のコードになります。
この文字列を ” p class=”icon-bookmarks” + 文字サイズ指定文： ”の後ろに足します。
<p class=”icon-bookmarks” style=”font-size:50px; color: #a60303;“>
THE THOR【ザ・トール】アイコン色を青にするコピペ文
color: #333399;
<p class=”icon-bookmarks” style=”font-size:50px; color: #333399;“>
THE THOR【ザ・トール】アイコン色を緑にするコピペ文
color: #008080;
<p class=”icon-bookmarks” style=”font-size:50px; color: #008080;“>
THE THOR【ザ・トール】アイコン色をオレンジにするコピペ文
color: #eb981c;
<p class=”icon-bookmarks” style=”font-size:50px; color: #eb981c;“>
THE THOR【ザ・トール】アイコンの色を変える まとめ
【THE THOR（ザ・トール）】 
のアイコンの紹介をしたくて記事を書いてみました。
そらのひとりごとのページでも書きましたが、CSSでアイコンを加工できるのはわかっているのですが CSS追加の場所にかくの、めんどうなんですよね。
クラス名覚えていないと使えないし・・・。
HTMLでちょこっと追加するだけで、自分の好きなように変更できる。
私は使い勝手がいいかなぁと思っています。
毎回使うようなCSSのクラス名は覚えているからいいんですが・・・
アイコンのサイズと色・・・どれだけ準備しとけばいいのですかって感じなので(￣▽￣;)
私は使ってないです(笑)
/Decoration/TOOL/TOP/THE THOR/AFEREIT/
