WordPressは、ほとんどのテーマでさまざまな要素に独自のCSSクラスを追加します。これらのデフォルトのクラスは、サイトのさまざまな部分を自動的にスタイル設定するのに役立ちます。
これらのデフォルトの CSS クラスを知っていると、非常に役立ちます。ゼロから始めることなく、サイトの外観を簡単にカスタマイズできます。
例えば、サイトでCSSを使い始めたところ、ブログコンテンツを際立たせるためのスタイル設定がずっと簡単になりました。
この記事では、これらのデフォルトのWordPress生成CSSクラスのチートシートを見つけます。また、より多くのCSSクラスを見つけて、必要に応じて独自のクラスを追加する方法も紹介します。

デフォルトのWordPress生成CSSについて学ぶ理由
WordPressは、WordPressウェブサイトのさまざまな要素にデフォルトのCSSクラスを自動的に生成して追加します。
テーマ開発者は、これらのデフォルトのCSSクラスを使用して、コンテンツエリア、サイドバー、ウィジェット、ナビゲーションメニューなど、WordPressサイトの一般的な領域をスタイル設定できます。
そのため、これらのCSSクラスを知っておくと、WordPressテーマ開発を学んでいる場合や、単に自分のウェブサイト用の子テーマを作成しようとしている場合に役立ちます。
また、テーマを自分で作成することなく、カスタムCSSを追加することで、WordPressテーマの特定の要素をすばやくスタイル設定できます。
注意: テーマのスタイルを変更したり、カスタムテーマを作成したりするために CSS を学ぶ必要はありません。コーディングを学びたくない場合は、SeedProd のようなドラッグ&ドロップビルダーを使用できます。記事の後半で詳しく説明します。
次のセクションでは、WordPressがデフォルトで生成するCSSクラスを共有します。この記事で取り上げるすべての内容の簡単な概要を以下に示します。
- デフォルトの本文クラスのスタイル
- デフォルトの投稿スタイルクラス
- デフォルトのナビゲーションメニューのクラス
- デフォルトのWordPressウィジェットクラス
- デフォルトのコメントフォームクラス
- WordPressブロッククラスの検索
- WordPressに独自のカスタムCSSクラスを追加する
- ボーナス:CSSコードを書かずにWordPressテーマを簡単にデザインする方法
前置きはさておき、WordPressサイトを思い通りに見せる方法を学びましょう!
デフォルトの本文クラスのスタイル
HTML では、 <body> タグは任意のウェブページのレイアウト構造を含んでおり、WordPress テーマのデザインにおいて非常に重要です。
WordPressは、bodyタグにいくつかのCSSクラスを追加します。テーマデザイナーはこれらのクラスを使用して、bodyコンテナを効果的にスタイル設定できます。
// Added when a website is using a right-to-left language e.g. Arabic, Hebrew
.rtl {}
// Added when home page is being displayed
.home {}
// Added when blog page is being displayed
.blog {}
// Added when an Archive page is being displayed
.archive {}
// Added when a date based archive is displayed
.date {}
// Added on search pages
.search {}
// Added when pagination is enabled
.paged {}
// Added when an attachment page is displayed
.attachment {}
// Added when a 404 error page is displayed
.error404 {}
// Added when a single post is dispayed includes post ID
.single postid-(id) {}
// Added when a single attachment is displayed. Includes attachment ID
.attachmentid-(id) {}
// Added when a single attachment is displayed. Includes attachment mime-type
.attachment-(mime-type) {}
// Added when an author page is displayed
.author {}
// Added when an author page is displayed. Includes author name.
.author-(user_nicename) {}
// Added when a category page is displayed
.category {}
//Added when a category page is displayed. Includes category slug.
.category-(slug) {}
// Added when a tag page is displayed.
.tag {}
// Added when a tag page is displayed. Includes tag slug.
.tag-(slug) {}
// Added when a parent page is displayed.
.page-parent {}
// Added when a child page is displayed. Includes parent page ID.
.page-child parent-pageid-(id) {}
// Added when a page is displayed using page template. Includes page template file name.
.page-template page-template-(template file name) {}
// Added when search results are displayed.
.search-results {}
// Added when search returns no results.
.search-no-results {}
// Added when a logged in user is detected.
.logged-in {}
// Added when a paginated page is displayed. Includes page number.
.paged-(page number) {}
// Added when a paginated single item is displayed. Includes page number.
.single-paged-(page number) {}
// Added when a paged page type is displayed. Includes page number.
.page-paged-(page number) {}
// Added when a paged category page is displayed. Includes page number.
.category-paged-(page number) {}
// Added when a paged tag page is displayed. Includes page number.
.tag-paged-(page number) {}
//Added when a paged date based archive page is displayed. Includes page number.
.date-paged-(page number) {}
// Added when a paged author page is displayed. Includes page number.
.author-paged-(page number) {}
// Added when a paaged search page is displayed. Includes page number.
.search-paged-(page number) {}
これらのクラスには、CSSスタイルでターゲットにできるさまざまな条件が含まれていることがわかります。
たとえば、「ニュース」カテゴリページに異なる背景色を付けたい場合は、次のカスタムCSSを追加できます。
.category-news {
background-color:#f7f7f7;
}
専門家のアドバイス: WordPressにCSSやコードスニペットを簡単に追加する方法をお探しですか?無料のWPCodeプラグインを試して、コードスニペットを将来性のあるものにしましょう。
デフォルトの投稿スタイルクラス
body要素と同様に、WordPressは投稿要素にも動的なクラスを追加します。
この要素は通常、テーマテンプレートの<article>タグです。ただし、WordPressテーマによっては、他のタグである可能性もあります。post-CSSクラスは、post_class()テンプレートタグを追加することでテーマに表示されます。
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
post_class()関数によって生成される最も一般的なCSSクラスのリストを以下に示します。
// Adds a class with ID for single items
.post-(ID) {}
// Generic post claass added for single blog posts.
.post {}
// Generic page class added when a single page is displayed.
.page {}
// Generic attachment class added to attachment pages.
.attachment {}
// Adds a post type class e.g. type-post
.type(post-type){}
// Adds a class for post format if theme supports posts formats. E.g. format-standard
.format-(post-format){}
// Added when an item has a featured image
.has-post-thumbnail{}
// Added when a sticky post is displayed
.sticky {}
// Generic class to display an entry
.hentry {}
// Classes with categories assigned to a post. E.g. category-news category-movies
.category-(slug) {}
// Classes with tags assigned to a post. e.g. tag-photofriday tag-tgif
.tag-(slug) {}
投稿クラスを使用すると、さまざまな条件に一致するブログ投稿やページをスタイル設定できます。たとえば、次のカスタムCSSを使用して、特定のカテゴリに分類されたブログ投稿を異なる方法でスタイル設定できます。
.category-news {
background-color:#EFEFEF;
}

WordPressダッシュボードにCSSエディターが表示されない場合は、WordPress管理画面からテーマカスタマイザーが消えた場合の対処法に関するチュートリアルに従ってください。
デフォルトのナビゲーションメニューのクラス
WordPress は、ナビゲーションメニューにもCSSクラスを追加します。以下は、ナビゲーションメニューに追加されるデフォルトのクラスです。
// Class for Current Page
.current_page_item{}
// Class for Current Category
.current-cat{}
// Class for any other current Menu Item
.current-menu-item{}
// Class for a taxonomies
.menu-item-type-(taxonomy){}
// class to distinguish post types.
.menu-item-type-(post_type){}
// Class for any custom item that you added
.menu-item-type-custom{}
// Class for the Home Link
.menu-item-home{}
WordPressテーマは、各ナビゲーションメニューの場所にCSSクラスを追加します。
例えば、テーマがヘッダー領域内のメニューロケーションにプライマリメニュークラスを割り当て、その後、以下のCSSクラスを使用してCSSでそれをターゲットにできるとします。
// container class
#header .primary-menu{}
// container class first unordered list
#header .primary-menu ul {}
//unordered list within an unordered list
#header .primary-menu ul ul {}
// each navigation item
#header .primary-menu li {}
// each navigation item anchor
#header .primary-menu li a {}
// unordered list if there is drop down items
#header .primary-menu li ul {}
// each drop down navigation item
#header .primary-menu li li {}
// each drap down navigation item anchor
#header .primary-menu li li a {}
詳細については、WordPressでナビゲーションメニューをスタイル設定する方法に関するガイドをご覧ください。
デフォルトのWordPressウィジェットクラス
ウィジェットは、WordPressテーマにコンテンツ以外のブロックを簡単に表示する方法です。通常、専用のウィジェット対応エリアまたはサイドバーに表示されます。
WordPressは、レガシーウィジェットに以下のクラスを追加します。
.widget {}
#searchform {}
.widget_search {}
.screen-reader-text {}
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}
.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}
.textwidget {}
.widget_text {}
.textwidget p {}
ただし、WordPress がブロックベースのウィジェットエリアに移行するにつれて、ウィジェットエリアにさまざまなブロックを追加できるようになり、それぞれが動的に CSS クラスを生成します。
これらのCSSクラスは、この記事の後半で検索する方法を説明します。
デフォルトのコメントフォームクラス
コメントは多くのWordPressウェブサイトのエンゲージメントハブです。コメントをスタイル設定することで、ユーザーによりクリーンで魅力的なエクスペリエンスを提供できます。
WordPressは、テーマ開発者がコメントエリアをスタイル設定するのに役立つ以下のデフォルトCSSクラスを追加します。
/*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 {}
/*Comment Form */
#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.form-allowed-tags { }
.form-submit
詳細については、WordPressでコメントをスタイル設定する方法に関するガイドをご覧ください。
WordPressブロッククラスの検索
WordPressブロックエディターは、ブロックのCSSクラスを動的に生成します。
これらのCSSクラスを見つけるには、まず投稿またはページに特定のブロックを追加する必要があります。次に、「プレビュー」ボタンをクリックして、ブロックがどのように機能するかを確認します。
プレビュータブで、追加したばかりのブロックにマウスカーソルを移動し、右クリックして「要素を調査」ツールを選択します。

開発者コンソールには、ブロックによって生成されたHTMLと、それが追加したCSSクラスが表示されます。
上記のスクリーンショットでは、ギャラリーブロックのCSSクラスを見ています。これらのCSSクラスを使用して、WordPressテーマのギャラリーブロックをスタイルすることができます。
WordPressに独自のカスタムCSSクラスを追加する
現在、デフォルトのWordPress CSSクラスは非常に包括的です。しかし、その主な目的は、テーマ開発者が標準化されたフレームワークで構築できるようにすることです。
ウェブサイトによっては、デフォルトのCSSクラスが利用できない領域にカスタムCSSを追加する必要がある場合があります。
同様に、テーマ全体に影響を与えることなく、特定の投稿やページに小さな変更を加えたい場合があります。
幸いなことに、WordPress にはさまざまな領域に CSS クラスを追加するための簡単な方法がいくつか用意されています。以下にいくつかの方法を示します。
ブロックエディター内のブロックにカスタム CSS クラスを追加する
特定の投稿またはページにカスタムCSSクラスをすばやく追加したい場合は、ブロックエディターを使用するのが最も簡単な方法です。
投稿またはページを編集し、カスタムCSSクラスを追加したいブロックを選択するだけです。ブロック設定の下で、「詳細」パネルをクリックして、CSSクラスの名前を追加します。

「更新」ボタンをクリックして変更を保存することを忘れないでください。
このクラスを使用して、この特定の投稿またはページのこの特定のブロックにのみ影響するカスタムCSSコードを追加できるようになりました。
WordPressナビゲーションメニュー内
WordPressのナビゲーションメニュー項目にカスタムCSSを追加することもできます。例えば、メニュー項目をボタンに変換したい場合、この方法が役立ちます。
単純に 外観 » メニュー ページに移動し、画面右上にある「画面オプション」ボタンをクリックします。
ここから、「CSSクラス」オプションの横にあるチェックボックスをオンにします。

次に、下にスクロールして、カスタムCSSクラスを追加したいメニュー項目を展開しましょう。
次に、CSSクラスというラベルのフィールドが表示されます。ここにカスタムCSSクラスを追加してください。

変更を保存するには、「メニューを保存」ボタンをクリックすることを忘れないでください。
このカスタムCSSクラスを使用して、その特定のメニュー項目を異なるスタイルで表示できるようになりました。
ボーナス:CSSコードを書かずにWordPressテーマを簡単にデザインする方法
WordPressテーマをカスタムCSSでスタイルする方法を学ぶことは、非常に役立つスキルです。しかし、CSSコードを一切書かずにWordPressテーマをデザインするソリューションを求めるユーザーもいるかもしれません。
そのためには、SeedProd が必要です。これは、コードを書かずにカスタムテーマを簡単に作成できる、市場で最高の WordPress ページビルダーツールです。

SeedProdには、開始点として使用できるすぐに使えるテーマが付属しています。
必要であれば、テーマをゼロから作成することもできます。

テンプレートを選択したら、直感的なドラッグアンドドロップエディターを使用してカスタムテーマの編集をすべて完了できます。
ブロックをデザインにドロップするだけで、独自のレイアウトを作成できます。

また、簡単なポイント&クリックで任意の項目を簡単に変更することもできます。さらに、独自のカラー、背景、フォントなどを自由に使用できます。
詳細については、コードを書かずに簡単にカスタムWordPressテーマを作成する方法に関するステップバイステップのチュートリアルをご覧ください。
この記事が、WordPress によって生成されたデフォルトの CSS チートシートを見つけるのに役立ったことを願っています。次に、WordPress で CSS または JavaScript ファイルを最小化する方法 や WordPress で未使用の CSS を削除する方法 に関するガイドも参照することをお勧めします。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。

Gwyneth Llewelyn
本当に、本当に役立つ参考資料です。特に「追加」のスタイルを追加したい場合、そして最も簡単な方法は組み込みスタイルを使用することです(すべてのブロックで追加クラスを追加できますが、すべてのテーマで追加CSSを追加できるわけではありません。独自のチャイルドテーマなどを行わない限り)。
「新しい」CSSクラスの中に、Automatticが区切り線のスタイルを設定するためのものを提供したかどうか疑問に思います。私は脚注が好きで、たくさん使用しています(WPで「標準」になる前、6.3の頃から!)、しかし、それらのミニマリストなスタイルは好きではありません。WordPressはこれが「進行中の作業」であり、フォント属性以外に変更できることはほとんどないことを完全に認めています:https://wordpress.org/documentation/article/footnotes-block/
したがって、CSSの出番です!
width=30%を取得できる基本的なクラスが必要です。豊富なリストからそのようなものを期待していましたが、残念ながら、少なくとも2025年秋までには入手できないようです。とにかくありがとうございます。それでもあなたのリストは非常に役立ちます!
モイヌディン・ワヒード
CSSの経験があり、開発者としてのバックグラウンドを持つ方にとって、非常に役立つチートシートです。
見た目の変更や美しくするための作業に大変役立つでしょう。
このチートシートを作成していただき、ありがとうございます。
Mrteesurez
よくできました。役立つCSSチートシートを作成しました。これらをマスターすれば、スタイルを適切に扱うことが容易になります。これらのCSSチートシートをまとめていただき、ありがとうございます。
Rodrigo Vieira Eufrasio da Silva
この素晴らしいコンテンツについてお祝い申し上げます。この記事を更新し、どのクラスがGutenbergとWordPressの最新バージョンによって生成されるかをお知らせいただければと思います。なぜなら、この投稿は古くなっているからです。しかし、大変参考になりました。
皆さん、ハグを贈ります。
WPBeginnerサポート
Thank you for letting us know, we’ll be sure to take a look
管理者
アリソン・ウェストール
要素のパディングを変更するためのCSSクラスはありますか?よろしくお願いします!
WPBeginnerサポート
追加したいパディングのオブジェクトを見つけたら、以下を使用します。
padding、padding-top、padding-right、padding-bottom、padding-left
追加したいパディングの種類に応じて
管理者
マット・コーリー
情報ありがとうございます。数年前のものですが、ページをブックマークしました!
WPBeginnerサポート
Thank you, while the article is older, it should still be useful
管理者
MS Shohan
素晴らしい仕事です、ブラザー。すべてのデフォルトWPクラスのリストを作成してくれてありがとう。
ハンナ・スティール
こんにちは、自動生成されたイベントページのフォーマットに本当に苦労しています。
どうか私を助けてください?
Arunjith RS
とても役に立ちました。ありがとうございます。
Shai
管理ダッシュボードと管理ウィジェットのクラスを(まだどこにも記載されていない場合は)リストしていただけますか?
管理画面ではCSSを読み込むためにローダー(wp-admin/load-styles.php)を使用しているようですが、そのCSSは圧縮されていて読みにくいです。使用されている項目のリストがあると便利です。例えば、タブ付きの独自のウィジェットを作成したい場合などです。CSSを調べたところ、`.nav-tab`関連のCSSのリストが大量に見つかりました。
アリ・スサント
そして「entry-content」自体!
アリ・スサント
これを追加したいのですが:
“status-publish”
luroch
質問です。アンダースコアからブートストラップテーマを作成する場合、このフレームワークに含まれるクラスとIDを保持し、ブートストラップのものを追加するだけでよいですか、それともブートストラップのクラスとIDのみを使用できますか?
アリ・スサント
どうやって見つけましたか?PHP関数などを使った自動化された方法がありますか?
Stephen Clark
素晴らしい投稿で、非常に有益です。WPフッターに関する同様の詳細をこの投稿に追加していただけますか?使用しているテーマや、私が構築した他のいくつかのサイトのフッターのスタイル設定やフォーマットに苦労しています。
これらすべてのスタイルを含むダウンロード可能なCSSスタイルシートファイルがあると、さらに役立ちます。ありがとうございます!
Kevin Pryce
要素を検査したときに、特にbodyクラスに適用されているスタイルが表示されません。テンプレートにそれらを入れる必要がありますか?
Joel Bladt
すべての標準WordPressクラスの素晴らしいコンパイルです。本当にWordPressによって自動的に追加されるすべてのクラスでしたか?クラスが廃止されて消滅したり、新しいクラスが登場したりした場合は、リストの更新を楽しみにしています。
– ドイツのブロガー、Google翻訳で翻訳しました。
WPBeginnerサポート
私たちの知る限り最新の状態ですが、もし無効なクラスを見つけた場合はお知らせください。
管理者
ロレート
time saver! now let me mess those styles
アンバジュニア
とても役立つチュートリアルです。Genesisのビジュアルフックガイドと同様に、Genesisを非常によく要約しています。
Malcolm Owen
印刷可能なPDFバージョンのこのガイドがあれば便利だと思いませんか?
ピート
http://www.printfriendly.com/print/v2?url=http%3A%2F%2Fwww.wpbeginner.com%2Fwp-themes%2Fdefault-wordpress-generated-css-cheat-sheet-for-beginners%2F#
Adriane
ありがとう、Pete!
wpbeginner
@smashingmag Thank you for retweeting our article
really appreciate the love.
favstar50
@smashingmag 50★ツイートおめでとうございます! http://t.co/r78Ao3Sm
bobHankin
@photoassassin いいえ、知りませんでした。それは素晴らしいですね!便利でもあります!
eugenebicyclist
WPを使い始めたばかりで、これは本当に便利です。ありがとうございます。