そらのまなびぶろぐ

＼　 THE THOR で ブログを はじめる 初心者さん 向けに 簡単な言葉と 画像たっぷりで 手順を紹介 　／

コピペOK★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のアイコンを使うと、文の初めにアイコンが 表示されます。
どこでも好きな位置に表示させれるわけではない ようなので気を付けてください。

＊吹き出しの中の使用も残念ながら出来ませんでした＊

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

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

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

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

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

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

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

  • クリック1回　場所選択
  • クリック2回　単語選択
  • クリック3回　文選択
そら
覚えておくと便利です(^^♪

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

次は「どの行にアイコンを表示させたいか」です。
表示させたい行にマウスを持っていきクリックしてください。

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

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

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

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

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

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

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

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

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

表示されていない場合はエディタ拡張プラグインを下の記事を参考にして「アイコン挿入」を表示させてください。

≫THE THOR(ザ・トール)ブロックエディタ拡張プラグインを紹介


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

しかし、「クラシック」を選択していても「アイコンオプション」は残念ながら表示されません。
エディタの拡張プラグイン「Advanced Editor Tools (previously TinyMCE Advanced)」にも、項目として表示されません。

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

そら
ブロックエディタでアイコンオプションが非表示になりますので、この記事を見ながらコードを打ちこんでいます(￣▽￣;)

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

←この黒の小さいアイコン(￣▽￣;)
このままだと私は必要性を感じないです。
という訳でアイコンを加工していきましょう~♪
これからが楽しいのです(^^♪

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

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

そら
それが出来たら楽なんですけどね(;^_^A
残念ながらHTMLのコードを追加してあげないとできませんでした

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

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

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

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

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

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

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

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

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

このままだと、アイコン以外の文字もサイズが同じように大きくなってしまいます。
小さくしたい文字をドラックして選択し、文字サイズを変更してください。

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

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

どの色にしますか？

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

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

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

そら
このカラーって、じつは英語でも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アソシエイトに応募して落ちましたが、「もしもアフェリエイト」を通して申請したら合格しました。

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

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

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

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

THE THORのカスタマイズの最新記事8件