賢威のコメント欄を階層化する方法

この記事は約1分で読めます。

  • LINEで送る

賢威コメント欄階層化

賢威の初期設定では、コメント欄の縦ラインが全て揃っていて、
返信されたコメントがどれなのかわかりづらくなっています。

ちなみに、この記事を書いている時点でWordPressに初期から入っている
テンプレート「Twenty Thirteen」では、返信コメントが階層化されます。
以下の様に返信コメントの先頭の左側に隙間ができます。

賢威コメント欄階層化

これを賢威で実現する方法を説明します。
CSSを修正しますが、至って簡単な修正です。

ディスカッション設定で階層化を選択する

賢威コメント欄階層化

まずは、「設定 > ディスカッション」を選択します。
その中で、「コメントを○階層までのスレッド (入れ子) 形式にする 」にチェックを入れ、
階層化した数字をプルダウンから選択します。1つ目のコメントを1階層目と数えます。

ここにチェックが入っていないと、そもそもコメントへ返信できません。
全て1階層目でコメントが入るので、コメントの返信を許可したい場合はここをチェックしましょう。

CSSでコメントの階層化

#main-contents .children li{
	margin-left: 1.0em!important;
}

この3行をcssに追加します。
追加するのは「外観 > テーマ編集」の「design.css」です。
どこでもいいので、こだわりがなければ1番下に追加しましょう。

賢威コメント欄階層化

更新するとこのように返信コメントが階層化されて表示されます。
画像では3階層までですが、設定した階層数によって変わります。

「1.0em」の数字を変更することで、隙間の幅を変更できるので、
あなたのWebサイト・ブログに合った数値に変更してください。

  • LINEで送る

コメントを残す

このページの先頭へ