ブログカスタマイズの雑談BLOG

記事ページの一番下に「コメント欄」があります。
何もコメントが無い場合の「コメント欄」には、前回の記事＜■記事ページのコメント欄に上余白を設定し、「コメントを書く」ボタンを作る＞で作った「コメントを書く」ボタンしか表示されていません。


もらったコメントがある場合のみ、「コメント欄」タイトルの下に各コメントが表示されることになりますので、試しに、自分で自分のブログにコメント投稿してみました。



デフォルトの場合



ちょっと両端ともギリギリに表示されすぎかな？と思いますので、編集したいと思います。
日付部分も色が薄くてよくわかりませんしねぇ。



編集後のイメージ



コメント1つ1つを点線で囲むようにしました。
私のブログは何でもかんでも点線で囲むようになってしまいましたねｗ
まあ、日付部分も文字色を変更したし、ちょっとだけ目立つようになったと思います。

記事ページのコメント表示部分を編集する

CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「.module--comments .comments__item」というclassを探します。
このclass関連が、コメント欄のコメント表示部分に対する記述です。



「.module--comments .comments__item」から「.module--comments .comments__meta」の間に、下記の「編集後」のコードをコピペもしくは直接記述して、変更内容を「保存」します。
説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。


＜元コード＞


＜編集後＞


●コメントアウトで見出しを付けています。
●コメント1つ1つを点線で囲んで、余白を設定しました。
●行間を1.5emに設定しました。（元は「body」の設定が効いていて1.8emになっていたと思われます）
●名前をちょっと大きめの太字で表示するようにしました。

コード編集後のCSSと実際のページ

次の記事の紹介

コメント欄の表示を設定したので、次の記事からは「コメントを書く」をクリックして開く「コメント記入ページ」を編集したいと思います。