【THE THOR】アイコンの使い方・カスタマイズ方法を解説

くろくま
THE THORでアイコンを表示したいけど、使い方が分からないので教えて下さい!
しろくま
アイコンの使い方、戸惑いますよね。
THE THORは、アイコンの使い方が少し分かりにくくなっているので、おすすめの使い方を3つ紹介
しますね。
スポンサーリンク

アイコンの使い方は3パターン

アイコンを記事本文に表示する方法は、次の3パターンです。

  • 【初心者向け】クラシックエディタでアイコンを表示する
  • 【中級者向け】グーテンベルクでアイコンを表示する
  • 【中級者向け】HTMLを編集してアイコンを表示する
しろくま
おすすめ順にアイコンの使い方を紹介しますね。

【初心者向け】クラシックエディタでアイコンを表示する

アイコンを簡単な方法で記事本文へ表示するのに、1番おすすめしたいのが、「Classic Editor(クラシックエディタ)」を利用する方法です。

ただし、WordPress 5.0以降は、Gutenberg(グーテンベルク)というエディタがデフォルトになっているので、プラグインをインストールする必要があります。

クラシックエディタをインストールする

クラシックエディタは、次の手順でインストールできます。

(1)[プラグイン] → (2)[新規追加] → (3)[Classic Editor]を検索 → (4)[今すぐインストール]
Classic Editorのプラグインをインストール

インストール後は「有効化」をクリックしておきましょう。

Classic Editorを有効化

クラシックエディタでアイコンを利用する方法

クラシックエディタのプラグインを有効化すると、投稿画面のエディタがクラシックエディタに切り替っているのを確認できます。

クラシックエディタの投稿画面

画面上部の「アイコンオプション」をクリックします。

クラシックエディタでアイコンオプションを選択

アイコン一覧が表示されるので、アイコンのコード「icon-xxx」を範囲選択してコピーします。

THE THORのアイコン一覧

「アイコン挿入」を選択します。

アイコン挿入ボタンをクリック

コピーしておいたアイコンのコード「icon-xxx」を貼り付けて「OK」を選択します。

アイコンのコード入力画面

記事本文にアイコンを表示できたら完了です。

 ←「icon-heart」で、アイコンを表示してみました。

くろくま
クラシックエディタを利用すると、アイコン画像の一覧から選べて分かりやすいね!

【中級者向け】グーテンベルクでアイコンを表示する

グーテンベルクでアイコンを表示するには、「クラシック」のフォーマットをクリックします。

グーテンベルクでクラシックを選択

続いて「アイコン挿入」をクリックします。

アイコン挿入ボタンをクリック

入力画面が表示されるので「icon-pen」など、表示させたいアイコンのコードを入力します。

アイコンのコード入力画面

 ←「icon-pen」で、アイコンを表示してみました。

上記文章は、エディタ上で次のようになっています。

<p class="icon-pen"><span> ←「icon-pen」で、アイコンを挿入してみました。</span></p>

グーテンベルクでアイコンを使う時の問題は、アイコンのコードを予め知っていないと使えない点です。

そこで!

アイコンのコードをコピペで使えるよう、498種類全てのアイコンを載せました。

しろくま
アイコンのコード一覧は、続きをご覧ください。

【コピペOK】アイコンのコード一覧(全498種類)

タイトルをクリックすると、アイコンの一覧を表示できるので、コードをコピペして利用下さい
基本アイコン(258種類)
icon-quotationicon-quotation2icon-newspaper
icon-pencilicon-pencil2icon-quill
icon-penicon-blogicon-eyedropper
icon-dropleticon-paint-formaticon-image
icon-imagesicon-filmicon-dice
icon-bullhornicon-bookicon-books
icon-carticon-credit-cardicon-lifebuoy
icon-phoneicon-phone-hang-upicon-address-book
icon-musicicon-playicon-pacman
icon-spadesicon-clubsicon-diamonds
icon-hearticon-heart-brokenicon-star-empty
icon-star-halficon-star-fullicon-connection
icon-podcasticon-feedicon-file-text
icon-file-text2icon-profileicon-file-empty
icon-files-emptyicon-file-pictureicon-file-music
icon-file-playicon-file-videoicon-file-zip
icon-copyicon-pasteicon-stack
icon-foldericon-folder-openicon-folder-plus
icon-folder-minusicon-folder-downloadicon-folder-upload
icon-tagicon-price-tagsicon-barcode
icon-qrcodeicon-ticketicon-coin-dollar
icon-coin-euroicon-coin-poundicon-coin-yen
icon-calculatoricon-pushpinicon-location
icon-location2icon-mapicon-map2
icon-updateicon-clockicon-clock2
icon-alarmicon-bellicon-stopwatch
icon-calendaricon-drawericon-drawer2
icon-box-addicon-box-removeicon-floppy-disk
icon-driveicon-databaseicon-hour-glass
icon-zoom-inicon-zoom-outicon-enlarge
icon-enlarge2icon-shrinkicon-shrink2
icon-keyicon-key2icon-lock
icon-unlockedicon-wrenchicon-equalizer
icon-equalizer2icon-hammericon-hammer2
icon-magic-wandicon-aid-kiticon-bug
icon-pie-charticon-stats-dotsicon-stats-bars
icon-stats-bars2icon-trophyicon-gift
icon-glassicon-glass2icon-meter
icon-meter2icon-fireicon-lab
icon-magneticon-binicon-bin2
icon-briefcaseicon-shieldicon-road
icon-powericon-power-cordicon-switch
icon-list-numberedicon-listicon-list2
icon-menuicon-menu2icon-menu3
icon-menu4icon-menu5icon-new
icon-closeicon-compassicon-compass2
icon-view_cardicon-view_wideicon-view_normal
icon-binocularsicon-searchicon-search2
icon-cogicon-cupicon-spoon-knife
icon-leaficon-accessibilityicon-target
icon-clipboardicon-treeicon-cloud
icon-cloud-downloadicon-cloud-uploadicon-cloud-check
icon-downloadicon-download2icon-download3
icon-uploadicon-upload2icon-upload3
icon-sphereicon-earthicon-link
icon-flagicon-attachmenticon-eye
icon-eye-plusicon-eye-minusicon-eye-blocked
icon-bookmarkicon-bookmarksicon-sun
icon-contrasticon-brightness-contrasticon-warning
icon-notificationicon-questionicon-plus
icon-minusicon-infoicon-cancel-circle
icon-blockedicon-crossicon-checkmark
icon-checkmark2icon-spell-checkicon-enter
icon-exiticon-tabicon-move-up
icon-move-downicon-sort-alpha-ascicon-sort-alpha-desc
icon-sort-numeric-ascicon-sort-numberic-descicon-sort-amount-asc
icon-sort-amount-descicon-commandicon-shift
icon-ctrlicon-opticon-checkbox-checked
icon-checkbox-uncheckedicon-radio-checkedicon-radio-checked2
icon-radio-uncheckedicon-cropicon-make-group
icon-ungroupicon-scissorsicon-filter
icon-fonticon-ligatureicon-ligature2
icon-text-heighticon-text-widthicon-font-size
icon-boldicon-underlineicon-italic
icon-strikethroughicon-omegaicon-sigma
icon-page-breakicon-superscripticon-superscript2
icon-subscripticon-subscript2icon-text-color
icon-pagebreakicon-clear-formattingicon-table
icon-table2icon-insert-templateicon-pilcrow
icon-ltricon-rtlicon-section
icon-paragraph-lefticon-paragraph-centericon-paragraph-right
icon-paragraph-justifyicon-indent-increaseicon-indent-decrease
icon-shareicon-share2icon-new-tab
icon-embedicon-embed2icon-terminal
icon-cogsicon-mailicon-mail2
icon-mail3icon-mail4icon-mail5
建物・乗り物アイコン(8種類)
icon-homeicon-home2icon-home3
icon-officeicon-libraryicon-rocket
icon-airplaneicon-truck
読込・AV機器アイコン(24種類)
icon-loop2icon-spinnericon-spinner2
icon-spinner3icon-spinner4icon-spinner5
icon-spinner6icon-spinner7icon-spinner8
icon-spinner9icon-spinner10icon-spinner11
icon-displayicon-laptopicon-mobile
icon-mobile2icon-tableticon-tv
icon-cameraicon-headphonesicon-video-camera
icon-micicon-printericon-keyboard
オーディオ系アイコン(27種類)
icon-play2icon-play3icon-pause
icon-pause2icon-stopicon-stop2
icon-previousicon-previous2icon-next
icon-next2icon-backwardicon-backward2
icon-firsticon-forward2icon-forward3
icon-lasticon-ejecticon-volume-high
icon-volume-mediumicon-volume-lowicon-volume-mute
icon-volume-mute2icon-volume-increaseicon-volume-decrease
icon-loopicon-infiniteicon-shuffle
人・顔アイコン(45種類)
icon-usericon-usersicon-user-plus
icon-user-minusicon-user-checkicon-user-tie
icon-manicon-womanicon-man-woman
icon-happyicon-happy2icon-smile
icon-smile2icon-tongueicon-tongue2
icon-sadicon-sad2icon-wink
icon-wink2icon-grinicon-grin2
icon-coolicon-cool2icon-angry
icon-angry2icon-evilicon-evil2
icon-shockedicon-shocked2icon-baffled
icon-baffled2icon-confusedicon-confused2
icon-neutralicon-neutral2icon-hipster
icon-hipster2icon-wonderingicon-wondering2
icon-sleepyicon-sleepy2icon-frustrated
icon-frustrated2icon-cryingicon-crying2
矢印・コメントアイコン(36種類)
icon-point-upicon-point-righticon-point-down
icon-point-lefticon-arrow-up-lefticon-arrow-up-left2
icon-arrow-upicon-arrow-up2icon-arrow-up-right
icon-arrow-up-right2icon-arrow-righticon-arrow-right2
icon-arrow-down-righticon-arrow-down-right2icon-arrow-down
icon-arrow-down2icon-arrow-down-lefticon-arrow-down-left2
icon-arrow-lefticon-arrow-left2icon-circle-up
icon-circle-righticon-circle-downicon-circle-left
icon-undoicon-undo2icon-forward
icon-replyicon-redoicon-redo2
icon-bubbleicon-bubble2icon-bubbles
icon-bubbles2icon-bubbles3icon-bubbles4
ロゴアイコン(100種類)
icon-amazonicon-googleicon-google2
icon-google-plusicon-google-plus2icon-hangouts
icon-google-driveicon-facebookicon-facebook2
icon-instagramicon-whatsappicon-spotify
icon-telegramicon-twittericon-feedly
icon-pocketicon-hatenabookmarkicon-hatenabookmark2
icon-lineicon-vineicon-vk
icon-renrenicon-sina-weiboicon-rss
icon-rss2icon-youtubeicon-twitch
icon-vimeoicon-vimeo2icon-lanyrd
icon-flickricon-flickr2icon-flickr3
icon-flickr4icon-dribbbleicon-behance
icon-behance2icon-deviantarticon-500px
icon-steamicon-steam2icon-dropbox
icon-onedriveicon-githubicon-npm
icon-basecampicon-trelloicon-wordpress
icon-joomlaicon-elloicon-blogger
icon-blogger2icon-tumblricon-tumblr2
icon-yahooicon-yahoo2icon-tux
icon-appleincicon-findericon-android
icon-windowsicon-windows8icon-soundcloud
icon-soundcloud2icon-skypeicon-reddit
icon-hackernewsicon-wikipediaicon-linkedin
icon-linkedin2icon-lastfmicon-lastfm2
icon-deliciousicon-stumbleuponicon-stumbleupon2
icon-stackoverflowicon-pinteresticon-pinterest2
icon-xingicon-xing2icon-flattr
icon-foursquareicon-yelpicon-paypal
icon-chromeicon-firefoxicon-IE
icon-edgeicon-safariicon-opera
icon-file-pdficon-file-openofficeicon-file-word
icon-file-excelicon-libreofficeicon-html-five
icon-html-five2icon-css3icon-git
icon-codepen

【中級者向け】HTMLを編集してアイコンを表示する

HTMLを直接編集できる方は、class属性を次のように指定すると、アイコンを挿入できます。

<p class="icon-xxx">サンプルテキスト</p>

アイコンのコードとなる「icon-xxx」の一覧は、

【コピペOK】アイコンのコード一覧(全498種類)

上記にまとめていますので、こちらをご確認下さい。

アイコンをカスタマイズしてみよう

アイコンのカスタマイズは、テキストと同じようにCSSで編集できます。

簡単な一文を追加するだけで、アイコンを装飾できるので、コードをコピペして使ってみて下さい。

アイコンの色を変更する

アイコンの標準色は黒なので、色の変更方法をご紹介します。

今回は「icon-heart」を使って、赤色に変更してみます。

上記アイコンは、エディタ上で次のようになっています。

<p class="icon-heart"></p>
<p class="icon-heart" style="color: #ff0000;"></p>

「style=”color: #○○○○○○;”」を追加して、好きな色のコードを指定すれば、アイコン色の変更は完了です。

アイコンのサイズを変更する

アイコンのサイズ変更方法をご紹介します。

今回は「icon-camera」を使って、サイズ変更してみます。

 ← サイズ指定なし

 ← 25px

 ← 40px

上記文章は、エディタ上で次のようになっています。

<p class="icon-camera"> ← サイズ指定なし</p>
<p class="icon-camera" style="font-size: 25px;"> ← 25px</p>
<p class="icon-camera" style="font-size: 40px;"> ← 40px</p>

「style=”font-size: ○○px;”」を追加して、サイズを指定すれば変更は完了です。

まとめ

アイコンの使い方・カスタマイズ方法をご紹介しました。

THE THORでは、498種類の独自アイコンを標準で搭載しています。

アイコンを取り入れることで、読者が直感的に理解・操作できる効果もあるので、この機会に活用してみてはいかがでしょうか。

最後まで読んでいただき、ありがとうございました。

スポンサーリンク