- バージョンの関係？リストの形が変更できない？
- リストの点のマークって簡単に変更できないの？
- リストの点を消したい時もあるんだけど・・・
THE THORのリストへの不満は、この３つでした。
「装飾なんてきにしなくてもいい。大事なのは内容」って聞きますが、内容をこだわる方が私には難しいです(笑)
で、コードがどんな作りになっているか確認してみてびっくり。
THE THORのリストの点ってアイコンだったんです！
この記事では、THE THORの用意してあるリストの形状の種類と設定方法、そして記事後半では点の形を変えるカスタマイズ方法を紹介しています。
cssを使用しますが、私の使用している文を例にコピペ文と張り付け場所を紹介しますので初心者さんでも大丈夫！
なるべくコードを少なく、難しめのコードは使用しないようにしています。
目指せ「簡単ちょこっと装飾」です(笑)
使用しているバージョン
wordpress 5.6.1
THE THOR 2.2.2
THE THOR リストの設定場所
「外観」→「カスタマイズ」→「パーツスタイル設定」→「リスト設定（個別ページ用）」の順にクリックしていってください。
THE THOR 数字無しリストの種類紹介
THE THORには数字無しのリストのスタイルが８種類用意されています。
スタイルと色を選択すると、簡単におしゃれな数字無しリストが表示されます。
数字付きリストの背景が簡単に変更出来ちゃいます♪
私は基本のスタイルを選択しています。
全てのリストに同じ形状が適応されるのはイヤだなと思ったんです。
基本[カラーA：マーク ｂ：文字（デフォルト）]
背景[カラーA：マーク B：文字 C：背景]
ステッチ[カラーA：マーク B：線 C：背景]
ペーパー[カラーA：マーク B：文字 C：背景]
方眼紙[カラーA：マーク B：文字 C：背景]
方眼紙のマスの線の色はこの水色のみなので、背景は水色系になってしまいますね(;^_^A
線[カラーA：マーク B：線 C：背景]
点線[カラーA：マーク B：線 C：背景]
はみ出す線[カラーA：マーク B：線 C：背景]
THE THORのリストの点の形状を変更したい
クラシックエディタのリストをクリックすると、プルダウンが表示されます。
- 白丸
- 黒丸
- 四角
が、私の環境ではクリックしても変わりませんでした。
ブロックエディタの場合は、プルダウンもありませんでした。
しょうがないので、自力で変更することにしました。
これが変更できれば私的には満足だったのですが・・・
THE THORのコードをコピペする場所
「外観」→「カスタマイズ」→「追加CSS」の順にクリックしていってください。
THETHORリストの点を付箋のアイコンに変更するコピペ文
←このアイコンをリストの点に変更します。
.content ul> li:before{
content: “\e93e”;
/transform: scale(.7);
}
THE THORリストの点を付箋のアイコンに変更するコピペ文のコードの紹介
.content ul> li:before{
これはCSSの名前の部分です。
記事中のリストの点の部分を変更しますよ～と指示をしています。
content: “\e93e”;
「\e93e」がタグのアイコンのコードになります。
アイコン一覧に表示されている名前とは別になります。
transform: scale(.7);
これは拡大縮小の指示をしています。
THE THORは「scale(.6)」だったのをちょこっとだけ大きくしたかったので「7」にしました。
数字が大きくなれば拡大、マイナスをつければ縮小になります。
transform: scale(数字,数字);
カッコ内２つの数字で、大きさを変更できます。
前の数字が横幅、後ろの数字が縦幅に作用します
数字が１個の場合は、縦横幅です。
リストに使えるアイコンのコードの紹介
アイコン一覧にあるアイコンはすべて使用できます。
が、私にはリストの点に使用に向くかなぁと思ったアイコン３個のコードを紹介します。
「￥」マークが「\」と表示されていますが、どちらも同じ意味になりますので気にしないでください。
THE THORアイコン「ピン」のコード \e94f
THE THORアイコン「三角」のコード \ea1e
THE THORアイコン「チェック」のコード \ea12
リストの点を消したい時のコピペ文
.content ul.tenkesu > li:before {
content:””;
}
アイコンのコードを削除したコードを作成しておきます。
「tenkesu」という名前を付けてあります(笑)
リストの点を消したい時のｃｓｓの使い方
ブロックエディタの場合は、リストを選択して、「高度な設定」→「追加CSSクラス」に、tenkesu（CSS名）をコピペして使用します。
クラシックエディタの場合は「テキスト」タブをクリックして、編集したいリスト＜ul＞を探して後ろに「class=”tenkesu”」を追加します。
<ul class=”tenkesu”><li>白丸</li><li>黒丸</li><li>四角</li></ul>
コピペOK♪THE THORの数字無しリストの点をカスタマイズしてみた まとめ
リストの点の形状を変更するコピペ文(私が使用している）を紹介してみました。
このリストの点の部分の色は、THE THORで用意されているリストの種類の「A：マーク」で変更できます。
ランキングサイトに登録しているのでクリックしていただけると嬉しいです(^^♪
アフェリエイトの登録は無料です！
Amazonなどの物販に興味がある方は、アソシエイトの保険として「もしもアフェリエイト」からの申請もお勧めします。
A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。 ここもおすすめ♪アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/
