WPBeginner - 初心者向けWordPressチュートリアル

最も必要とされている時に、信頼できるWordPressチュートリアルを。
WordPress入門ガイド
WPBカップ
2500万人以上
当社のプラグインを使用しているウェブサイト
16+
WordPress経験年数
3000+
専門家によるWordPressチュートリアル

WordPressのコメントレイアウトをスタイル設定する方法

編集スタッフ | | 読者開示

共有数 84 ChatGPT Perplexity X LinkedIn WhatsApp

最近、WordPressのコメントフォームのスタイリング方法をご紹介しましたが、WordPressのコメントレイアウトのスタイリングについて書かないのは不完全だと感じました。過去には、テーマデザイナーがテンプレートを簡単にスタイリングできるように、WordPressが生成するデフォルトのCSSクラスとIDについて議論してきました。この記事では、これらのデフォルトクラスを使用して、WordPressのコメントレイアウトのスタイリング方法と、それを使ってできるクールなことのいくつかをご紹介します。

この例では、この記事でデフォルトのTwenty Twelve WordPressテーマを修正します。注意：この記事は、HTMLとCSSをある程度理解しているテーマデザイナー初心者およびDIYユーザー向けです。

WordPressのデフォルトのコメントクラス

デフォルトでは、WordPressはコメントテンプレート内の要素に次のクラスを生成します：

/*Comment Output*/

.commentlist .reply {}
.commentlist .reply a {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}

.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {} 
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}

.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}
#cancel-comment-reply a {}
WPCodeによって愛情を込めてホストされています

WordPressで1クリックで使用

編集が必要なCSSクラスを見つける方法

WordPressのコメントレイアウトのスタイリングに進む前に、新規ユーザー向けのヒントをいくつかご紹介します。Google ChromeとMozilla Firefoxのウェブブラウザには、WordPressテーマ開発スキルを向上させるのに役立つ便利なツールが付属しています。このツールは要素を検証と呼ばれます。ウェブページ上の要素にマウスカーソルを合わせ、右クリックして「要素を検証」を選択するだけです。ブラウザウィンドウが2つの行に分割され、下のウィンドウにその要素のソースコードが表示されます。また、下のウィンドウでCSS要素とそのスタイルを確認できます。テスト目的でCSSを編集することも可能です。要素を検証を使用して行った変更は、あなたにのみ表示されることに注意してください。ページを更新すると、これらの変更は消えます。変更を永続的にするには、style.cssファイルまたはテーマ内のその他の適切なファイルを使用する必要があります。

Google Chromeで要素を検査してソースコードを確認し、一致するCSSルールをすばやく見つけます

コメントの奇数・偶数背景色を追加する

奇数と偶数のコメントで異なる背景色を使用することは、数年前からあるデザインのトレンドです。特にコメントが多い場合に、可読性が向上します。また、特定のテーマカラーと非常によく合うため、多くのデザイナーがこの機能を利用したいと考えています。デザイナーがこの目標を達成できるように、WordPressは各コメントにそれぞれ奇数クラスと偶数クラスを追加します。

テーマのstyle.cssに以下のコードを貼り付けることで、コメントの奇数/偶数スタイルを簡単に追加できます。

.commentlist .even .comment { 
background-color:#ccddf2; 
} 
.commentlist .odd .comment {
background-color:#CCCCCC;
}
WPCodeによって愛情を込めてホストされています

WordPressで1クリックで使用

結果は以下のようになります。

WordPressで偶数と奇数のコメントに交互の色を追加するためにCSSを使用する

コメント投稿者とメタ情報のスタイリング

WordPressは、各コメントヘッダーに表示される要素にもクラスを追加します。これにより、テーマデザイナーは、著者情報やコメントの日時などのその他のコメントメタの表示をカスタマイズできます。以下は、これらの要素を異なるスタイルで表示するために、テーマの style.css ファイルに貼り付けるサンプルコードです。この例では、コメントメタに背景色といくつかの余白を追加しました。

.comments-area article header {
	margin: 0 0 48px;
	overflow: hidden;
	position: relative;
	background-color:#55737D;
	color:#FFFFFF;
	padding: 10px;
}
WPCodeによって愛情を込めてホストされています

WordPressで1クリックで使用

このようになります：

WordPressコメントのコメントメタと作成者情報のスタイル設定

投稿者コメントのスタイリングを個別に設定する

多くの場合、投稿者のコメントは、異なる背景色または追加のバッジで強調表示されていることに気付くことがあります。WordPressは、投稿者のコメントすべてにデフォルトのクラスbypostauthorを追加します。WordPressのテーマデザイナーは、このクラスを使用して投稿者のコメントを異なる方法でスタイリングできます。

一部のテーマでは、コメントを表示するために独自のコールバック関数を使用しています。コールバック関数を使用することで、これらのテーマは投稿者によるコメントに追加情報を追加する場合があります。たとえば、Twenty Twelveでは、コメントコールバック関数twentytwelve_comment()（テーマのfunctions.phpファイルにあります）で次の行を使用しています。

// If current post author is also comment author, make it known visually.

( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Post author', 'twentytwelve' ) . '</span>' : '' );
WPCodeによって愛情を込めてホストされています

WordPressで1クリックで使用

このコードは、投稿者のコメントメタ情報に<span>Post Author</span>を追加します。WordPressテーマが投稿者のコメントをどのように処理するかによって、これを好きなように変更できます。

Twenty Twelve以外のテーマを使用している場合は、テーマがコメントをどのように処理するかを調べる必要があります。テーマのcomments.phpファイルを開くだけです。テーマが独自のコールバック関数を使用している場合、wp_list_comments関数内で次のように表示されます。

<?php wp_list_comments( array( 'callback' => 'twentytwelve_comment', 'style' => 'ol' ) ); ?>
WPCodeによって愛情を込めてホストされています

WordPressで1クリックで使用

上記の例では、テーマがコールバック関数として twentytwelve_comment を使用していることがわかります。コールバック関数が指定されている場合、この関数を見つける最も可能性の高い場所は、テーマの functions.php ファイルです。

この例では、投稿者の代わりにエディターを表示するようにこの関数を変更しています。そのために、コメントコールバック関数を次のように変更しました。

// If current post author is also comment author, make it known visually.

( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Editor', 'twentytwelve' ) . '</span>' : '');
WPCodeによって愛情を込めてホストされています

WordPressで1クリックで使用

また、テーマの style.css ファイルに以下を追加して、見た目を変更します。

li.bypostauthor cite span {
	color: #21759b;
	background-color: #f8f0cb;
	background-image: none;
	border: 1px solid #f8f0cb;
	border-radius: 3px;
	box-shadow: none;
	padding: 3px;
	font-weight:bold;
}
WPCodeによって愛情を込めてホストされています

WordPressで1クリックで使用

このようになります：

WordPress のコメントで著者コメントを異なるスタイルにする

WordPressコメントのコメント返信リンクのスタイル設定

ほとんどのWordPressテーマでは、各コメントの下に返信リンクがあります。この機能は、スレッドコメントが有効になっている場合にのみ表示されます。スレッドコメントを有効にするには、WordPress管理画面の [設定 » ディスカッション] に移動します。その他のコメント設定のセクションを探し、「スレッド（ネスト）コメントを有効にする」のチェックボックスをオンにします。

WordPressが返信リンクに対して生成するデフォルトのCSSクラスはreplyおよびcomment-reply-linkです。これらのクラスを使用して返信リンクを変更し、CSSボタンに変換します。

.reply { 
	float:right;
	margin:0 10px 10px 0;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}

.comment article {
	padding-bottom:2.79rem;
}

a.comment-reply-link,
a.comment-edit-link {
	color: #FFFFFF;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	text-decoration:none;
}

a.comment-reply-link:hover,
a.comment-edit-link:hover {
	color: #f6e7d7;
}
WPCodeによって愛情を込めてホストされています

WordPressで1クリックで使用

このようになります：

CSSを使用してWordPressコメントのコメント返信ボタンをスタイル設定する

コメント編集ボタンのスタイル設定

ほとんどのWordPressテーマでは、コメントを編集する権限を持つログインユーザーは、各コメントの下にコメント編集リンクを表示できます。ここでは、リンクの外観を変更するために、デフォルトのクラスcomment-edit-linkを使用する簡単なCSSを紹介します。

a.comment-edit-link {
	float:left;
	margin:0 0 10px 10px;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}
WPCodeによって愛情を込めてホストされています

WordPressで1クリックで使用

このようになります。

CSSを使用してWordPressコメントのコメント編集リンクをスタイル設定する

コメント返信リンクのスタイル設定をキャンセル

ほとんどの優れたWordPressテーマでは、「返信」リンクをクリックすると、返信先のコメントのすぐ下にコメントフォームが表示され、「コメント返信をキャンセル」リンクが表示されます。この「コメント返信をキャンセル」リンクを、デフォルトのCSS ID cancel-comment-reply を使用して変更しましょう。

#cancel-comment-reply-link  { 
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	color:#FFFFFF;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
	text-decoration:none;
}
WPCodeによって愛情を込めてホストされています

WordPressで1クリックで使用

このようになります。

WordPressコメント返信フォームのキャンセルコメント返信リンクのスタイル設定

WordPressコメントフォームのスタイル設定

使いやすく、美しく、スタイリッシュなコメントフォームは、ユーザーがブログにコメントを残すことを奨励します。以前、WordPressのコメントフォームのスタイリング方法について詳細な記事を書きました。WordPressのコメントフォームを次のレベルに引き上げる方法を確認するために、ぜひチェックしてみてください。

この記事がWordPressコメントのレイアウトをスタイル設定するのに役立つことを願っています。ご質問やご提案がありましたら、お気軽に下記のコメント欄でお知らせください。

WPBeginnerで現在人気があります！

開示: 当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPBeginnerがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかを確認してください。こちらが当社の編集プロセスです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです！

今すぐダウンロード

読者とのインタラクション

40件のコメント返信する

    • この記事のコードはCSSコードです。サイトに適用するには、[外観] > [カスタマイズ] > [追加CSS] の下に追加してください。

      返信する

      管理者

  3. コメントへの返信が、実際のコメントのすぐ下に直線で表示されるサイトを持っています。ここに表示されているような、コメントへの返信のための小さなオフセットをどのように設定できますか？

    返信する

  4. 2018年です！

    WordPressのコメントをスタイル設定する最も簡単な方法は、これがまだ最も簡単な方法ですか？

    この記事は5年前に書かれました。Googleで検索しました。WordPressのコメントシステムは初心者向けではなく、カスタマイズが難しく、まったく進化していないようです。がっかりです！

    返信する

  5. 素晴らしいチュートリアルです！
    しかし、コメントを並べて表示するにはどうすればよいですか？（「賛成」と「反対」のような）単一の投稿に対する議論のようなものです。また、その下に2つの異なるコメントフォームが必要になりますか？

    返信する

  6. こんにちは、

    コメントエリアのハイパーリンクをどのようにスタイル設定できますか？コメントボックスのハイパーリンクの色を変更したいです。

    ありがとうございます。

    マイク

    返信する

  8. WPBeginner様、

    素晴らしい投稿です！読みましたが、まだ「返信」ボタンとGravatarを表示するために何をすべきか理解できません。

    テーマがこの情報を表示しているかどうかはわかりませんが、管理パネルの「表示設定」セクションでアバターを有効にしています。

    コメントの.phpファイルにコードを少し追加できると思いましたが、手動で変更を加える場所が見つかりません。コメントを取得するコードの部分は次のようになります。

    ~~~~

    最近のコメント

    ‘comment’, ‘callback’ => ‘crawford_comment’)); ?>

    ~~~~

    私が見ている場所が間違っていますか？おそらくそうですが、どこを確認すればよいかわかりません。

    参考までに、コメントのあるページはこちらです：
    どんなアドバイスでも歓迎します！

    返信する

    • comments.php テンプレートは、コールバック関数を探すように指示しています。このコールバックは、テーマの functions.php ファイルで定義されています。ここでコメントのレイアウトを編集します。

      返信する

      管理者

  9. Gensis 2.0についても同じ手順を教えていただけますか？上記の手順に従いましたが、コメントレイアウトの背景色を変更する方法がまだわかりません。Genesis Sampleテーマを使用しています。

    ウェブサイトは開発中であり、まだ公開できませんが、以下のDropboxリンクでコメントボックスが白くなっている様子を確認できます。上記のすべてのトリックを使っても、背景色を変更する方法を見つけることができませんでした。

    背景を白ではなく #333333 にしたいと考えていました。

    皆さんの大変な努力に心から感謝いたします。

    返信する

  10. WPbeginner様、カスタムコメントフォームを作成したいのですが、どうやって作成すればよいか全く分かりません。

    すみません、私の英語は下手です

    返信する

  11. このチュートリアルに従いましたが、質問が1つだけあります。

    返信ボックスを返信先の投稿の下にネスト表示させるにはどうすればよいですか？

    返信する

    • この質問にも追加します。テンプレートはありますが、サイトの管理者からネストされたコメントを表示できません。

      どうか助けてください。

      返信する

  13. わあ、これらのヒントはすべてとても役に立ちました！素晴らしい投稿をありがとうございます！

    コメントで、投稿者でなくても、すべての管理者の名前の横にテキストを追加するにはどうすればよいか、今気になっていますか？

    おそらくここにあると思いますが、何を変更する必要があるかはわかりません：
    「( $comment->user_id === $post->post_author )」

    ありがとうございます!!

    返信する

  15. デフォルトのWordPressコメントクラスの44行目に注意してください。


    .commentlist li ul.children li.depth-{id} {}

    は有効なCSSセレクターではありません。{id} は適切なID（整数）に置き換える必要があります。

    返信する

  16. .commentlist .reply {}
    .commentlist .reply a {}

    あなたの例にある「-」はどこにありますか？（「デフォルトのWordPressコメントクラス」）

    なぜならそれは : .comment-list だからです

    返信する

    • hellobassさん、実際には .commentlist または .comment-list はWordPressによって生成されるものではなく、テーマが独自に選択します。例えば、Twenty Twelveは .commentlist を使用し、Twenty Thirteenは .comment-list を使用します。お使いのテーマがどのクラスを使用しているかは、comments.php を確認するか、Chromeの開発者ツール（要素を検証）で確認できます。

      返信する

      管理者

  18. ありがとうございます！とても参考になりました！

    スレッド内（子コメントを区別するため）にのみ奇数・偶数スタイルを適用するにはどうすればよいですか？読者が同じスレッド内のコメントを簡単に区別し、簡単に追跡できるようにしたいです。

    ありがとうございます！

    返信する

  19. WordPressで非常に深いネストされたコメントをスタイル設定するコツはありますか？
    ：D 5段階もネストされたコメントをスタイル設定していたなんて、正気ではなかったに違いない。
    再利用可能なCSSコードがあれば、さまざまなプロジェクトで役立ち、多くの時間を節約できるだろう。しかし、レイアウトの幅が異なると、この再利用可能なスタイリングの設定に時間がかかることがよくある。

    この記事を共有していただきありがとうございます。さらに勉強するためにブックマークしました ;)

    返信する

  21. これは非常に迷惑です。このうち半分も機能させることができません。
    奇数と偶数の色は、ネストされたコメントにのみ適用されます。
    コメント作成者とメタ情報をまったくスタイル設定できません。
    これを修正するのを手伝ってください。

    返信する

  22. 素晴らしい投稿です！ありがとうございます。

    コメントフォームの下にある「後続のコメントをメールで通知する」と「購読する…」のボックスをどのように追加したか教えていただけますか？

    乾杯
    rolanstein

    返信する

  23. 素晴らしいチュートリアルです！
    番号付きリストを削除するにはどうしましたか？私のコメントの前に常に番号が表示され、それが本当に好きではありません。

    ありがとうございます！

    返信する

返信する

コメントいただきありがとうございます。すべてのコメントは、コメントポリシーに従ってモデレーションされ、メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で意味のある会話をしましょう。

Copyright © 2009 - 2026 WPBeginner LLC. All Rights Reserved. WPBeginner® は登録商標です。

管理元：Awesome Motive | SiteGroundによるWordPressホスティング

WordPress® の商標は WordPress Foundation の知的財産です。このウェブサイトでの WordPress® およびその名称の使用は、識別目的のみであり、WordPress Foundation による承認を意味するものではありません。WPBeginner は WordPress Foundation によって承認、所有、または提携されていません。

私は…について助けが必要です

人気の検索:

ブログの始め方 WordPress SEO WordPressのパフォーマンス WordPressのエラー WordPressセキュリティ オンラインストアの構築