【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

注文住宅で「後悔しない家づくり」をするには


まず第1に、ハウスメーカー選びが大切です。
そのうえでハウスメーカー各社の比較検討はかかせません。

とはいえ1社ずつ資料を集めるのには非効率的です。

そこで便利なのが一括資料請求サービス「タウンライフ家づくり」

各社の【プラン計画】【見積もり費用】をイッキに無料請求し効率的なハウスメーカー選びが可能に。

まずは簡単な質問に答えてハウスメーカー診断してみませんか?

CTR IMG