最高のオリジナル WordPress ブロック [概要]

Gutenberg WordPress エディターとブロックの使用方法に関するガイドをお届けします。次の 5.4 バージョンで予定されているブロックの変更に関するニュースをお読みください。あらゆる Web サイトで使用する必要がある、最も頻繁に使用されるブロックをすべて選択しました。リリースされたら、すべての機能の詳細を投稿します。

2018 年に WordPress が新しい Gutenberg エディターを発表したとき、私たちはそれに興奮しました。数年後の現在、大きな改善が見られます。 Gutenberg WordPress エディターは、Web サイトを作成するための優れたツールです。

Gutenberg エディター用のこの標準的な WordPress ブロックはすべて、最新のプロジェクトで完全に機能します。 無料 Citadela ワードプレスのテーマ。どのサイトでもご利用いただけますので、ぜひご利用ください アカウントを作成する 無料でダウンロードしてください。

と AitThemes Citadela プラグイン、会社、ビジネス、ブログ、または非営利 Web サイトのプレゼンテーション用に特定のコンテンツを作成できます。あるいは、新しいオンライン ビジネスを始めることもできます。 Web サイトの速度と Web サイトの編集のしやすさは最も重要な要素です。

ブロックとは何ですか?

Gutenberg WordPress ブロックは、Web サイトの構築単位です。それぞれに独自の特別な場所と目的があります。特定の種類のコンテンツに対して適切な WordPress ブロックを使用することが非常に重要です。

しかし、意図に合った最適なブロックをどのように見つけられるのでしょうか?

WordPress ブロックをより深く理解できるように、最も一般的なブロックの概要を用意しました。

テキストコンテンツブロック

Web サイトにテキスト コンテンツを挿入するために使用できるブロックがいくつかあります。複数のブロックを使用できます。 WordPress 5.4 からは新しい設定があり、テキストの色を変更できるようになりました。

• 段落
• 見出し
• 引用
• リスト
• プルクオート
• テーブル
• 詩
• フォーマット済み

これを除いて、長い段落に便利なクラシック ブロックを使用します。

ボタンブロック

Button ブロックを使用すると、WordPress で魅力的な CTA ボタンを作成することが非常に簡単になります。カスタム CSS を入力したり、HTML を理解する必要はありません。お気に入りの色の 16 進コードを入力して、ボタンの見た目を美しく、目を引くものにすることもできます (必須ではありません)。

ボタンブロックをどこで使用するか?

Web 訪問者が Web サイトにアクセスしたら、行動を起こすよう促したいと考えます。 CTA ボタンはそのためにあります。

一般に、WordPress ボタン ブロックを使用する必要がある場所は 3 つあります。

• ホームページ – ニュースレターへの登録、特別オファーの発見、無料トライアルへの登録など、目標の達成につながるアクションを完了します。
• 製品ページ – 製品ページのリード方法に応じて、1 つの CTA ボタン (購入) または複数のボタン (製品の詳細、購入、ウィッシュリストへの追加など) が存在する可能性があります。
• ブログ – CTA ボタンは、別の役立つ記事や製品/サービスの購入を参照することができます。

ボタンブロックの設定

右側のインスペクターでは、ボタンの設定を簡単に管理できます。

• スタイル
• 背景色
• 文字の色
• 国境

CTA ボタンに書かれるテキストは、Web 訪問者に取ってほしいアクションを促す、短くてわかりやすいものでなければなりません。

次期 WordPress 5.4 バージョン (2020 年 3 月 31 日リリース) のニュース

ボタンブロックは新しいボタンに置き換えられますs ブロック。
新しい名前から、1 つのブロック コンテナ内で 1 つずつ横にさらに多くのボタンを作成できることが推測できます。多くの場合、一度に 2 つの CTA (たとえば、「今すぐ購入」と「続きを読む」) を作成する必要があります。また、いくつかの新しいスタイルと色の設定も追加されます。塗りつぶしまたはアウトラインのスタイルを選択し、背景の色を選択します。単色背景またはグラデーション背景を選択できます。出発点としていくつかのプリセットを使用すると、より簡単に微調整を行うことができます。幸いなことに、既存のボタン ブロックはすべて動作するため、移行する必要はありません。

列ブロック

Columns ブロックは、新しいレイアウトへの扉を開く素晴らしい WordPress ブロックです。ページ要素の配置のオプションが増え、デザインの選択肢が増えます。

Columns ブロックの操作は簡単です。

• 追加のプラグインのインストールは必要ありません。
• コーディングは必要ありません。
• 必要なのは、きちんとしたデザインを作るためのちょっとしたセンスだけです。

WordPress ブロック エディターのリリース前に経験しなければならなかった以前の面倒な作業と比較して、Columns WordPress ブロックを使用するのは非常に簡単です。

Columnsブロックの使い方は？

上で示したように、Columns ブロックを使用するには 2 つの方法があります。

• テキストの流れを整理するため (ブログ投稿または通常のページ内)。
• 他のブロックを列に配置します。

ブログ投稿内などでテキストを列に整理すると、可読性が向上し、Web サイトがより透明でユーザーフレンドリーになります。

ただし、列ブロックを使用して画像、テキスト、ボタンなどの他のブロックをネストすると、選択したページのレイアウト全体が変更され、新しいデザインが作成されます。

列ブロックの設定

ページに列ブロックを挿入した後、必要な列の数を選択します。 2 ～ 6 列の任意の量を指定できます。その後、テキストを入力したり、各列にブロックを追加したりできます。

列ブロックのコンテンツの配置は、ブロック全体と個々の列に対して個別に設定できます。列の幅の割合を選択することもできます。こうすることで、ある列の幅を別の列よりも広くすることができます。

カバーブロック

ウェブサイトのヘッダーについて話しましょう。これは、誰かがあなたのホームページに来たときの第一印象を定義するセクションです。ちょっと重要なことですね。そして、Cover ブロックはどのページでもヘッダーとして使用できることをご存知ですか?

Cover は、Web 訪問者に好印象を与えるのに役立つ WordPress のコア ブロックです。特にそれが正しく使用されている場合、またはより適切に使用されている場合は、Web デザインにきちんと統合されています。

カバーブロックをどこに使用するか?

上で述べたように、Cover ブロックはどのページでも使用できます。さらに、Web サイトの上部に固定されている Web サイトのヘッダーとは異なり、ページのどこにでも追加できます。

カバーブロックは次のように使用できます。

• ホームページを含む任意のページのヘッダー。
• 商品ページで使用されているテキストで上書きされた画像またはビデオ。
• ブログ投稿内のコンテンツ区切り文字。

カバーブロック設定

Cover ブロックのセットアップは非常に簡単です。まず、背景として画像またはビデオを選択します。代わりに単色を使用することもできます。背景を設定したら、タイトルとサブタイトルを追加します。 

ブロックの配置を選択でき、もちろん、ブロック内のテキストの配置も選択できます。

カバー ブロックの位置合わせには次のオプションがあります。

• 左揃え
• 中央揃え
• 右揃え
• 幅広
• 全幅

私の個人的なお気に入りは、インスペクターで使用できるカラー オーバーレイです。カバー ブロックの背景画像を任意の色に調整できます。カスタマイズされたフォント サイズと色を組み合わせると、美しいコントラストを生み出すことができ、カバー ブロックの最終的な外観は驚くべきものになります。

WordPress 5.4 からは、単色の背景の代わりにグラデーションの背景を選択できるようになりました。

ギャラリーブロック

ギャラリー ブロックを使用して Web サイトで画像を紹介します。この標準の WordPress ブロックは、画像を保持し、Web サイトのどのページでも適切に表示できるように設計されています。他の WordPress ブロックと同様に、ギャラリー ブロックは Web サイトまたはブログ投稿内のどこにでも配置できます。

画像のアップロードは、メディア ライブラリ、コンピュータからファイルを選択するか、ドラッグ アンド ドロップ機能を使用して行うことができます。

ギャラリーブロックはどこで使用しますか?

Web サイトの種類に応じて、複雑なフォト ギャラリーや単純な画像プレゼンテーションを作成したい場合があります。ギャラリー ブロックは次の場合に使用できます。

• あなたのホームページ
• フォト ギャラリーのアルバムとして作成された個々のサブページ
• 製品ページ
• ブログ投稿

ギャラリーブロック設定

Gallery ブロック自体のさまざまな配置オプションとは別に、このブロック内には次のような興味深いオプションがいくつかあります。

• 画像が並ぶ列の数。
• 同じサイズ（最小の画像）に合わせて画像をトリミングします。
• ハイパーリンク: 別のページまたはメディア ファイルにリンクするオプションを提供します。

画像ブロック

画像ブロックは、Webサイトに画像を表示するためのブロックに他なりません。

それは正しい。ページに画像を追加したいだけの場合は、画像 WordPress ブロックを使用する必要があります。他の提示されたブロックと似ているかもしれませんが、単一の画像に最適な大きな違いがあります。

画像ブロックをいつ使用するか?

画像ブロックは、画像に表示されるオブジェクトが Web 訪問者にとって特に重要であり、次のことを行う必要がある場合に特に使用する必要があります。

• 特定の画像で Web 訪問者の注意を引きます。
• 画像をキャプション付きで表示します。
• 訪問者が議論された事項をよりよく理解できるようにインフォグラフィックを表示します。

画像ブロック設定

Image WordPress ブロックの最大の利点の 1 つは、画像サイズのオプションです。画像の隅を引っ張って画像のサイズを簡単に変更したり、ピクセル単位で固定サイズを選択したり、パーセンテージでサイズを定義したりできます。

もう 1 つの重要なオプションは、代替テキスト、キャプション、リンクの入力フィールドです。これらのフィールドはページ上の SEO において重要な役割を果たすため、使用することを強くお勧めします。

メディアとテキストブロック

メディアとテキスト ブロックを使用して作成できる、より高度なページ レイアウトに移りましょう。このコア WordPress ブロックを使用すると、美的かつコンテキストに合わせた方法で、メディアとテキストを並べて組み合わせることができます。

メディアとテキスト ブロックをどこで使用するか?

メディアとテキスト ブロックはブログ投稿内での使用に最適ですが、少し想像力を働かせれば他の場所でも使用できます。たとえば、画像とテキストを並べて使用して、優れた製品やサービスの概要を作成できます。

製品/サービスの概要として使用する場合は、メディアとテキスト ブロックのテキスト セクションにボタン ブロックを追加することを忘れないでください。このようにして、どのページでも素敵な CTA セクションをデザインできます。

メディアとテキストブロックの利点

• 文脈的に互いに適合する画像とテキストを統合します。
• ブログ投稿内で画像が誤って配置されるのを防ぎます。
• サイトの応答性を向上させます (「モバイルでスタック」機能を使用します)。

メディアとテキストブロックの設定

メディアとテキスト ブロックの設定を見ると、他のほとんどのブロックと比較して、かなりの数の配置オプションがあり、そのうちのいくつかはユニークであることに気づくでしょう。

このブロックの興味深い便利な設定は背景色です。互いに適合する画像とテキストの周囲の領域を色付けすることで、それらの関連性を視覚的に強調できます。

WordPress バージョン 5.4 (2020 年 3 月 31 日) からのリンクを挿入します。。リンク、メディア ファイル、または添付ページから選択できます。

テーブルブロック

テーブル ブロックは、バージョン 5.0 以降の WordPress ブロック エディターの導入後に WordPress がどのように改善されたかを示す例の 1 つです。以前は WordPress ウェブサイトにテーブルを挿入するにはプラグインが必要でしたが、今ではテーブル ブロックを使用するだけで済みます。

テーブルブロックをどこに使用するか?

表は、有用なコンテンツを適切に配置され、透明性のある方法で提供する上で大きな役割を果たします。確かに、ほとんどの Web サイトではテーブルが使用されています。以下に、さまざまな Web サイトでのテーブルの使用例をいくつか示します。

• データ比較
• 価格表
• 製品の技術詳細
• レシピ
• メンバーシップパッケージの概要

無料の WordPress コアの一部として Table ブロックがあるのは本当に素晴らしいことです。

テーブルブロックの設定

ページに Table ブロックを挿入するときは、テーブルの列と行の数を定義する必要があります。心配しないでください、この番号は固定されていません。いつでも行と列を追加 (または削除) できます。

次に、テーブルのスタイル (デフォルトまたはストライプ) を選択します。次に、配置とフォント スタイルに進み、最後に表に記入してから仕上げを加えます。

その他のオプションには次のようなものがあります。

• 背景色
• 固定幅のセル
• ヘッダ
• フッター
• リンク (表内のテキスト入力は他のページにリンクできます)

次はどのブロックを見たいですか?

誰でも無料で利用できる、非常に便利な WordPress コア ブロックのセレクションについて読んで楽しんでいただければ幸いです。次に読みたいブロック、または WordPress コアにまだ欠けている機能があると思われる点をお知らせください。読んでくれてありがとう！