THE THOR ザ・トール リストのアイコンを変更

THE THOR の リストのアイコンを変更 を変更してみよう！

 

THE THOR とは？ 『ザ・トール レビュー』

 

リストは良く使うパーツです。リストとは次のようなもの。

 

• これが
• リストです。
• 良く使うでしょ？

 

リストのアイコンを変更する方法

 

追加cssを利用してリストのアイコンを変更します。

※カスタマイズは自己責任でお願いします。

 

---

 

ここではアイコンを以下のように変更しました。

 

---

 

追加するコードは以下の通り。

.content ul li::before{content:"\e9b9";}

 

 

出来ましたね！

 

 

アイコンの Unicode の調べ方

 

このカスタマイズではアイコンの Unicode が必要になります。

 

 

サンプルでは\e9b9というUnicodeのアイコンを使用しています。他のアイコンを使用する場合は別途Unicodeを調べる必要があります。Unicode はブラウザの検証で調べることが出来ます。

 

 

Unicodeの調べ方

※このUnicodeの調べ方はブラウザが10年くらい前のChromeでの場合です。最近のブラウザとは操作方法が多少異なります。

 

エディタ画面でアイコンオプションを表示させます。使いたいアイコンの辺りで右クリックで検証を選択。

 

 

するとアイコンのコードが表示されるのでbeforeを選択するとアイコンのUnicodeが表示されます。Unicodeをコピーすれば準備OK。

 

 

 

先ほどの追加cssのコードにコピーしたUnicodeを適用すればカスタマイズの完成です。

アイコンをカスタマイズ

 

変更したアイコンが少し小さいと思いませんか？

使うアイコンによってサイズ感が違うのでアイコンを少しカスタマイズします。

 

例では少し小さいと感じたのでアイコンを150%拡大して位置調整を行っています。これは使用するアイコンあわせて適時変更してください。

 

カスタマイズした完成形のcssは以下の通り。

.content ul li::before{
content:"\e9b9";
font-size: 150%;
top: -.3em;
}
.content ul li{
padding-left: 1.4em;
}

 

150%拡大。縦位置がずれたのでtop:-.3eｍ;で調整。アイコンが大きくなった分だけ文章左の余白padding-left:1.4em;を大きくする。

選んだアイコンにあわせ見た目が良くなるよう数値を変更してみてください。

 

[wpap service=”with” type=”detail” id=”4297107783″ title=”WordPressデザインレシピ集”]

 

あとがき

 

カラーは THE THOR の設定で変更しています。

 

初期設定のマークでは味気ないという場合はアイコンを変更してみましょう！