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

  1. バージョンの関係?リストの数字の形が変更できない?
  2. リストの数字って簡単に変更できないの?
  3. リストの数字って1からしか出来ないの?

THE THORの数字付リストへの不満は、この3つでした。

数字無しリストへの不満とほぼ同じです(笑)

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

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

使用しているバージョン

wordpress 5.6.1
THE THOR 2.2.2

色々試してみましたが、自分で決めた数字からリストを開始するという方法はまだ見つけていません( ̄▽ ̄;)
THE THORは、リストの数字を非表示にして「counter」の数字を使用しているので「stert=”開始文字”」は使用できませんでした。

THE THOR リストの設定場所

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

CSSの名前は自分がわかりやすい名前に変更して使用してください。

THE THOR 数字付リストの種類紹介

THE THORには数字無しのリストのスタイルが8種類用意されています。
スタイルと色を選択すると、簡単におしゃれな数字無しリストが表示されます。
用意されているスタイルは、数字無しリストと同じになります。
どんな感じか見たい方は、下のリンクの記事で紹介していますので参考にしてください。

コピペOK♪THE 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;

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

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

.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」に「css名」を張り付けてください。

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


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

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

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

ワードプレスのバージョンを上げる前は、リストを多用しなかったので今と昔を比べることは残念ながら出来ません。
バージョンが低い時はリストの数字は変更できたのかなぁ??
まあ、自力で変更できるので構わないと言えば構わないのですが(;^ω^)
THE THORさんのこれからに期待してます!


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

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

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

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

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

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

在宅でちょこっと収入~♪

クラウドソーシング「ランサーズ」会員募集 (無料)

私は今の所、アンケートだけしています( ̄▽ ̄;)
アンケートに答えて5円とか11円とかから、100文字位の感想を書いて数百円とか。
アフィリエイトより小銭がたまりそうです(笑)

クラウドソーシング「ランサーズ」
最新情報をチェックしよう!
>

そら

プログラマーとして働いていたが結婚後を機に田舎に戻り、独学でHTML・Perlを勉強し自宅でWEBの仕事をはじめるも、アレルギー児の子育てで断念。 子供の手が離れたのを機にWorldpressの勉強をしながらブログをはじめました。

 そらのまなびぶろぐ について 


そらのまなびぶろぐでは、wordpressの有料テーマ【THE THOR(ザ・トール)】を使用して収益化ブログの作り方を初心者向けに紹介しています。 エディタの使い方、アドセンス申請に必要なページの書き方&作り方、ブログの装飾の方法までを紹介しています。