割引特典あります→詳細はこちら

【朗報】なんとtool +がWordPress対応になり、ワンタッチ投稿できるようになりました!(3/10)

WordPressテーマ「Luxeritas(ルクセリタス)」でコメント欄に番号をつける方法

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;
}

このコードを追記しましょう。スマホでも見れます。

以上になります。またわからないことがありましたら、お問い合わせからメッセージください。

割引特典あります→詳細はこちら