WordPressのコメント欄はコメントが書かれてもそのコメントに番号がついていません。（WordPressテーマによってはカスタマイズによって番号をつけることができるかもしれませんが・・・私のお気に入りのルクセリタスはできません。）
ブログのテーマによってはコメント欄に番号がついていた方が良い、ということもあると思います。
これを番号（連番）付きにする方法を説明します。
CSSのコードの調べ方については、こちらの記事でも書いています。
今回は調べ方については省略しています。かなり頑張ってコードを調べてうまくいきましたのでコピペで完結します。
コメント欄のリストタイプをnoneからdecimalに変更する
基本的にワードプレスのコメント欄のリストタイプは、「none」になっています。これを「decimal」に変更することで、数字付きのリストタイプに変更されます。
仕組みは正直よくわかりません。
あとは、どのCSSのコードを変更すればいいのか？ひたすら検証モードから探します。そして、やっと見つけました。
まずはこのコードをルクセリタスの子テーマの編集からスタイルシートに追記しましょう。
.comments-list li {
list-style-type: decimal;
}
すると、パソコン版ではちゃんと番号付きで表示されています！
しかし、問題が発生します。
スマホ(iOS)では番号が表示されていない
なんと、自分のスマホで見ると番号が表示されていません。（ワードプレスでブログを作っている方はスマホでの表示も確認しておきましょう。）
これは、左端に切れていることが原因でした。
CSSの設定をいろいろいじってやっと解決方法がわかりました。
グリッド(枠)の設定を変更する
番号が左端（画面外）に出ているので、それを内側になるようにグリッドという項目の設定を変更しました。
スタイルシートに追記するコードは以下になります。
.grid {
padding-left: 25px;
padding-right: 20px;
}
このコードを追記することによってスマホでも番号がちゃんと表示されるようになります。
この「padding-left: 25px;」の25pxを好きな値にすれば大丈夫ですが、あまり大きくするとブログ全体が右によっておかしくなるので注意しましょう。
まとめ
まとめますと、ルクセリタスでコメント欄に番号をつけるには、スタイルシートに
.comments-list li {
list-style-type: decimal;
}
.grid {
padding-left: 25px;
padding-right: 20px;
}このコードを追記しましょう。スマホでも見れます。
以上になります。またわからないことがありましたら、お問い合わせからメッセージください。
コメント