Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

新しい機能をWordPressサイトの グーテンベルグ・ブロック一貫性のあるカスタムスタイルを提供するEssential Blocksプラグインはとても便利なツールです。毎回一からカスタマイズすることなく、簡単にグローバルスタイルの設定を行うことができ、ウェブサイトのデザインをより一貫性のある効率的なものにします。この記事では、Essential Blocksプラグインを使ってグローバルスタイルを設定し、Gutenbergブロックに適用する方法を紹介します。

画像[1] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

Essential Blocksプラグインの紹介

Essential Blocks プラグインWPDeveloperによって開発され、Gutenbergエディタ用に設計されたEssential Blocksは、ユーザーが様々なレイアウトやデザインを簡単に作成できる豊富なブロック要素セットを提供します。初心者であろうとプロの開発者であろうと、Essential Blocksを使えば簡単に、ウェブサイトのコンテンツをよりリッチで魅力的なものにすることができます。

このプラグインには、インフォボックス、価格表、プログレスバー、イメージギャラリーなど、カスタマイズ可能なブロックエレメントが含まれています。直感的なドラッグ&ドロップ操作で、Essential Blocksはコードを書かずに複雑なページデザインを数分で完成させることができます。

画像[2] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

1.エッセンシャルブロックのグローバルスタイル設定を行います。

グローバルスタイルは、Essential Blocksプラグインで設定する必要があります。以下の設定は、あなたのウェブサイト上の複数のページや投稿に一貫したスタイルを適用するのに役立ち、時間を節約し、ユーザーエクスペリエンスを向上させます。

ステップ1:白紙のページを開く

WordPressのダッシュボードで、新しい空白のページを作成します。このページでEssential Blocksプラグインのグローバルスタイル設定を行います。

画像[3] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

ステップ2:エッセンシャル・ブロックの設定

  • ページエディターの右上にある エッセンシャル・ブロック アイコン
画像[4] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法
  • 下にスクロールして ブロック・デフォルト・メニューをクリックし、「グローバルスタイル設定」オプションを選択します。
画像[5] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

ステップ3:インフォボックス・ブロックのスタイルを設定する

  • グローバルスタイル設定で インフォボックス(infobox)ブロックをクリックします。をクリックしてください。 インフォボックス設定ウィンドウが表示されます。
画像[6] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

複数のスタイルオプションが表示され、必要に応じて調整できる:

画像[7] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法
  • クリック可能な設定インフォボックスをクリック可能なアイテムにするかどうかを選択できます。
  • ボタン設定ボタンは保持、削除が可能で、同時にボタンのスタイルも調整できる。
  • コンテンツアライメント: アライメント オプションでは、メッセージ・ボックス内のコンテンツの位置を設定できます。
  • メディア・スタイル適切なインフォボックス・アイコンを選択し、その色をカスタマイズします。
  • タイトル・スタイル: タイトル・スタイル タイトルの色を設定し、希望のフォントを選択します。
  • 字幕スタイルを通して コンテンツ・スタイル字幕の色とフォントスタイルを設定できます。
  • ボタンスタイルボタンの文字色を設定します。
  • 背景設定インフォボックスの背景色を調整し、適切な マージン 歌で応える パディング.
画像[8] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

すべてのカスタマイズが完了したら セーブ(保存)ボタンで現在のスタイル設定を保存します。

2.Gutenbergエディタでカスタムブロックを使う

一度設定すると、カスタムスタイルはすべてのエッセンシャルブロックに適用されます。次に、このカスタムスタイルをGutenbergページエディタに適用する方法を紹介します。

ステップ1:Gutenbergエディタにインフォボックス・ブロックを追加する

  • Gutenbergエディターを開き、インフォボックスを挿入したい場所をクリックします。 + ボタン。
画像[9] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法
  • 検索ボックスに入力 インフォボックスのカスタマイズされたスタイルを選択する。 インフォボックス・ブロック.
画像[10] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法
  • カスタマイズされたインフォボックス・ブロックはすぐにページに挿入され、設定されたスタイルで表示されます。
画像[11] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

ステップ2:さらなるカスタマイズと保存

ブロックをさらにカスタマイズしたい場合は、Gutenbergエディタのサイドバーから行うことができます。必要に応じてテキスト、色、その他のスタイルを変更してください。

画像[12] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

すべての変更が完了したら セーブ(保存)ボタンをクリックして、すべての設定が保存・適用されたことを確認します。

画像 [13] - Essential Blocksを使ってGutenbergブロックのグローバルスタイルをカスタマイズする方法

3.グローバル・スタイルの利点

エッセンシャルブロックで設定したグローバルスタイルは、サイト全体の一貫性を保つのに役立つだけでなく、編集のたびにスタイルをリセットする手間を省くこともできます。カスタムEssential Blocksブロックをページや投稿に挿入するたびに、設定したグローバルスタイルが自動的に適用され、一貫したデザインを維持することができます。

結語

この記事のチュートリアルで、Essential Blocksプラグインを使ってグローバルスタイルを設定・適用する方法を学びました。Gutenbergブロックのカスタマイズであれ、ページ間でのスタイルの再利用であれ、WordPressウェブサイトの見た目を管理し最適化するのは簡単です。これらのヒントが、ウェブサイトのデザイン効率を向上させ、すべてのページで一貫性のあるスタイリングを実現するのに役立つことを願っています。

WordPressに関連するチュートリアルや情報については、以下を参照してください。光子ゆらぎネットワーク最も充実したWordPressチュートリアルと、最もアクティブなWordPress Exchange コミュニティ.


お問い合わせ
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
カスタマーサービス WeChat
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨询:1025174874
Eメール:info@361sale.com
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
この記事はEarly Seasonが執筆しました。
終わり
好きなら応援してください。
クドス12 分かち合う
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし