初心者向けデフォルトWordPress生成CSSチートシート

WordPressは、ほとんどのテーマでさまざまな要素に独自のCSSクラスを追加します。これらのデフォルトのクラスは、サイトのさまざまな部分を自動的にスタイル設定するのに役立ちます。

これらのデフォルトの CSS クラスを知っていると、非常に役立ちます。ゼロから始めることなく、サイトの外観を簡単にカスタマイズできます。

例えば、サイトでCSSを使い始めたところ、ブログコンテンツを際立たせるためのスタイル設定がずっと簡単になりました。

この記事では、これらのデフォルトのWordPress生成CSSクラスのチートシートを見つけます。また、より多くのCSSクラスを見つけて、必要に応じて独自のクラスを追加する方法も紹介します。

WordPressが生成したデフォルトのCSSのチートシート

デフォルトのWordPress生成CSSについて学ぶ理由

WordPressは、WordPressウェブサイトのさまざまな要素にデフォルトのCSSクラスを自動的に生成して追加します。

テーマ開発者は、これらのデフォルトのCSSクラスを使用して、コンテンツエリア、サイドバー、ウィジェット、ナビゲーションメニューなど、WordPressサイトの一般的な領域をスタイル設定できます。

そのため、これらのCSSクラスを知っておくと、WordPressテーマ開発を学んでいる場合や、単に自分のウェブサイト用の子テーマを作成しようとしている場合に役立ちます。

また、テーマを自分で作成することなく、カスタムCSSを追加することで、WordPressテーマの特定の要素をすばやくスタイル設定できます。

注意: テーマのスタイルを変更したり、カスタムテーマを作成したりするために CSS を学ぶ必要はありません。コーディングを学びたくない場合は、SeedProd のようなドラッグ&ドロップビルダーを使用できます。記事の後半で詳しく説明します。

次のセクションでは、WordPressがデフォルトで生成するCSSクラスを共有します。この記事で取り上げるすべての内容の簡単な概要を以下に示します。

前置きはさておき、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; 
}
投稿クラスCSS

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クラスを見つけるには、まず投稿またはページに特定のブロックを追加する必要があります。次に、「プレビュー」ボタンをクリックして、ブロックがどのように機能するかを確認します。

プレビュータブで、追加したばかりのブロックにマウスカーソルを移動し、右クリックして「要素を調査」ツールを選択します。

ブロックの CSS クラスを見つける

開発者コンソールには、ブロックによって生成されたHTMLと、それが追加したCSSクラスが表示されます。

上記のスクリーンショットでは、ギャラリーブロックのCSSクラスを見ています。これらのCSSクラスを使用して、WordPressテーマのギャラリーブロックをスタイルすることができます。

WordPressに独自のカスタムCSSクラスを追加する

現在、デフォルトのWordPress CSSクラスは非常に包括的です。しかし、その主な目的は、テーマ開発者が標準化されたフレームワークで構築できるようにすることです。

ウェブサイトによっては、デフォルトのCSSクラスが利用できない領域にカスタムCSSを追加する必要がある場合があります。

同様に、テーマ全体に影響を与えることなく、特定の投稿やページに小さな変更を加えたい場合があります。

幸いなことに、WordPress にはさまざまな領域に CSS クラスを追加するための簡単な方法がいくつか用意されています。以下にいくつかの方法を示します。

ブロックエディター内のブロックにカスタム CSS クラスを追加する

特定の投稿またはページにカスタムCSSクラスをすばやく追加したい場合は、ブロックエディターを使用するのが最も簡単な方法です。

投稿またはページを編集し、カスタムCSSクラスを追加したいブロックを選択するだけです。ブロック設定の下で、「詳細」パネルをクリックして、CSSクラスの名前を追加します。

ブロックにカスタムCSSクラスを追加する

「更新」ボタンをクリックして変更を保存することを忘れないでください。

このクラスを使用して、この特定の投稿またはページのこの特定のブロックにのみ影響するカスタムCSSコードを追加できるようになりました。

WordPressナビゲーションメニュー内

WordPressのナビゲーションメニュー項目にカスタムCSSを追加することもできます。例えば、メニュー項目をボタンに変換したい場合、この方法が役立ちます。

単純に 外観 » メニュー ページに移動し、画面右上にある「画面オプション」ボタンをクリックします。

ここから、「CSSクラス」オプションの横にあるチェックボックスをオンにします。

メニューのCSSクラス

次に、下にスクロールして、カスタムCSSクラスを追加したいメニュー項目を展開しましょう。

次に、CSSクラスというラベルのフィールドが表示されます。ここにカスタムCSSクラスを追加してください。

ナビゲーションメニュー項目にCSSクラスを追加する

変更を保存するには、「メニューを保存」ボタンをクリックすることを忘れないでください。

このカスタムCSSクラスを使用して、その特定のメニュー項目を異なるスタイルで表示できるようになりました。

ボーナス:CSSコードを書かずにWordPressテーマを簡単にデザインする方法

WordPressテーマをカスタムCSSでスタイルする方法を学ぶことは、非常に役立つスキルです。しかし、CSSコードを一切書かずにWordPressテーマをデザインするソリューションを求めるユーザーもいるかもしれません。

そのためには、SeedProd が必要です。これは、コードを書かずにカスタムテーマを簡単に作成できる、市場で最高の WordPress ページビルダーツールです。

SeedProdのホームページ

SeedProdには、開始点として使用できるすぐに使えるテーマが付属しています。

必要であれば、テーマをゼロから作成することもできます。

SeedProdスターターテーマ

テンプレートを選択したら、直感的なドラッグアンドドロップエディターを使用してカスタムテーマの編集をすべて完了できます。

ブロックをデザインにドロップするだけで、独自のレイアウトを作成できます。

SeedProdテーマビルダー

また、簡単なポイント&クリックで任意の項目を簡単に変更することもできます。さらに、独自のカラー、背景、フォントなどを自由に使用できます。

詳細については、コードを書かずに簡単にカスタムWordPressテーマを作成する方法に関するステップバイステップのチュートリアルをご覧ください。

この記事が、WordPress によって生成されたデフォルトの CSS チートシートを見つけるのに役立ったことを願っています。次に、WordPress で CSS または JavaScript ファイルを最小化する方法WordPress で未使用の CSS を削除する方法 に関するガイドも参照することをお勧めします。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

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

究極のWordPressツールキット

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

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

30 CommentsLeave a Reply

  1. 本当に、本当に役立つ参考資料です。特に「追加」のスタイルを追加したい場合、そして最も簡単な方法は組み込みスタイルを使用することです(すべてのブロックで追加クラスを追加できますが、すべてのテーマで追加CSSを追加できるわけではありません。独自のチャイルドテーマなどを行わない限り)。

    「新しい」CSSクラスの中に、Automatticが区切り線のスタイルを設定するためのものを提供したかどうか疑問に思います。私は脚注が好きで、たくさん使用しています(WPで「標準」になる前、6.3の頃から!)、しかし、それらのミニマリストなスタイルは好きではありません。WordPressはこれが「進行中の作業」であり、フォント属性以外に変更できることはほとんどないことを完全に認めています:https://wordpress.org/documentation/article/footnotes-block/

    したがって、CSSの出番です!width=30%を取得できる基本的なクラスが必要です。豊富なリストからそのようなものを期待していましたが、残念ながら、少なくとも2025年秋までには入手できないようです。

    とにかくありがとうございます。それでもあなたのリストは非常に役立ちます!

  2. CSSの経験があり、開発者としてのバックグラウンドを持つ方にとって、非常に役立つチートシートです。
    見た目の変更や美しくするための作業に大変役立つでしょう。
    このチートシートを作成していただき、ありがとうございます。

  3. よくできました。役立つCSSチートシートを作成しました。これらをマスターすれば、スタイルを適切に扱うことが容易になります。これらのCSSチートシートをまとめていただき、ありがとうございます。

  4. この素晴らしいコンテンツについてお祝い申し上げます。この記事を更新し、どのクラスがGutenbergとWordPressの最新バージョンによって生成されるかをお知らせいただければと思います。なぜなら、この投稿は古くなっているからです。しかし、大変参考になりました。

    皆さん、ハグを贈ります。

  5. 要素のパディングを変更するためのCSSクラスはありますか?よろしくお願いします!

    • 追加したいパディングのオブジェクトを見つけたら、以下を使用します。
      padding、padding-top、padding-right、padding-bottom、padding-left
      追加したいパディングの種類に応じて

      管理者

  6. 素晴らしい仕事です、ブラザー。すべてのデフォルトWPクラスのリストを作成してくれてありがとう。

  7. こんにちは、自動生成されたイベントページのフォーマットに本当に苦労しています。

    どうか私を助けてください?

  8. 管理ダッシュボードと管理ウィジェットのクラスを(まだどこにも記載されていない場合は)リストしていただけますか?
    管理画面ではCSSを読み込むためにローダー(wp-admin/load-styles.php)を使用しているようですが、そのCSSは圧縮されていて読みにくいです。使用されている項目のリストがあると便利です。例えば、タブ付きの独自のウィジェットを作成したい場合などです。CSSを調べたところ、`.nav-tab`関連のCSSのリストが大量に見つかりました。

  9. 質問です。アンダースコアからブートストラップテーマを作成する場合、このフレームワークに含まれるクラスとIDを保持し、ブートストラップのものを追加するだけでよいですか、それともブートストラップのクラスとIDのみを使用できますか?

  10. 素晴らしい投稿で、非常に有益です。WPフッターに関する同様の詳細をこの投稿に追加していただけますか?使用しているテーマや、私が構築した他のいくつかのサイトのフッターのスタイル設定やフォーマットに苦労しています。

    これらすべてのスタイルを含むダウンロード可能なCSSスタイルシートファイルがあると、さらに役立ちます。ありがとうございます!

  11. 要素を検査したときに、特にbodyクラスに適用されているスタイルが表示されません。テンプレートにそれらを入れる必要がありますか?

  12. すべての標準WordPressクラスの素晴らしいコンパイルです。本当にWordPressによって自動的に追加されるすべてのクラスでしたか?クラスが廃止されて消滅したり、新しいクラスが登場したりした場合は、リストの更新を楽しみにしています。

    – ドイツのブロガー、Google翻訳で翻訳しました。

  13. とても役立つチュートリアルです。Genesisのビジュアルフックガイドと同様に、Genesisを非常によく要約しています。

返信する

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