THE THOR【ザ・トール】アイコンをコピペでカスタマイズ!

  • アイコンオプションってなに??
  • アイコンってサイズや色の変更はできないの?
  • ブロックエディタでアイコンって使えないの?

 

アイコンオプションのボタンをクリックして中を見てみると絵とコードが一覧になっているだけ。

 

 

「・・・・で?(-“-)どうしたら使えるの?」と思いませんでした??

 

 

この記事ではTHE THOR(ザ・トール)の「アイコンオプション」の使い方を、同じ疑問を持った方(笑)にわかりやすく紹介します♪

 

 
そら

 

いつものように、CSSは使いません。

HTMLをちょこっと追加(コピペ)して終わりです♪

コピペが出来れはOKなので、初心者さんでも大丈夫!

 

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個もあります。

すべてを見たい人は 右端にある + をクリックしてください♪

 

THE THOR【ザ・トール】アイコンオプションの注意事項

 

THE THORのアイコンを使うと、文の先頭にアイコンが 表示されます。

 

 
sora
吹き出しの中の使用も残念ながら出来ませんでした
 
どこでも好きな位置に表示させれるわけではない ようなので気を付けてください。
 
 

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

 

  1. アイコンオプションから使いたいアイコンのコードをコピーする
  2. 使用したい行をクリックした後に「アイコン挿入」をクリック
  3. 「アイコン挿入」にコピーしたコードを張り付ける
  4. アイコンのサイズ&色のコードをコピペする
  5. アイコン以外の文字サイズを通常のサイズに合わせる

 

アイコンオプションからコードをコピーしてくる

 

 

 

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

アイコンオプションをクリックしアイコン一覧を表示させて、 自分が使いたいなと思うアイコンを見つけてください(^^)/

例として、↓↓このアイコンで説明をしていきます。

 

 

 

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

 

 

アイコンを使用したい行をクリック

 

次は「どの行にアイコンを表示させたいか」です。

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

 

「アイコン挿入」にコードを張り付ける

 

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

 

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

 

 

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

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

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

ブロックエディタでアイコンを使用する方法

 

アイコン加工の前に、ブロックエディタでのアイコンオプションの私の使用方法を先に紹介します

アイコンを表示させたい時に使用するのは、ブロックスタイルの「クラシック」です。

「クラシック」スタイルならば、「アイコン挿入」が表示されます。


通常のブロックでは、THE THORの「アイコンオプション」も「アイコン挿入」も表示されません

 

ブロックエディタを使用してアイコンを使用したい場合は、どこからかコードを調達してこなければ残念ながら使用できないのです。

 

 
そら
ブロックエディタでアイコンオプションが非表示になりますので、この記事を見ながらコードを打ちこんでいます( ̄▽ ̄;)
 
「クラシック」ブロックでも「アイコンオプション」は残念ながら表示されません。
 

THE THOR【ザ・トール】アイコンのサイズと色の変更♪アイコンを加工する

 

←この黒の小さいアイコン( ̄▽ ̄;)

このアイコンを加工していきましょう~♪

 

THE THOR【ザ・トール】アイコンのサイズ変更♪

 

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

 

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

 

 

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

 

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

 

THE THOR【ザ・トール】アイコンの文字列を探す

<p class=”icon-bookmarks” > という文字列を↑↑から見つけます。

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

 

 
そら
クラシックエディタを使用している場合は「Ctrl」キー を押しながら「f」キーを押してください。
検索窓が上部にに表示されますので、アイコンのコードを検索してみてください。
 

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【ザ・トール】アイコン以外の文字サイズ変更♪

 

このままだと、アイコン以外の文字もサイズが同じように大きくなってしまいます。

小さくしたい文字をドラックして選択し、文字サイズを変更してください。

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

 

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

 

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

>>>カラーコードまとめ& クラシックエディタで コードを取得

 

 
そら
このカラーって、じつは英語でもOKなんです。
カラーコードが分からなくても、英語がわかれば色の指定は可能です。
 

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

 

color: red;

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

 

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

<p class=”icon-bookmarks” style=”font-size:50px; color: red;“>

 

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

 

color: blue;

<p class=”icon-bookmarks” style=”font-size:50px; color: blue;“>

 

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【ザ・トール】アイコン以外の文字色変更♪

 

サイズと変更方法は同じになります。

文字をドラックで選択して、文字色を変更してください。

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

 

そらはブロックエディタでこのブログを書いています。
という訳で、アイコンオプションはちょっと使いづらいです。
アイコンオプションのコードのコピーをどうするかが手間になりますね(;^_^A

サブドメインを作成して、クラシックエディタのプラグインを有効化しておいてそこからコピーしてくるのが簡単かなぁと思います。

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

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

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

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

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