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

この記事では【THE THOR（ザ・トール）】にある「アイコンオプション」のアイコンの使い方を、わかりやすく紹介♪

応用編としてアイコンの色の変更と、サイズの変更方法も紹介しています。

1 【THE THOR（ザ・トール）】のアイコンの種類
- 1.1 おすすめの【THE THOR（ザ・トール）】の使いやすい基本アイコン
2 THE THOR【ザ・トール】アイコンオプションの使い方
3 THE THOR【ザ・トール】使いたいアイコンを決める
4 THE THOR【ザ・トール】アイコンを入れたい場所をクリック
5 THE THOR【ザ・トール】アイコン挿入
6 THE THOR【ザ・トール】アイコンを加工する
7 THE THOR【ザ・トール】アイコンについて
8 THE THOR【ザ・トール】アイコンの色を変える
9 THE THOR【ザ・トール】アイコンの色を変える　まとめ

【THE THOR（ザ・トール）】のアイコンの種類

【THE THOR（ザ・トール）】に装備されているアイコンは沢山あります。

THE THOR【ザ・トール】アイコンオプションの使い方

上の矢印の〇で囲ってある「アイコンオプション」をクリックして自分が使いたい、アイコンを探します。

THE THOR【ザ・トール】使いたいアイコンを決める

アイコンオプションをクリックして、アイコンを表示させて、自分が使いたいなと思うアイコンを見つけてください(^^)/ 例として、↓↓このアイコンで説明をしていきます。

アイコンを決めたら、アイコンの横にある、英語の文字をコピーしてください。

英語の文字の上にマウスを持っていき、3回クリックすれば選択になります。

クリック1回　場所選択クリック2回　単語選択クリック3回　文選択

覚えておくと便利です(^^♪

THE THOR【ザ・トール】アイコンを入れたい場所をクリック

次はどこにアイコンを表示させたいか　です。

表示させたい場所みマウスを持っていきクリックしてください。

THE THOR【ザ・トール】アイコン挿入

上の画像の下矢印の〇で囲ってある「アイコン挿入」をクリックしてください。

↓↓このポップアップ画面が表示されますので〇で囲ってある場所に、先ほどコピーしたアイコン名を張り付けてください。

張り付けた後は「OK」を選択すれば

　この様にアイコンが表示されます。

小さいくて黒い画像が表示されます(￣▽￣;)

THE THOR【ザ・トール】アイコンを加工する

この黒の小さいアイコン・・・・このままだと私は必要性を感じないです。

という訳でアイコンを加工していきましょう~♪

これからが楽しいのです(^^♪

小さすぎなので、まずサイズを大きくします。

残念ながら、このアイコンを文字のようにマウスで選択はできません。

それが出来たら楽なんですけどね(;^_^A

残念ながらHTMLのコードを追加してあげないとできません。

いつもは「ビジュアル」と「テキスト」のタブボタンをクリックしての作業を紹介していたのですが、今回は「ツール」の「ソースコード」の使用を紹介します♪

〇で囲んである「ツール」の横の「▼」をクリックしてください。

「　＜＞ソースコード　」をクリックしてください。

☆エディタに「ツール」が表示されていない場合は、「テキスト」タブをクリックしてください。

THE THOR【ザ・トール】アイコンについて

という文字列を↑↑から見つけます。

見つけたら、下のコピペ文を後ろに追加してください。

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

style=”font-size: 20px;”

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

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

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

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

style=”font-size: 35px;”

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

style=”font-size: 50px;”

THE THOR【ザ・トール】アイコンの色を変える

ここでは、わかりやすいように大きなアイコンにしたものの色を変更します。

どの色にしますか？

例としてコピペ文にしてありますが、自分の好きな色のコードを記入すればOKなのです。

下の記事で、色のコードを見てきて、好きな色のコードをコピペしてもOK♪

>>>【wordpress】文章の囲み枠で必要になる色のコードまとめ♪

THE THOR【ザ・トール】アイコン色を赤にするコピペ文

color: #a60303;

↑この文が色の指定のコードになります。

この文字列を　”　p class=”icon-bookmarks” +　文字サイズ指定文：　”の後ろに足します。

THE THOR【ザ・トール】アイコン色を青にするコピペ文

color: #333399;

THE THOR【ザ・トール】アイコン色を緑にするコピペ文

color: #008080;

THE THOR【ザ・トール】アイコン色をオレンジにするコピペ文

color: #eb981c;

THE THOR【ザ・トール】アイコンの色を変える　まとめ

【THE THOR（ザ・トール）】のアイコンの紹介をしたくて記事を書いてみました。

そらのひとりごとのページでも書きましたが、CSSでアイコンを加工できるのはわかっているのですが CSS追加の場所にかくの、めんどうなんですよね。

クラス名覚えていないと使えないし・・・。

HTMLでちょこっと追加するだけで、自分の好きなように変更できる。

私は使い勝手がいいかなぁと思っています。

毎回使うようなCSSのクラス名は覚えているからいいんですが・・・

アイコンのサイズと色・・・どれだけ準備しとけばいいのですかって感じなので(￣▽￣;)

私は使ってないです(笑)

ランキングに参加しているのでバナーをクリックしていただけると嬉しいです♪

人気ブログランキング

私が個人でAmazonアソシエイトに応募して落ちましたが、「もしもアフェリエイト」を通して申請したら合格しました。

もしもから申請をお勧めします♪

A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。ここもおすすめ♪

/TOP/


icon-pencil	icon-heart	icon-star-full	icon-tag

icon-checkbox-checked	icon-checkmark	icon-warning	icon-radio-checked2