【THE THOR】アイコンの「挿入位置」「カラー色」「サイズ」を変更できる超便利な使い方

THE THOR(ザ・トール)の記事作成エディタには、

簡単にアイコンを挿入できるオプション機能がデフォルトでついています。

でも、通常の使い方だと、困ったことに 文章の先頭にしか設置できないんですよね。

 

いっぬ
文末に挿入したい!カラーも大きさも変えたいよ~;;

 

今日はこのお悩みを解決したいと思います。

THE THORでアイコンの「挿入位置」「カラー色」「サイズ」を変更できる超便利な使い方を紹介しますよ。

 

この記事で解決すること

  • アイコンを文中文末、好きな位置に挿入できるようになる
  • アイコンのカラー色を変更できる
  • アイコンのサイズを変更できる

 

 

 

【THE THOR】アイコンの「挿入位置」「カラー色」「サイズ」を変更できる超便利な使い方

THE THORマニュアル公式の使い方では文頭にしか設置できない

公式マニュアルで書いている基本の使い方はこんな感じ。

  1. 記事作成のビジュアルエディタで「アイコンオプション」を押す
  2. 記事中に使いたいアイコンのコードをコピー
  3. 記事本文中のアイコンを挿入したい位置で「アイコン挿入」をクリック
  4. 「アイコン入力」欄にコードをペーストしてOKボタン

この基本の使い方だと、文頭にしか挿入できないしカラー色の変更もできない!

12_01_公式マニュアルの使い方の難点

 

それを解決するのがこれから紹介する方法です

 

 

アイコンの「位置」「カラー色」「サイズ」カスタマイズはHTMLコピペで一発解決!

解決方法は超かんたん。

解決法

記事作成画面のテキストエディタで、アイコンを挿入したい位置に 以下のHTML 【アイコンコード(クラス名)】【カラーコード】を変えて挿入するだけでOK

<i class=”【アイコンコード】” style=”color:【#カラーコード】;”></i>

例えば、こんな感じ。

<i class=”icon-heart” style=”color:#f7bd6a;”></i>

 

アイコンコードの調べ方は、基本の使い方と同じ。

記事作成画面の「アイコンオプション」から取得しましょう~。

12_002_アイコンコードの取得方法

12_003_テキストエディタに貼り付け

 

文末に挿入するとこんなふうになります

 

?

アイコンと文字の距離感を調整したい場合

➔ 以下のようにアイコンに余白(margin)をつける設定を加える

<i class=”icon-heart” style=”color:#f7bd6a; margin:0 0.4rem; “></i>

文末に挿入するとこんなふうになります

 

?

アイコンのサイズを変えたい場合

➔ 以下のように文字の大きさ(font-size)を設定に加える

<i class=”icon-heart” style=”font-size:20px; color:#f7bd6a; margin:0 0.4rem; “></i>

文末に挿入するとこんなふうになります

 

このようにテキストエディタで直接HTML記述をすることで、

THE THORのアイコンも自由にカスタマイズができるようになりますよ。

ぜひ使ってみてください

 

Sponsored Link

最強のWordPressテーマ「THE THOR」

本当にブロガーさんやアフィリエイターさんのためになる日本一のテーマにしたいと思っていますので、些細なことでも気が付いたのであればご報告いただけると幸いです。ご要望も、バグ報告も喜んで承っております!

CTR IMG