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

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

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

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

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

おすすめの【THE THOR（ザ・トール）】の使いやすい基本アイコン

私が使いやすいかなと思うアイコンを抜き出してみました。

このコードをコピペで使用してもOKです。

他にもアイコンは沢山あります。 使いたいアイコンはありましたか？

じつは基本アイコンだけで、250個もあります。
すべてを見たい人は 右端にある　+　をクリックしてください♪

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のクラス名は覚えているからいいんですが・・・

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

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

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

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

もしもからの申請も保険と思ってしておきましょう♪

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

ここもおすすめ♪アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/

/ブログを装飾/初心者向けTHE THOR初期設定/便利なサイト＆ツール/