デュプリケーターの新しい移行サービス：指一本触れずにウェブサイトを移動
WordPressの移行に貴重な時間を奪われていませんか？Duplicatorの新しいマイグレーションサービスは、最初から最後まで3...
デュプリケーターの新しい移行サービス：指一本触れずにウェブサイトを移動
ジョエラ・ダン
ジョエラ・ダン
ジョン・ターナー
ジョン・ターナー
WordPressで作ったサイトを見て、「完璧に近いけど、ボタンの青の濃さが違う」とか、「もう少し文字を大きくしたい」と思ったことはないだろうか。
WordPressのテーマにはカスタマイズオプションが付属していますが、変更したいことをすべてカバーできないこともあります。
CSSは、サイトの外観を思い通りに調整できる魔法の杖のようなものです。
このガイドでは、CSSとは何か、独自のカスタムスタイルを追加する方法、そして実践的な例をいくつか紹介する。
最後には、あなたのサイトを "あと少し "から "ぴったり "にするための視覚的な調整が、より快適に感じられるようになるはずだ。
WordPressのウェブサイトを家のように考えてみましょう。HTMLコードは、壁、部屋、基礎といった構造を形成します。CSS（カスケーディング・スタイル・シート）は、ペンキの色、家具の配置、照明、装飾的なタッチなど、インテリアデザインのすべての要素です。
CSSは、ページ上のコンテンツをどのように表示するかをブラウザに指示します。段落のテキストをすべて青にしたいですか？CSSならそれが可能です。
見出しとその下の段落の間にもっとスペースが必要ですか？CSSはそれも処理します。
CSSの基本構造はこのパターンに従っている：
selector { property: value; }
セレクタはページ上の特定の要素を対象とし、プロパティと値のペアはそれらの要素がどのように見えるべきかを定義します。
例えば、こうだ：
p { color: blue; }
この単純な行は、すべての段落テキストを青で表示するようブラウザに指示します。それだけだ！
コンセプトはシンプルだが、CSSは、さまざまなセレクタやプロパティを組み合わせてサイトの正確なスタイリング・ルールを作り始めると、強力な力を発揮する。
WordPressのCSSは一か所だけでなく、サイト全体に階層化されているため、"カスケード "と呼ばれています。この階層構造を理解することで、どこに変更を加えるべきかがわかります。
テーマのstyle.cssファイルは土台です。このファイルには、あなたのテーマに特徴的な外観を与える基本的なスタイリングルールがすべて含まれています。デフォルトのインテリアデザインパッケージと考えてください。
WordPressカスタマイザーには、独自のスタイルを安全に追加できる専用の「追加CSS」セクションがあります。これらはテーマのデフォルトを上書きし、テーマのアップデートにも対応します。
大幅な変更を加えるのであれば、子テーマが最適です。子テーマのstyle.cssファイルは親テーマからすべてを継承しますが、あなたが追加したスタイルが優先されます。
一部のプラグインは、特定の機能をスタイル設定するために独自のCSSを持ってきます。これらは通常、テーマのスタイルの後に読み込まれます。
ブロックエディター（Gutenberg）とフルサイトエディターは、CSSを追加する新しい方法を導入しており、サイト全体に影響を与えることなく、特定のブロックやセクションをスタイル設定できる。
時折、インライン CSS - style 属性を使用して HTML 要素に直接適用されるスタイル - を目にすることがあります。この方法は保守が難しいため、サイト全体のスタイル付けには一般的に推奨されません。
このカスケードを理解することは重要です。なぜなら、スタイルが衝突した場合、より具体的なCSSまたはより後から読み込まれるCSSが優先されるからです。これが、カスタムCSSでテーマのスタイルを上書きできる理由です。
CSSを学ぶことで、テーマオプションだけではできないコントロールができるようになる。
WordPressユーザーの多くは、サイトの外観を変更できないとき、イライラする壁にぶつかります。カラーピッカーに適切な色合いがない。要素間の間隔がおかしい。フォントサイズをもう少し大きくしたい。
基本的なCSSの知識さえあれば、このような正確な調整を自分で行うことができる。
CSSは、あなたのサイトを真にユニークなものにします。CSSがなければ、テーマ開発者が考えたカスタマイズオプションに制限されてしまいます。CSSを使えば、そうした制約から解放されます。
視覚的な不具合が発生した場合（そして発生する）、CSSを理解することで素早く修正することができます。プラグインのアップデートでテキストが重なってしまったり、テーマのアップデートでボタンのスタイルが変わってしまったり。CSSを数行書くだけで、このような問題をすぐに解決できることがよくあります。
最も重要なことは、CSSを学ぶことで、WordPressのテーマがどのように機能するかを理解する土台ができることです。CSSがどのように見た目をコントロールするのかを理解すれば、なぜそのように見えるのかをより理解できるようになります。
CSSを学ぶための利用しやすいリソースはたくさんあり、その多くは無料だ。
Mozilla Developer Network (MDN) の Web Docsは、CSS を含むウェブ技術に関する素晴らしいリソースです。彼らのチュートリアルは、実用的な例とともに、コンセプトを消化しやすい断片に分解しています。
W3Schoolsは、ブラウザで直接コードをテストできるインタラクティブな例で、初心者にやさしいCSSレッスンを提供しています。この実践的なアプローチは、学習を抽象的なものに感じさせません。
YouTubeにはWordPressのCSSに特化したチュートリアルがたくさんある。誰かがリアルタイムで変更を行うのを見ることは、テキストの説明だけでは不十分な場合に、コンセプトを理解するのに役立ちます。
CourseraやUdemyのような多くのコースプラットフォームが、無料（または非常に手頃な価格）のCSSコースを提供している。WordPressに特化したものもあり、テーマ要素をターゲットにする方法を的確に教えてくれる。
最も効果的な学習は、実際に練習したときに起こります。テストサイトを立ち上げ（ライブサイトで実験してはいけません！）、小さな変更を加えてみてください。色、余白、フォントサイズなどのプロパティを調整したときに何が起こるか見てみましょう。
すべてのCSSプロパティを暗記する必要はないことを覚えておいてください。プロの開発者でさえ、定期的に調べ物をします。核となる概念を理解することこそが重要なのです。
WordPressには、カスタムCSSを追加する方法がいくつかあります。それぞれの方法には、あなたのニーズや快適さに応じて利点があります。
WordPressカスタマイザーは、WordPressにCSSを簡単に追加できる最も安全な場所です。
WordPressダッシュボードの外観 " カスタマイズ " 追加CSSに移動します。
コードエディターが表示され、CSSを入力または貼り付けることができます。
変更を公開する前に、リアルタイムでプレビューすることができます。見た目がおかしい場合は、コードを調整してすぐに結果を確認できます。
カスタマイザーは、少量から中量のCSSに最適です。何百行ものコードを追加することになるのであれば、他の方法を検討したほうがよいでしょう。
WPCode（旧Insert Headers and Footers）は人気のコードスニペットプラグインです。カスタムCSSを管理するための、より整理された方法を提供します。
プラグインをインストールしたら、Code Snippets " Add Snippetに移動します。Add Your Custom Codeにカーソルを合わせ、Add Custom Snippetをクリックします。
コードの種類としてCSSスニペットを選択し、説明的な名前を付けて、CSSコードを追加します。
WPCodeはカスタマイザーに比べていくつかの利点があります。複数のCSSスニペットを作成できるため、1つの大きなコードブロックよりも管理しやすくなっています。
また、スニペットを実行する場所とタイミングを正確にコントロールすることもできます。ブログ記事にのみ適用されるCSSが必要ですか？WPCodeはその条件付き読み込みを処理することができます。
このプラグインにはエラー防止機能があり、本番サイトに影響が出る前に構文のミスをキャッチすることができます。
ブロックテーマを使用している場合、カスタマイザーの代わりにフルサイトエディターにアクセスできます。しかし、サイトにカスタムCSSを追加することはできます。
このURLに移動し、あなたのサイトのドメインで調整する： https://example.com/wp-admin/customize.php
FSEの限定バージョンが開きます。カスタマイザーと同じように、Additional CSSセクションがあることがわかります。
大規模なカスタマイズを行う場合は、WordPressテーマファイルのCSSを直接編集する必要があるかもしれません。
ダッシュボードの「外観 " テーマファイル編集」でstyle.cssファイルを編集してください。
ただし、これには重要な警告があります：親テーマのファイルを直接修正することはお勧めしません。
その代わりに、子テーマを作成しましょう。子テーマは親テーマのすべての機能とスタイルを継承し、アップデート時に上書きされないように安全に変更を加えることができます。
子テーマを有効化したら、WordPressのテーマファイルエディタでCSSファイルを編集できます。また、FTPやホスティングプロバイダーのファイルマネージャーを使ってテーマファイルにアクセスすることもできます。
WordPressの一般的なカスタマイズのニーズを解決する、シンプルなカスタムCSSの実用的な例を見てみましょう。
引用ブロックをもっと目立たせたいですか？CSSでターゲットにすることができます：
.wp-block-quote {
background-color: #f9f9f9;
border-left: 4px solid #0073aa;
padding: 20px;
}これにより、引用ブロックの背景は薄いグレーになり、左のボーダーは青になり、息抜きのためのパディングが入ります。
サイドバーウィジェットに視覚的な分離が必要かもしれません。それらの間にスペースとボーダーを追加できます：
.widget {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #eaeaea;
}各ウィジェットの下にスペースが増え、微妙な区切り線が入るようになった。
ナビゲーションメニューは、サイトのデザインに合わせてスタイリングを調整する必要があります：
.main-navigation li a {
color: #333333;
font-weight: 500;
text-transform: uppercase;
}
.main-navigation li a:hover {
color: #0073aa;
}これにより、メニューリンクは濃い灰色で、少し太く、すべて大文字になり、カーソルを合わせると青くなります。
タイポグラフィはサイトの個性に大きな影響を与えます。ここでは、CSSを使ってフォントをカスタマイズした例をご紹介します：
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.6;
}
h1, h2, h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}非標準のフォントを使用する場合は、@font-faceを使用するか、Google Fontsにリンクして最初にインポートする必要があることを忘れないでください。
色の変更は、最も一般的なCSS作業のひとつです。この数行でサイトの背景をライトグレーに変更し、リンクにカーソルを合わせると濃いピンク色になります：
body {
background-color: #f5f5f5;
}
a {
color: #e94c89;
}
a:hover {
color: #c13872;
}要素の周囲と内側のスペース（マージンとパディング）は読みやすさに大きく影響します。これは、段落の下にスペースを追加し、メインコンテンツ領域の周りにパディングを作成します：
.entry-content p {
margin-bottom: 20px;
}
.site-content {
padding: 40px 20px;
}フォームには、サイトのデザインに合わせたスタイリングが必要なことがよくあります。これらのスタイルは、目立つ送信ボタンを備えたクリーンなフォームフィールドを作成します：
input[type="text"],
input[type="email"],
textarea {
border: 1px solid #ddd;
padding: 10px;
border-radius: 4px;
}
input[type="submit"] {
background-color: #0073aa;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
}経験豊富な開発者でも、CSSの問題に直面することがあります。ここでは、よくある問題とその解決方法を紹介します。
新しいCSSを追加したのに、サイトがまったく同じに見える。パニックになる前に、これは多くの場合、ブラウザのキャッシュです。
ブラウザは、サイトをより速く読み込むためにCSSファイルを保存（キャッシュ）します。つまり、新しいCSSの代わりに古いCSSが表示される可能性があります。
Ctrl+F5（Windows）またはCmd+Shift+R（Mac）を押して、ハードリフレッシュをお試しください。これにより、ブラウザはキャッシュされたバージョンを使用する代わりに、すべてのファイルの新しいコピーを取得するようになります。
WP Super CacheやW3 Total Cacheのようなキャッシュ・プラグインを使用している場合は、CSSを変更する際にキャッシュもクリアする必要があります。
キャッシュ・プラグインの設定でキャッシュをクリアするボタンを探してください。
このキャッシュをクリアするまで、あなたの変更は（ログインしている場合）あなただけに表示され、一般の訪問者には表示されないかもしれません。
CSSが機能していない場合、その問題はセレクタにあることが多い。
CSSは特殊性の階層に従っている。より具体的なセレクタは、一般的なセレクタよりも優先される。たとえば #sidebar p (ID+要素) のために設定されたスタイルを上書きします。 p (要素）。
スペルミスは見逃しやすい。それは .sidebar または.side-bar?ハイフンひとつですべてが変わる。
ブラウザの開発者ツールは、トラブルシューティングに非常に役立ちます。スタイルを設定しようとしている要素を右クリックし、[検査]を選択します。現在適用されているすべてのスタイルと、オーバーライドされているスタイルが表示されます。
について !important 宣言は、特殊性に関係なくスタイルを強制的に適用する：
p { color: blue !important; }
イライラしているときには魅力的ですが、!importantは長期的には頭痛の種になります。CSSの自然なカスケードが崩れ、複数の!important宣言が必要になってしまう「特異性戦争」につながります。
その代わりに、セレクタをより具体的にする。もし .content p が機能していない場合は .content .entry-content p より正確には
あなたのサイトは、どこでもよく見える必要があります。ノートパソコンではうまくいっても、モバイル画面では壊れてしまうかもしれません。
ブラウザの開発者ツールを使って、さまざまな画面サイズをシミュレートしてください。Chromeの場合、右クリックして「検査」を選択し、デバイス切り替えアイコンを探します。
CSSの変更、特に大規模な変更を行う前に、サイトをバックアップしてください。これは単なるアドバイスではなく、重要な保護策です。
Duplicatorのようなツールはバックアップを簡単にします。新しいバックアップを作成し、フルサイトプリセットを選択するだけです。
サイト固有のエラーに対する保護を強化するため、私は常にバックアップをクラウドに送信している。バックアップを作成する際に、多くのクラウドストレージ統合の中から1つを選択します。
このセーフティネットがあるということは、何か問題が起きてもすべてを復元できるとわかっているので、より自由に実験ができるということだ。
5分間のバックアップは、トラブルシューティングの時間を節約することができる。CSSのミスに気づいたら、このバックアップにアクセスして「復元」を押してください。
バックアップがクラウド上にあっても、Duplicatorがそれをダウンロードして復元します。そのエラーはなかったことになります！
CSSはWordPressテーマに組み込まれています。カスタマイザー（外観 " カスタマイズ " 追加CSS）、WPCodeのようなWordPressコードプラグイン、または子テーマを作成し、そのstyle.cssファイルを編集することによって、独自のカスタムCSSを追加することができます。
WordPressはその両方を使います。HTMLはページや投稿の構造を作成し、CSSはその構造をどのように見せるかを制御します。WordPressはあなたのコンテンツに基づいてHTMLを自動的に生成し、あなたのテーマはそれをスタイル設定するCSSを提供します。
WordPressのカスタムCSSの簡単な例をいくつかご紹介します：
p { font-size: 18px; }.button { background-color: #ff6b6b; }.wp-block-image { margin-bottom: 30px; }.element-to-hide { display: none; }.special-text { font-weight: 700; }テーマのビルトインオプションに満足しているなら、CSSを学ぶ必要はありません。しかし、基本的なCSSでも学ぶことで、サイトの外観をより自由にコントロールできるようになり、テーマのアップデートを待ったり開発者にお金を払ったりすることなく、視覚的な問題を修正できるようになります。
そう、CSSは、HTMLやJavaScriptと並んで、すべてのフロントエンド・ウェブ開発者が使うコア技術のひとつだ。CSSは、プロとしてウェブサイトを構築する人にとって必須のスキルです。
CSSは、プロの開発者だけが理解できる神秘的なコードではありません。CSSは、WordPressサイトの見た目を正確にコントロールできる実用的なツールなのです。
ここから色を変え、あそこで間隔を調整するなど、小さなことから始めるのがポイントです。慣れてくれば、より複雑な調整ができるようになります。
プロのWordPress開発者は皆、あなたが今いる場所からスタートしたことを覚えておいてください。彼らは実験し、間違いを犯し、徐々にスキルを高めていくことで学んでいったのです。
Duplicatorでバックアップをとっておきましょう。ワンクリックでエラーをロールバックしてくれるので、うまくいかないときはいつでも変更を元に戻してやり直すことができる。
ここにいる間に、他のWordPressガイドも気に入ると思う：
情報開示私たちのコンテンツは読者支援型です。つまり、あなたが私たちのリンクをクリックした場合、私たちはコミッションを得る可能性があります。私たちは、読者に付加価値をもたらすと信じる製品のみを推薦します。
