コピペOK【ザ・トール】アイコンオプションの使い方♪

この記事では【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個もあります。
すべてを見たい人は 右端にある + をクリックしてください♪

 

 

そら
いつものように、CSSは使いません。
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【ザ・トール】アイコンの大きさを20pxにするコピペ文

style=”font-size: 20px;”

↑この文が文字サイズの大きさの指定のコードになります。

この文字列を ” p class=”icon-bookmarks”  ”の後ろに足します。

←この大きさになります。

<p class=”icon-bookmarks” style=”font-size: 20px;”>

THE THOR【ザ・トール】アイコンの大きさを35pxにするコピペ文

style=”font-size: 35px;”

<p class=”icon-bookmarks” style=”font-size:35px;”>

THE THOR【ザ・トール】アイコンの大きさを50pxにするコピペ文

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/

最新情報をチェックしよう!