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

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

 

 

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

 

 

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

 

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

 

 

 

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

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

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

 


 

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

THR THOR リストのアイコンを変更

 


 

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

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

 

 

出来ましたね!

 

 

アイコンの Unicode の調べ方

 

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

 

 

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

 

 

Unicodeの調べ方

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

 

 

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

 

アイコン Unicode 一覧

 

 

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

 

THE THOR アイコン Unicode

 

 

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

 

 

アイコンをカスタマイズ

 

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

 

 

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

 

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

 

 

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

 

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

 

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

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

 

 

WordPressデザインレシピ集

WordPressデザインレシピ集

狩野 祐東
3,002円(11/18 10:31時点)
発売日: 2019/08/24
Amazonの情報を掲載しています

 

あとがき

 

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

 

操作手順
外観 → カスタマイズ → パーツスタイル設定[THE] → リスト設定[個別ページ用]

 

 

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

 

リストのアイコンを変更
呟くのよ・・・私の棒ストが