コピペOK♪THE THORのリストをカスタマイズしてみた

• リストの形が変更できない？
• リストのマークって簡単に変更できないの？
• リストの点や数字を消したい時もあるんだけど・・・

THE THORのリストへの不満は、この３つでした。

で、コードがどんな作りになっているか確認してみてびっくり。
THE　THORのリストの点ってアイコンだったんです！

この記事では、THE THORの用意してあるリストの形状の種類と設定方法、そして記事後半では点の形を変えるカスタマイズ方法を紹介しています。

cssを使用しますが、私の使用している文を例にコピペ文と張り付け場所を紹介しますので初心者さんでも大丈夫！
なるべくコードを少なく、難しめのコードは使用しないようにしています。
目指せ「簡単ちょこっと装飾」です(笑)

使用しているバージョン

wordpress　5.8.1
THE THOR　2.3.4

THE THOR リストの設定場所

「外観」→「カスタマイズ」→「パーツスタイル設定」→「リスト設定（個別ページ用）」の順にクリックしていってください。

＜ PR ＞

THE THOR リストの種類紹介

THE　THORにはリストのスタイルが８種類用意されています。
スタイルと色を選択すると、簡単におしゃれなリストが表示されます。
番号無しリスト、番号付きリストそれぞれの背景を簡単に設定出来ちゃいます♪

私は基本のスタイルを選択しています。

基本[カラーA：マーク　ｂ：文字（デフォルト）]

背景[カラーA：マーク　B：文字　C：背景]

＜ PR ＞

ステッチ[カラー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>

THORの番号付リストの数字をカスタマイズしてみた

デフォルトでは①のように〇で囲った数字になっていると思います。
この番号をカスタマイズしていきます。
コードをコピペする場所は上記で紹介済みなので省略します。

数字だけのリストにしたい場合のコード

.content ol.maru_nasi>li:before {
content: counter(number) ” .”;
background:none;
border: none;
padding-top: 0.6rem;
}

数字だけのリストにしたい場合のコードの説明

.content ol.maru_nasi>li:before {

番号付リストのマークの部分に使用する「maru_nasi」というCSS名だよ、と指定しています。

content: counter(number)” .”;

数字の後ろに、「　.　」を付けて、と指定しています。

background:none;

数字の後ろに背景付け無しにして、と指定しています。

border: none;

数字に枠線はいらない、と指定しています。

padding-top: 0.6rem;

これは数字の上の空間の大きさを指定しています。

０付きの数字のリストにしたい場合のコード

.content ol.zero>li:before {
content: counter(number,decimal-leading-zero) ” .”;
background: none;
border: none;
padding-top: 0.6rem;
}

.content ol.zero>li:before {

数字付リストのマークの部分に使用する「zero」というCSS名だよ、と指定しています。

content: counter(number,decimal-leading-zero) ” .”;

頭に「0」を付けた数字（decimal-leading-zero）を使用してね、そして数字の後ろに、「　.　」を付けてと指定しています。

小文字のローマ数字リストにしたい場合のコード

.content ol.ro_majikomoji>li:before {
content: counter(number,lower-roman) ” .”;
background: none;
border: none;
padding-top: 0.6rem;
}

小文字のローマ数字リストにしたい場合のコードの説明

.content ol.ro_majikomoji>li:before {

数字付リストのマークの部分に使用する「ro_majikomoji」というCSS名だよ、と指定しています。

content: counter(number,lower-roman) ” .”;

小文字のローマ数字（lower-alpha）を使用してね、そして数字の後ろに、「　.　」を付けてと指定しています。

大文字のローマ数字リストにしたい場合のコード

.content ol.ro_majioomoji>li:before {
content: counter(number,upper-roman) ” .”;
background: none;
border: none;
padding-top: 0.6rem;
}

大文字のローマ数字リストにしたい場合のコードの説明

.content ol.ro_majioomoji>li:before {

数字付リストのマークの部分に使用する「ro_majioomoji」というCSS名だよ、と指定しています。

content: counter(number,upper-roman) ” .”;

大文字のローマ数字（upper-roman）を使用してね、そして数字の後ろに、「　.　」を付けてと指定しています。

数字付リストの数字を変更するコードの使用方法

• 全てのリストの数字を変更する
• 使用したいリストの数字だけ変更する

全てのリストの数字を変更する

「外観」→「カスタマイズ」→「追加CSS」の順にクリックしていってください。

.content ol.maru_nasi>li:before {

使用したいコードの、この赤い部分（CSSの名前）を削除して「追加CSS」に張り付けてください。

使用したいリストの数字だけ変更する

コピペ文をそのまま「追加CSS」に追加して使用します。

リストブロックを選択した状態で、画面右側の「高度な設定」をリックしてください。
「追加CSS」に「ｃｓｓ名」を張り付けてください。

クラシックエディタを使用している場合

画面右上付近にある「テキストタブ」をクリックしてください。

リストの数字を変更したい場所の　<ol>　を見つけたら後ろに「class=”CSS名”」を追加してください。

コピペOK♪THE THORリストをカスタマイズしてみた　まとめ

リストの点の形状を変更するコピペ文(私が使用している）を紹介してみました。
このリストの点の部分の色は、THE THORで用意されているリストの種類の「A：マーク」で変更できます。

下の記事も興味があればどうぞ♪

ランキングサイトに登録しているのでクリックしていただけると嬉しいです(^^♪

アフェリエイトの登録は無料です！

Amazonなどの物販に興味がある方は、アソシエイトの保険として「もしもアフェリエイト」からの申請もお勧めします。

A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。 ここもおすすめ♪アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/