WP投稿下のコメントのCSS修正に困っています

サポート WordPress
1

WordPress の Discourse プラグインをフォーラムに接続しましたが、投稿下部のコメントの見た目があまり良くありません。

例:

image
image1068×846 106 KB

コメントがまともに見えるように CSS を適切に修正する方法についてのアドバイスがあれば、ぜひ教えてください！

2

これはどうでしょうか？

.discourse-comments-area {
    padding-top: 15px;
}
.discourse-comments-title {
    font-size: 2em;
}
.comment {
    padding-top: 30px;
    min-height: 70px;
}
.comment-body {
    display: flex;
}
.comment-meta {
    display: flex;
    position: absolute;
    width: 100%;
    
}
.comment-metadata {
    margin-left: 5px;
    margin-top: 2px;
    color: #aaa;
    &:before {
        content: "/";
    }
}
.comment-author {
    display: flex;
    .fn {
        font-size: 1.4em;
        margin-left: 15px;
    }
}
.comment-content {    
    margin-left: 79px;
    margin-top: 30px;
    font-size: 1.15em;
    line-height: 1.5;
}

image
image1147×943 246 KB

3

代替案:

.discourse-comments-area {
    padding-top: 15px;
}
.discourse-comments-title {
    font-size: 2em;
}
.comment {
    padding-top: 20px;
    min-height: 70px;
}
.comment-body {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}
.comment-meta {
    display: flex;
    //position: absolute;
    align-items: center;
    width: 100%;
    
}
.comment-metadata {
    margin-left: 5px;
    margin-top: 2px;
    color: #aaa;
    &:before {
        content: "/";
    }
}
.comment-author {
    display: flex;
    align-items: center;
    .avatar {
        width: 40px;
        height: 40px;
    }
    .fn {
        font-size: 1.4em;
        margin-left: 15px;
    }
}
.comment-content {
    margin-top: 15px;
    font-size: 1.15em;
    line-height: 1.5;
}

image
image1152×1034 245 KB

4

素晴らしいですね。ありがとうございます！1 つ目の例の方が好みです。

アバターとユーザー名の間の間隔、およびコメントの下に表示される要素の修正が必要です。

image
image1201×1004 162 KB

また、コメントの下に「議論を続ける」へのリンクが表示されない理由がわかりません。

5

あなたのケースでは Discourse を使用していないことを忘れていました。私のコードは CSS ではなく SCSS を使用していたため、いくつかの部分が動作しなかったのです。

以下はコンパイル済みの CSS です：

.discourse-comments-area {
	 padding-top: 15px;
}
 .discourse-comments-title {
	 font-size: 2em;
}
 .comment {
	 padding-top: 30px;
	 min-height: 70px;
}
 .comment-body {
	 display: flex;
}
 .comment-meta {
	 display: flex;
	 position: absolute;
	 width: 100%;
}
 .comment-metadata {
	 margin-left: 5px;
	 margin-top: 2px;
	 color: #aaa;
}
 .comment-metadata:before {
	 content: "/";
}
 .comment-author {
	 display: flex;
}
 .comment-author .fn {
	 font-size: 1.4em;
	 margin-left: 15px;
}
 .comment-content {
	 margin-left: 79px;
	 margin-top: 30px;
	 font-size: 1.15em;
	 line-height: 1.5;
}

下部のアバターについては、以下のように設定できます：

#comments .comment-reply-title .avatar {
    display: inline-block;
    margin-right: 10px;
    margin-top: 15px;
}

image
おそらく上記の 2 行を少し大きくする必要があると思いますが、ブラウザの開発者ツールを使って適切な HTML クラスを見つけることで、ご自身で調整することも可能です。

WP-Discourse の設定を確認する必要があるかもしれません。