WordPressグローバルスタイルとグローバルスタイルのバリエーションへのシンプルなガイド

この投稿では、サイト編集シリーズを継続しています。今日、私たちはWordPressのグローバルスタイルに深く掘り下げています。 Global Stylesは、完全なサイト編集で導入されたWordPressの比較的新しい機能です。スタイリングルールの単一セットを使用して、このシステムを使用すると、サイト全体の美学とレイアウトを設定および制御できます。

WordPressグローバルスタイルを使用すると、個々のブロックやページのスタイルを変更するのではなく、単一のインターフェイスからグローバルなタイポグラフィ、色、レイアウトを設定できます。 Global Stylesインターフェイスはカスタマイザーに取って代わり、現在、WordPressブロックテーマのスタイルをカスタマイズする主要な方法です。

WordPressカスタマイズの進化：カスタマイザーからグローバルスタイルへの旅

あなたがWordPressの初心者なら、より強力なカスタマイズに向けてWordPressの重要なマイルストーンのタイムラインを見るのは興味深いかもしれません：

1. WordPress 3.4、2011：カスタマイザーによる早期カスタマイズ
   WordPressは、2011年にリリースされたバージョン3.4でカスタマイザーを導入しました。このツールは、ユーザーにデザイン変更のライブプレビューを提供し、色、フォント、レイアウトオプションなどの基本要素を調整できるようにしました。当時はカスタマイズのための強力なツールでしたが、カスタマイザーは依然としてその機能が制限されていました。
2. WordPress 5.0、2018：WordPress Full Site Editing（FSE）へのシフト
   Gutenbergブロックエディターは、WordPress 5.0のリリースで2018年に発売されました。この主要な更新により、ユーザーはヘッダーからフッターまで、ブロックを使用してサイト全体を編集できました。このシフトは新しいサイトの設計機能を開きましたが、より高度なカスタマイズツールの必要性を強調しました。この期間をフルサイトの編集へのシフトの始まりと考えてください。
3. WordPress 5.9、2022：WordPressグローバルスタイルの紹介
   最後に、WordPress 5.9は、フルサイトの編集機能の一部としてグローバルスタイルを導入しました。この新しいインターフェイスを使用して、ユーザーはタイポグラフィ、色、レイアウト、およびブロックスタイルをグローバルに管理できます。グローバルスタイルは、ブロックテーマのカスタマイザーに取って代わり、その主な目標は、ユーザーがサイト全体でまとまりのある外観を簡単に維持できるように、すべてのコントロールを集中化することでした。
4. WordPress 6.0+、2023以降：新しい標準としてのグローバルスタイル
   2023年に展開されたWordPress 6.0によって、グローバルスタイルがブロックテーマをカスタマイズする標準になりました。タイポグラフィコントロール、グラデーションオプション、および高度なレイアウト設定のすべての改善により、サイト全体のカスタマイズをさらにサポートしました。

グローバルスタイルは、ユーザーが最小限の労力でサイトの外観を変更する信頼できる方法を提供するため、WordPressデザインエクスペリエンスの真の基礎となっています。グローバルなスタイルに詳細に飛び込む前に、いくつかの基本的な要件について説明しましょう。

したがって、WordPressグローバルスタイルにアクセスするには、WordPress 5.9以上が必要です。この投稿では、WordPressバージョン6.7.2を使用します。別のバージョンを使用している場合、インターフェイスと機能にある程度の違いがあることに気付くかもしれません。

次に、ブロックテーマを使用する必要があります。このチュートリアルでは、フルサイトの編集を完全にサポートする無料のMotopress WordPressスターターテーマであるPrimeを使用します。私たちの公式ウェブサイトまたはwp.orgからPrimeをダウンロードできます。

2024年10月30日

モダンなワードプレスを始めるための20の最高のFSEテーマ

2024年6月4日

Raft vs Ollie vs Prime：WordPress FSEの最良のブロックテーマは何ですか？

グローバルスタイルを見つける

Adminメニューの外観>エディターに移動して、グローバルスタイルの設定を見つけます。メイン画面がロードされるのを待ち、表示されるページを選択します。右上隅にあるスタイルアイコンをクリックします。これは、半分入った円に似ています。

これにより、Webサイトのグローバルスタイルパネルが開きます。次に、編集スタイルアイコン（鉛筆）をクリックして、タイポグラフィ、色、背景、影、レイアウト、ブロックなどのカスタマイズ可能な要素のリストを開きます。

PrimeやTwenty25のような一部のテーマには、さまざまなスタイルのバリエーションが含まれています。スタイルのバリエーションを遊び場と考えてください。

これらを使用すると、さまざまなフォント、色、タイポグラフィの設定、間隔、ブロックスタイルなどを実験できます。スタイルのバリエーションは、ブロックテーマの代替バージョンであり、簡単に新鮮な外観に交換できます。 Browse Stylesオプションが表示されていない場合は、心配しないでください。テーマ著者が作成した事前定義されたカラーパレットにアクセスできます。

タイポグラフィ

それでは、タイポグラフィを詳しく見てみましょう。タイポグラフィメニューをクリックして、フォント設定にアクセスします。あなたはできる：

• リストを使用してフォントを変更します。
• 変更のライブプレビューで、フォントのサイズ、外観、およびラインの高さを調整します。
• 3ドットメニューを使用して変更をリセットします。

各アイテムを使用すると、テーマのオプションのリストを使用してフォントを変更できます。また、フォントのサイズ、外観、ラインの高さなど、タイポグラフィの設定を変更することもできます。主な利点は、変更を作成するときにライブプレビューを取得することです。結果が気に入らない場合は、3ドットメニューを開き、変更をリセットします。

リンクの場合、テキストと同じ設定がありますが、ストリケスルーとアンダーラインを含む追加の装飾オプションがあります。

一部の要素には追加の設定があります。たとえば、見出しを使用すると、見出しレベルを選択できます。文字間隔を使用すると、文字間のスペースを制御できます。さらに、すべてのキャップ（AB）、最初の文字が大文字（AB）、およびすべての小文字（AB）などのテキスト変換を選択できます。

次に、画像とカバーブロックで使用されるキャプションのタイポグラフィを調整できます。

最後になりましたが、ボタン。ボタンにはテキストが含まれているため、他のテキストベースの要素と同じようにタイポグラフィの設定を簡単に調整できます。

色

サイトの色をカスタマイズするには、色パネルを開きます。最初に表示されるオプションは、パレットです。パレットパネ​​ルはデフォルトで固体に開き、テーマとデフォルトの色を編集したり、カスタムの色を追加したりできます。テーマの色はテーマのデザイナーによって定義され、サイト全体で使用されます。デフォルトの色は、ページや投稿を編集するときにブロックカラー設定に表示されます。

また、サイトのパレットにカスタムカラーを追加して、色設定でそれらを使用できるようにすることもできます。 1つを追加するには、カスタムの下の +ボタンをクリックしてから、カラーピッカーを使用してシェードを選択するか、16進数、RGB、またはHSL値を入力します。デフォルトでは、新しい色には色1とラベル付けされていますが、クリックして名前を変更できます。 [完了]をクリックして保存します。

カスタムカラーに満足していない場合は、削除してやり直してください。

グラデーションタブに切り替えて、グラデーションカラーオプションを追加することもできます。ソリッドカラーのように、テーマ、デフォルト、カスタムグラデーションを設定できます。グラデーションをクリックすると、カスタマイズできるスライダーが開きます。線形勾配は、直線に沿って2色の間に滑らかな遷移を作成します。放射状勾配は中心から始まり、外側に伸びます。 Linearを選択すると、ボックス内に値を入力して勾配角度を手動で調整できます。

もう1つのオプションは、Duotoneフィルターです。2トーンの色効果は、ユーザーが画像の画像に適用してブロックをカバーできます。

パレットのセットアップが完了したら、色パネルに戻ることができます。パレットセクションの下に、次のような色を編集するオプションがあります。

• 文章
• 背景
• リンク
• キャプション
• ボタン
• 見出し

背景と影

あなたのウェブサイトに背景画像を追加することが別のオプションであることをご存知ですか？ [背景画像の追加]ボタンをクリックして、画像をアップロードするか、メディアライブラリから画像を選択してください。もちろん、リセットをクリックして一度にすべてを取り除くことができます。

その後、影に進みます。さまざまなコンテンツ作品とコンテンツの組み合わせの場合、ドロップシャドウは、よりダイナミックな外観を作成するための優れたデザインツールです。このセクションで自由に使用できると、デフォルトのスタイルを変更したり、カスタムシャドウを作成したりできます。変更を行った後、適切な名前を付けることができます。

レイアウト

レイアウトパネルを使用すると、サイトのコンテンツ領域の幅を制御できます。

寸法では、入力フィールドを使用して幅を調整できます。コンテンツは、アライメントが「なし」に設定されている場合、ブロックの幅を制御します。幅の広い幅は、アライメントが「幅」に設定されると、ブロックの幅を調整します。

要素の周りのスペースであるパディングを変更することもできます。上、下、左、右の4つのパディングエリアがあります。デフォルトでは、これらはリンクされています。つまり、調整は4つの側面すべてに等しく適用されます。ロックアイコンをクリックすると、個別に調整できます。

ブロック間隔設定は、ネストされたブロック間のスペースを制御します。すべてがうまく見える場合は、これらの設定をそのまま残すことができます。

2025年2月17日

WordPressブロックのテーマをエクスポートする方法：ステップバイステップガイド

2025年1月27日

WordPressブロックテーマを作成する方法（コードなし）

特定のブロックのスタイルを変更します

最後に、ブロックを見てみましょう。ブロックセクションには、サイト全体でカスタマイズできるすべての使用可能なブロックが一覧表示されます。ここで行う変更は、個々のブロックを個別にカスタマイズしない限り、サイト全体のブロックのすべてのインスタンスに影響します。利用可能なカスタマイズオプションは、ブロックによって異なります。それぞれを調べて、変更できるものを確認してください。

変更を確認する方法

変更を確認するには、WordPressスタイルの本（アイアイコン）を使用してください。スタイルブックプレビューウィンドウには6つのタブが含まれており、グローバルスタイルの変更を適用した後に異なるブロックがどのように見えるかを示しています。ブロックプレビューをクリックすると、そのブロックのグローバルスタイルに直接、さらなるカスタマイズが行われます。

追加のカスタマイズ

CSSスキルがあり、追加の調整を行いたい場合は、CSSウィンドウを開きます。

1. 右上隅の3ドットメニューをクリックします。
2. 追加のCSSを選択します。
3. 提供されたボックスにカスタムCSSを入力します。

この機能により、スタイルをさらに細かく制御できます。

デフォルトのスタイルにリセットします

デフォルトの外観に戻す場合は、リビジョン機能を使用します。

1. スタイル設定で、右上隅の3ドットメニューをクリックします。
2. [スタイルのリセット]を選択します。

変更が保存されると、リビジョンオプションを使用すると、スタイル設定の以前のバージョンを復元できます。

WordPress 6.7の新しいもの

これで、ボーナスとして、WordPress 6.7以降で利用可能なグローバルスタイルのいくつかの強化をすばやく調べてみましょう。

6.7バージョンであるため、デザインツールに接触しているため、ブロックが増えているため、境界線、背景、影、間隔コントロールがサポートされています。たとえば、グループブロックを使用すると、シャドウエフェクトにアクセスできるようになり、コンテンツブロックは背景画像をサポートしています。

もう1つの大きな改善は、グローバルスタイル内でカスタムフォントサイズプリセットを直接作成、編集、削除する機能です。この新機能は、まとまりのあるデザインを維持するために、ウェブサイト全体で一貫したタイポグラフィを維持するのに役立ちます。

さらに、新しいUIコントロールがあります。より正確にするために、ユーザーは詩、引用、投稿コンテンツなど、より多くのブロックに背景画像を追加できるようになりました。これは、カスタムCSSを適用しなくても、視覚的に魅力的なセクションを作成できることを意味します。さらに、WordPress 6.7は、視差のような効果を作成するのに最適な、固定されたバックグラウンドオプションを導入します（ユーザーがスクロール中に画像を維持できる効果）。

これらの更新により、WordPress 6.7を使用すると、コードを書くことなく、適切に設計されたWebサイトを簡単に作成できます。

WordPressグローバルスタイルに関する結論

要約すると、WordPressのグローバルスタイルは、手を汚すことなくサイト全体で一貫したプロフェッショナルな外観を作成したいユーザーにとって、真のアップグレードです。 WordPressグローバルスタイルを使用すると、タイポグラフィ、色、レイアウト、ブロックスタイルを1か所で制御できます。スタイルのバリエーションを切り替え、個々の要素を調整し、カスタムカラーまたはグラデーションを追加できます。必要な場合は、スタイルリビジョンを使用して変更をリセットしたり、以前の設定を復元したりできます。グローバルスタイルのWordPressを使用して経験を共有し、この投稿が役立つと感じた場合のようにヒットしてください！

FAQ