【Diver】サイドバーにアイコン付きリストを表示させる方法！

2019年6月30日 2019年7月2日 4分44秒

aki

サイドバーにアイコン付きのリストを表示させる方法を説明するよ！

１．はじめに

「Diver」は入力補助機能が付いているので投稿記事内であれば簡単にアイコンを表示させることが出来るようになっています。

ポップアップ画面で好きなアイコンを選択して挿入することが可能です。

今回は、下の画像の赤枠内のようにサイドバーのリストにアイコンを表示させる方法を説明します。

テキスト文字の前にアイコンを表示させます。

最新SEO対策済み!wordpressテーマ「Diver」の詳細はこちらから

２．アイコンの挿入方法

メニュー「外観」から「ウィジェット」をクリックしてください。

利用できるウィジェットから「テキスト」をクリックしてください。

「メインサイドバー」にチェックを入れて「ウィジェットを追加」をクリックします。

追加したテキストを編集していきます。

「タイトル」を入力してください。
「テキスト」入力に切り替えてください。
下のコードをコピーして貼り付けてください。
「保存」ボタンをクリックしてください。

<ul>
 	<li><a href="https://akiblog-affiliate.com/diver-rankingpage"><i class="fa fa-birthday-cake" aria-hidden="true"></i>ランキング作成</a></li>
 	<li><a href="https://akiblog-affiliate.com/diver-word-of-mouth"><i class="fa fa-comments-o" aria-hidden="true"></i>口コミ作成</a></li>
 	<li><a href="https://akiblog-affiliate.com/input-auxiliary-setting"><i class="fa fa-users" aria-hidden="true"></i>会話作成</a></li>
 	<li><a href="https://akiblog-affiliate.com/diver-qrcode"><i class="fa fa-qrcode" aria-hidden="true"></i>QRコード作成</a></li>
 	<li><a href="https://akiblog-affiliate.com/diver-listdesign"><i class="fa fa-list-ol" aria-hidden="true"></i>リストデザイン作成</a></li>
</ul>

このコード内の「URL」「テキスト」「アイコン」部分に関しては、自身のサイトに設置する際にコードの編集を行ってください。