XWRITEのWordPressテーマで、選べるアイコンについてご紹介します。
![](https://homemade365.com/wp-content/uploads/2020/06/unnamed-5.jpg)
お困りママ
XWRITEで使えるアイコンがどのようなものがあるか知りたいわ。
![](https://homemade365.com/wp-content/uploads/2023/02/image_6483441.jpg)
Rumi
XWRITEは、Font Awesomeのアイコンを採用しています。
XWRITEとは、エックスサーバーが開発!
初心者もカンタンにブログが書けるコンセプトのWordPressのテーマです。
XWRITEには、ポイントや注意点など、伝えたいことをパッと見やすくするアイコンの機能があります。
![](https://homemade365.com/wp-content/uploads/2023/02/image_6483441.jpg)
Rumi
記事の中にアイコンがあると、何を伝えたいのか直感的に理解しやすくなりますね。メールの絵文字のようなものだね。
XWRITEで選択できるアイコン一覧
WordPressの管理画面から使えるアイコン一覧をまとめました。
![](https://homemade365.com/wp-content/uploads/2023/02/image_6483441.jpg)
Rumi
WordPress上から221種類のアイコンをマウスで直接呼び出すことができます。(2023年8月現在)
管理画面の一覧にないアイコンを選ぶ方法
![](https://homemade365.com/wp-content/uploads/2020/06/unnamed-5.jpg)
お困りママ
上の一覧にないアイコンを選ぶことってできるの?音符のアイコンとかあれば使いたいな。
![](https://homemade365.com/wp-content/uploads/2023/02/image_6483441.jpg)
Rumi
Font Awesomeの公式サイトからアイコンのclass名を入力すると、使用することができます。
![](https://homemade365.com/wp-content/uploads/2023/08/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2023-08-08-070020-600x346.png)
Font Awesomeからお好きなアイコンを選択。
(※Proと書かれたものは、有料プランのアイコンになります。)
![](https://homemade365.com/wp-content/uploads/2023/08/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2023-08-08-070153-600x321.png)
クリックすると、このような画面になります。
下のコードの中にある緑の文字の部分「fa-solid fa-music」を使用します。
![](https://homemade365.com/wp-content/uploads/2023/08/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2023-08-08-071017-600x116.png)
アイコンのクラス名の部分に、緑の文字の「fa-solid fa-music」と入力すればOKです。
XWRITEでブログを書くときのアイコンの使い方
XWRITEには、さまざまなシーンでアイコンを使うことができます。
- ツールバーから直接アイコンを入れる
- ボックスやボタンにアイコンを入れる
- アイコンブロックを入れる
ツールバーから直接アイコンを入れる
![](https://homemade365.com/wp-content/uploads/2023/08/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2023-08-07-152912-600x193.png)
ツールバーから「アイコン」を選びます。
![](https://homemade365.com/wp-content/uploads/2023/08/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2023-08-07-152941-600x382.png)
一覧がズラッと表示されます。
使いたいものをクリックするか、アイコン名やclass名を入力するとアイコンが表示されます。
![](https://homemade365.com/wp-content/uploads/2023/02/image_6483441.jpg)
Rumi
class名は、先ほど言った「緑の文字」の部分です。
Font Awesomeの公式サイトから確認ができます。
ボックスやボタンにアイコンを入れる
![](https://homemade365.com/wp-content/uploads/2023/08/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2023-08-07-160145-600x221.png)
アイコン付きボックスやタイトル付きボックスを作るとき、お好きなアイコンをボックスに挿入できます。
タイトル付きボックスの場合、タイトルの文章の左端か右端にアイコンを配置することができます。
- ブロック挿入ツール>アイコン付きボックスまたはタイトル付きボックス>記事投稿画面 ブロック>アイコンタイプ
![](https://homemade365.com/wp-content/uploads/2023/08/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2023-08-07-161036-600x154.png)
ボタンを作るときも同様、文章の左端化右端にアイコンを挿入することができます。
- ブロック挿入ツール>XWRITEボタン>記事投稿画面 ブロック>アイコンタイプ
アイコンブロックを入れる
![](https://homemade365.com/wp-content/uploads/2023/08/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2023-08-07-163917-600x207.png)
アイコン単体で表示させたり、複数並べることができます。
アイコンは、リンク先を設定してボタンの役わりをすることができます。
アイコンの色や丸み、大きさ、枠線の太さや有無、余白の数値を変えるなどの変更も可能です。
- ブロック挿入ツール>XWRITE アイコン>記事投稿画面 ブロック>アイコン設定
まとめ
XWRITEで選べるアイコンについてまとめました。
221種類のアイコンをWordPress上から呼び出すことができます。
希望しているアイコンが見つからない場合、Font Awesomeから探してみましょう。
お好きなアイコンを見つけたら、クラス名を入力すれば解決です。
![](https://homemade365.com/wp-content/uploads/2023/02/image_6483441.jpg)
Rumi
食生活をテーマにしている当ブログは、 を使いたいな。
ブログのジャンルにあわせて、アイコンを探してみてくださいね。