WordPress と CSS

WordPress テーマは、テンプレートファイル、テンプレートタグ、および CSS ファイルの組み合わせを使用して、WordPress サイトの外観を生成します。

テンプレートファイル

テンプレートファイルは、サイトを作成するための基本的な構成要素です。WordPress テーマ構造では、ヘッダー、サイドバー、コンテンツ、およびフッターがそれぞれのファイルに含まれています。これらは一緒になってページを作成します。これにより、構成要素をカスタマイズできます。たとえば、デフォルトの WordPress テーマでは、サイトのフロントページ、カテゴリ、アーカイブ、および 検索 ウェブページに表示されるマルチポストビューにはサイドバーがあります。任意の投稿をクリックすると、シングルポストビューに移動し、サイドバーは消えます。ページに表示される部分や要素を選択することができますし、それらを個別にカスタマイズすることで、特定のカテゴリ内のすべてのページに異なるヘッダーやサイドバーを表示できます。さらに詳しいテンプレートの紹介については、テンプレートに入るを参照してください。

テンプレートタグ

テンプレートタグは、WordPress データベース内に保存されている情報に対する指示やリクエストを提供するコードの一部です。これらの中には、高度に構成可能なものもあり、ウェブサイトに表示される日付、時間、リスト、およびその他の要素をカスタマイズできます。テンプレートタグについての詳細は、テンプレートタグに入るで学ぶことができます。

スタイルシート

CSS ファイルは、すべてが一緒になる場所です。サイト内のすべてのテンプレートファイルには、テンプレートタグとコンテンツを囲む HTML 要素があります。各テーマのスタイルシートには、各 HTML 要素のデザインとレイアウトを制御するためのルールがあります。これらの指示がなければ、ページは単に長いテキストページのように見えるでしょう。これらの指示があれば、構成要素の構造を移動させることができ、ヘッダーを非常に長くしてグラフィックや写真で満たすことも、シンプルで狭くすることもできます。サイトは、視聴者の画面の中央に「浮かぶ」ことができ、左右にスペースを持つか、画面全体に広がり、ページ全体を埋めることができます。サイドバーは右側または左側に配置することができ、ページの中間から開始することもできます。ページのスタイルはあなた次第です。しかし、スタイリングの指示は、各テーマフォルダー内の style.css ファイルにあります。

WordPress におけるカスタム CSS

WordPress 4.7 以降、外観カスタマイズ画面から自分のテーマにカスタム CSS を追加できるようになりました。追加のプラグインやテーマや子テーマを直接編集する必要はありません。現在のテーマをカスタマイズする際に 追加 CSS タブを選択するだけで始められます！

行った CSS の変更は、プレビューに表示されます。他のカスタマイザーで行った変更と同様に、すべてが満足するまで実際に何も変更せずに調整して完璧にする時間があります！

CSS の変更はテーマに結びついていることを忘れないでください。これは、新しいテーマに変更すると、カスタム CSS スタイルが無効になることを意味します（もちろん、以前のテーマに戻すと、再びそこに表示されます）。

なぜカスタム CSS を使用するのか？

いくつかの理由があります：

  • テーマを直接変更し、それが更新されると、変更が失われる可能性があります。カスタム CSS を使用することで、変更が保持されることを保証します。
  • カスタム CSS を使用すると、開発時間を短縮できます。
  • カスタム CSS はテーマの元の CSS の後に読み込まれ、特定の CSS ステートメントをオーバーライドできるため、最初から全体の CSS セットを書く必要がありません。

WordPress 生成クラス

画像やブロック要素を整列させるためのいくつかのクラス（div、p、table など）が WordPress 2.5 で導入されました： aligncenter、alignleft および alignright。さらに、整列されていない画像には alignnone クラスが追加され、必要に応じて異なるスタイルを適用できます。

同じクラスは、キャプションのある画像を整列させるために使用されます（WordPress 2.6 以降）。キャプションには追加の CSS クラスが 3 つ必要で、アクセシビリティ用にもう 1 つ必要です。これらのクラスは次のとおりです： 

  1. /* WordPress Core
  2. -------------------------------------------------------------- */
  3. .alignnone {
  4.   margin: 5px 20px 20px 0;
  5. }
  7. .aligncenter,
  8. div.aligncenter {
  9.   display: block;
  10.   margin: 5px auto 5px auto;
  11. }
  13. .alignright {
  14.   float:right;
  15.   margin: 5px 0 20px 20px;
  16. }
  18. .alignleft {
  19.   float: left;
  20.   margin: 5px 20px 20px 0;
  21. }
  23. a img.alignright {
  24.   float: right;
  25.   margin: 5px 0 20px 20px;
  26. }
  28. a img.alignnone {
  29.   margin: 5px 20px 20px 0;
  30. }
  32. a img.alignleft {
  33.   float: left;
  34.   margin: 5px 20px 20px 0;
  35. }
  37. a img.aligncenter {
  38.   display: block;
  39.   margin-left: auto;
  40.   margin-right: auto;
  41. }
  43. .wp-caption {
  44.   background: #fff;
  45.   border: 1px solid #f0f0f0;
  46.   max-width: 96%; /* Image does not overflow the content area */
  47.   padding: 5px 3px 10px;
  48.   text-align: center;
  49. }
  51. .wp-caption.alignnone {
  52.   margin: 5px 20px 20px 0;
  53. }
  55. .wp-caption.alignleft {
  56.   margin: 5px 20px 20px 0;
  57. }
  59. .wp-caption.alignright {
  60.   margin: 5px 0 20px 20px;
  61. }
  63. .wp-caption img {
  64.   border: 0 none;
  65.   height: auto;
  66.   margin: 0;
  67.   max-width: 98.5%;
  68.   padding: 0;
  69.   width: auto;
  70. }
  72. .wp-caption p.wp-caption-text {
  73.   font-size: 11px;
  74.   line-height: 17px;
  75.   margin: 0;
  76.   padding: 0 4px 5px;
  77. }
  79. /* Text meant only for screen readers. */
  80. .screen-reader-text {
  81.   border: 0;
  82.   clip: rect(1px, 1px, 1px, 1px);
  83.   clip-path: inset(50%);
  84.   height: 1px;
  85.   margin: -1px;
  86.   overflow: hidden;
  87.   padding: 0;
  88.   position: absolute !important;
  89.   width: 1px;
  90.   word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
  91. }
  93. .screen-reader-text:focus {
  94.   background-color: #eee;
  95.   clip: auto !important;
  96.   clip-path: none;
  97.   color: #444;
  98.   display: block;
  99.   font-size: 1em;
  100.   height: auto;
  101.   left: 5px;
  102.   line-height: normal;
  103.   padding: 15px 23px 14px;
  104.   text-decoration: none;
  105.   top: 5px;
  106.   width: auto;
  107.   z-index: 100000;
  108.   /* Above WP toolbar. */
  109. }

各テーマは、画像とキャプションを適切に表示できるように、style.css ファイルにこれらまたは類似のスタイルを持っている必要があります。正確な HTML 要素とクラスおよび ID 値は、使用しているテーマの構造によって異なります。

テンプレートと CSS

CSS がウェブページに関連してどのように機能するかを理解するために、次のリストに引用されているいくつかの記事を読むことをお勧めします：

  • テーマの使用 – このリストには多くの高度な記事もあります。
  • テンプレート – WordPress テーマとテンプレートに関する包括的なリスト。
  • テーマ開発 – WordPress テーマ開発ガイドとコード標準。

WordPress レイアウトヘルプ

WordPress テーマやレイアウトに関して問題や質問がある場合は、まずテーマの作者のウェブサイトを確認して、アップグレードがあるか、質問への回答があるかを確認してください。以下は他のリソースです：

CSS リソース

変更履歴

  • 2022-09-04: CSS からの元のコンテンツ; チケット Github。