THETHORのアイコンコード【クラス名】の使い方を詳しく解説!!

 
マーシー
この記事ではTHETHORのアイコンコード【クラス名】の使い方について紹介しているよ!!
\ コードの確認はコチラ!!   /

クラス名の基本的な使い方

 
マーシー
クラス名の基本的な使い方として、まずはアイコンを挿入する方法を覚えよう!!

THETHORのアイコン【クラス名】を利用したアイコンの挿入方法は2種類あるよ!

アイコンの挿入方法
・【クラシック】で挿入する。
・【カスタムHTML】で挿入する。

※手順の紹介はGutenbergでの操作方法になります!Classic Editorなどのプラグインを使用している方は表示画面や操作手順が異なってきますのでご注意下さい。

【クラシック】で挿入する

 
マーシー
クラシックを利用してアイコンを挿入する方法が一番簡単!!挿入方法を紹介するね!!

STEP①

投稿画面で【クラシック】ブロックを選択する。

STEP②

アイコン挿入をクリックする。

STEP③

挿入したいアイコンのクラス名を入力する。

アイコンを挿入した参考例

 ←参考例として「icon-user」というクラス名を入力したらこんな感じで表示されたよ!!挿入したいアイコンのクラス名を入力して試してみてね!!

【カスタムHTML】で挿入する

 
マーシー
カスタムHTMLを利用したアイコンの挿入方法を紹介するよ!!HTML要素はこの機会に是非覚えてみてね!!

STEP①

投稿画面で【カスタムHTML】ブロックを選択する。

STEP②

HTMLコードを入力する。

HTMLコードの紹介

HTML要素の種類と違い
ブロック要素 – 段落有<p></p>
汎用ブロック要素 – 改行有<div></div>
汎用インライン要素 – 改行無<span></span>
HTMLコード
<p class=”クラス名”></p>
<div class=”クラス名”></div>
<span class=”クラス名”></span>

文章の途中にアイコンを挿入する場合

 
マーシー
文章の途中にアイコンを入れる場合は、HTML要素の「span」を使うと上手くいくよ!!

HTML要素の<span class=”クラス名”></span>を使うことで文章の途中にアイコンを挿入することができます。

文章の途中にアイコンを挿入した参考例

文章の途中にアイコンを入れた参考です。

アイコンオプションが表示されない!?

WordPress5.0からエディターが「Gutenberg」というブロック構成に変更になっています。

【クラシック】ブロックを使用することでTHETHORの機能のほとんどは使用できるのですが、唯一の問題点は「アイコンオプション」が表示されないことですね。

解決方法

 
マーシー
解決方法としては「Classic Editor」というプラグインを使って旧エディターにバージョンダウンさせると「アイコンオプション」が表示されるよ!!

個人的見解として、アイコンオプションがないとアイコンのクラス名を素早く確認できないことは確かですが、わざわざ旧エディタに戻す必要があるのか?と考えると戻す必要はないと思います。

アイコンコード一覧としてTHETHORに標準搭載されているアイコンの「クラス名」「Unicode」をまとめたページを作っているので確認してみてね!!

\ 合わせて読みたい!!  /