Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressで生成される初期設定のCSSチートシート(初心者向け

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressで生成された初期設定のCSSチートシートをお探しですか?

WordPressは、ほとんどのテーマでさまざまな要素にいくつかのCSSクラスを自動的に追加します。これらのデフォルトのCSSクラスは、WordPressテーマでこれらの要素をスタイル設定するために使用することができます。

この投稿では、WordPressで初期設定されているCSSチートシートを紹介します。また、CSSクラスを簡単に見つける方法や、必要なときにカスタマイザーを追加する方法についても説明します。

Cheat sheet for default WordPress generated CSS

WordPressが生成する初期設定のCSSについて学ぶ理由とは?

WordPressは自動的に初期設定のCSSクラスを生成し、WordPressサイトのさまざまな要素に追加します。

WordPressテーマ開発者は、これらのCSSクラスを使用して、すべてのWordPressサイトの共通エリアをスタイル設定することができます。これには、コンテンツエリア、サイドバー、ウィジェット、ナビゲーションメニューなどが含まれます。

WordPressテーマ開発を学んでいるときや、単に自分のサイトの子テーマを作ろうとしているときに、これらのCSSクラスを知っていると便利です。

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

:テーマのスタイルを変更したり、カスタマイザーを作成するためにCSSを学ぶ必要はありません。もしコードを学びたくないのであれば、SeedProdのようなドラッグ&ドロップビルダーを使うことができます。これについては投稿の後半で詳しく説明する。

ということで、WordPressが生成した初期設定のCSSクラスを見てみよう。

初期設定のボディ・クラス・スタイル

HTMLのボディタグ<body>は、WordPressテーマのデザインにおいて非常に重要な、ウェブページ全体のレイアウト構造を含むタグです。

WordPressは、テーマデザイナーがボディコンテナをスタイルするために使用できるいくつかのCSSクラスをボディエリアに追加します。

// 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>タグです。しかし、テーマによっては他のタグになることもあります。投稿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; 
}
Post class 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クラスを追加します。

例えば、あなたのテーマがヘッダーエリア内のメニュー位置にprimary-menuクラスを割り当てているとします。

// 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テーマのウィジェット対応エリアやサイドバーに表示されます。

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クラスを見つけるには、投稿またはページに特定のブロックを追加する必要があります。その後、プレビューボタンをクリックして、ブロックの動作を確認する必要があります。

プレビュータブで、先ほど追加したブロックにマウスを持っていき、右クリックでInspectツールを選択する。

Find CSS classes for blocks

開発者コンソールでは、ブロックによって生成された HTML が表示されます。ここから、ブロックによって追加された CSS クラスを見ることができます。

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

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

さて、初期設定のWordPress CSSクラスは非常に包括的です。しかし、その目的は主にテーマ開発者に標準化されたフレームワークを提供することです。

個々のサイトでは、対象となる初期設定のCSSクラスが見つからないようなエリアにカスタマイザーを追加する必要があるかもしれません。

同様に、テーマ全体に適用せずに、特定の投稿日やページに小さな変更を加えたい場合もあります。

幸いなことに、WordPressはさまざまなエリアにCSSクラスを追加する簡単な方法をいくつかプロバイダーしています。

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

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

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

Adding custom CSS classes to a block

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

このクラスを使って、特定の投稿やページの特定のブロックにのみ影響するカスタムCSSコードを追加することができます。

WordPressのナビゲーションメニューで

WordPressのナビゲーション・メニュー項目にカスタムCSSを追加することもできる。メニュー項目をボタンに変換したい場合、この方法が便利だ。

外観 ” メニューのページで画面右上の表示オプションボタンをクリックするだけです。

ここから、CSSクラスオプションの隣にあるボックスをチェックする必要があります。

Menu CSS classes

次に、下にスクロールして、カスタムCSSクラスを追加したいメニュー項目をクリックして展開する必要があります。

CSS classesと書かれたフィールドがあります。ここにカスタマイザーのCSSクラスを追加してください。

Adding css class to navigation menu item

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

このカスタムCSSクラスを使って、特定のメニュー項目を別のスタイルにすることができます。

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

カスタムCSSでWordPressテーマをスタイリングすることを学ぶことは、非常に有用なスキルです。しかし、ユーザーによっては、CSSコードを書かずにWordPressテーマをデザインするソリューションが欲しいだけかもしれません。

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

SeedProd Website Builder Coupon Code

SeedProdには、すぐに使えるテーマが用意されています。

手作業でテンプレートを作成し、ゼロからテーマを作ることもできる。

SeedProd starter themes

その後、直感的なドラッグ&ドロップのサイト構築インターフェースを使用して、カスタマイザーを編集することができます。

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

SeedProd theme builder

また、どの項目もポイント&クリックで簡単に変更できます。お好みの色、背景、フォントなどを使用できます。

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

この投稿が、初期設定の WordPress 生成 CSS チートシートを見つけるのにお役に立てば幸いです。また、WordPress の最も一般的なエラーを修正するガイド、または中小企業に最適なライブチャットソフトウェアの専門家による比較をご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

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

Reader Interactions

28件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Rodrigo Vieira Eufrasio da Silva says

    You are to be congratulated for this wonderful content. I would only recommend updating this article, and letting us know which classes are generated by guttenberg and the latest version of WordPress because this post is out of date. But it helped me a lot.

    Hugs to you all.

    • WPBeginner Support says

      Once you find the object you want to add padding to, you would use:
      padding, padding-top, padding-right, padding-bottom, padding-left
      depending on what type of padding you want added

      管理者

  3. Hannah Steele says

    Hello, I am really struggling to format the automatically generated events page.

    Please help me?

  4. Shai says

    Can you (if not already elsewhere) list the admin dashboard and admin widgets classes.
    it look like the admin is using a loader (wp-admin/load-styles.php) to include it CSS but that CSS is compress and hard to read. it will be nice to see a list of the items in use. for example if you want to create your own widget with tabs ; I inspected the CSS and can see large list of the class .nav-tab related CSS.
    .

  5. luroch says

    A question: when creating a bootstrap theme from underscores, should I keep the classes and ids that come with this framework, just adding the Bootstrap ones, or can I use only Bootstrap classes and Ids?

  6. Stephen Clark says

    Fantastic post and highly informative. Curious if you could append this post with similar details about the WP footer. I have been struggling with styling and formatting the footer with the theme I’m using, and with some other sites I’ve built.

    Would also be helpful to have a downloadable CSS stylesheet file containing all of these styles. Thanks!

  7. Kevin Pryce says

    When I inspect element only my wordpress theme, I do not see these styles, especially the ones applied to the body class. Do you have to put them into the template?

  8. Joel Bladt says

    Nice compilation of all the standard WordPress classes. Was that really all classes that are added automatically by WordPress? If classes are obsolete and disappeared, or new ones have come to this, I look forward to updating the list.

    – German Blogger and translated with Google Translator.

  9. Amba Junior says

    Very useful tutorial. Just like the Genesis visual hook guide, this summarizes Genesis real well

返信を残す

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