WordPress 列を使用してインパクトのあるページを作成する: 初心者からプロまで

WordPress の列は、通常の Web サイトのレイアウトから抜け出すのに役立つ、驚くほど柔軟なブロックです。 これらを使用すると、ページを雑誌のように魅力的に見せることができ、訪問者はあなたのサイトを長い間覚えておくことができます。 しかし、WordPress に列を追加するにはどうすればよいでしょうか?

1. デフォルトのエディターを使用している場合は、ページに移動して列ブロックを検索するだけです。
2. ただし、PostX を使用している場合は、行ブロックを追加し、レイアウトから任意の列スタイルを選択し、大量のオプションを使用してカスタマイズします。

まだ混乱していますか？ 心配しないで; WordPress を初めて使用するか、使用経験があるかは関係ありません。 ぜひ、柱を使用することの素晴らしさを発見してください。 それでは最後まで読んでみましょう。

WordPress のコラムとは何ですか?

WordPress では、「列」という用語は、コンテンツを並べて表示し、視覚的な魅力と読みやすさを向上させるブロックを指します。 簡単に言うと、コラムは、WordPress Web サイトの投稿やページ上でコンテンツを整理したり、複雑な情報を表示したりするための実用的かつ効率的な方法です。 幸いなことに、WordPress サイトに列を追加する方法は複数あり、そのプロセスは簡単です。

デフォルトの Gutenberg エディターには列ブロックが付属しています。 ただし、高度なカスタマイズ オプションが必要な場合は、追加のブロックを提供する PostX などのプラグインを使用できます。

方法 1: デフォルトのエディターを使用して WordPress に列を追加する方法

簡単な方法、つまりデフォルトの WordPress 列ブロックから始めましょう。

ステップ 1: ログインして投稿/ページを作成する

最初のステップでは、WordPress ダッシュボードにログインし、上部にある「+ 新規」ボタンを見つけます。 次に、カーソルを目的の場所に移動し、好みに基づいて投稿またはページを追加します。

ステップ 2: 列ブロックを追加する

ここで、「ブロックの追加」オプションまたは「+」ボタンをクリックすると、検索ボックスが表示されます。 次に、検索ボックスに「列」と入力すると、列ブロックのアイコンが表示されます。

ステップ 3: 列の数を選択する

列ブロックを追加した後、バリエーションを選択するように求められます。 たとえば、100、50/55/、33/33/33 など、6 つのバリエーションがあります。50/50 列に進みましょう。

ステップ 4: 項目を列に追加する

WordPress 列を追加する実際のタスクが完了しました。 次に、ニーズに基づいてカスタマイズします。

ランチとディナーのメニューに 2 つの列を追加する必要があると考えてみましょう。 それでは、それらを追加しましょう。

1. 最初の列に見出しと段落を追加する

まず、最初の列に移動すると、「+」ボタンが表示されます。 そこにカーソルを置くと、「ブロックを追加」というテキストが表示されます。

ここをクリックして「見出し」ブロックを検索します。

ここで、見出しに入力する必要があるものをすべて入力します。 その後、「Enter」を押すだけで新しいブロックが作成されます。 見出しの下に書きたい内容を追加します。

1. 見出しにスタイルを追加する

キャッチーに見えるようにカスタマイズできるようになりました。 たとえば、WordPress の列幅、テキストの色、背景色を変更できるなど、さまざまなオプションがあります。 とりあえず、背景色を追加していきます。 そのためには、「スタイル」アイコンをクリックしましょう。

ブロック設定から「背景」をクリックすると、色のオプションが表示されます。 単色とグラデーションの両方があります。 グラデーションを選択し、電気草の色を選択しています。

次に、2 番目の列にも同じことを行って、夕食の項目を追加しましょう。

1. 全体的な背景色を追加する

私たちの任務はほぼ完了しました。 最後の仕上げとして、列全体に別の背景色を追加します。 そのためには、両方の列を選択する必要があります。 次に、スタイル、背景の順に移動し、色を選択します。

淡い海の色を選びました。 それでは、最終的な出力を見てみましょう。

こちらもお読みください: WordPress 背景ビデオ: 2 つの異なる方法で追加する

方法 2: PostX を使用して WordPress に列を追加する方法

WordPress に列を含める上記のプロセスは非常に簡単ですが、最終的な出力はそれほど満足のいくものではない可能性があります。 これは、デフォルトのエディターでは列をカスタマイズするためのオプションが非常に限られているためです。

心配しないで; その場合、PostX が救世主となる可能性があります。 PostX は、WordPress 用の高度にカスタマイズ可能な列も提供します。 以下のセグメントでは、その方法とカスタマイズ ガイドを学びます。

ただし、始める前に、PostX を使用していない場合は、リンクされたガイドを確認し、PostX プラグインをインストールしてアクティブ化してください。

PostX Pro を入手して、すべてのエキサイティングな機能をロック解除し、素晴らしい Web サイトを作成しましょう

ステップ 1: ログインしてページ/投稿を作成する

前のステップと同様に、WordPress にログインし、上部にある「+ 新規」ボタンを探します。 そこにマウスを置いて、新しいページ/投稿を作成します。 または、必要に応じて、以前の投稿を編集することもできます。 それはあなたの好みによります。

ステップ 2: 行ブロックを追加する

このステップで、「+」ボタンをクリックすると、検索ボックスが表示されます。 ここで、検索ボックスに「行」と入力すると、行ブロックのアイコンが表示されます。 ブロックの名前は Row ですが、Row ブロックと Column ブロックを組み合わせたものです。

ステップ 3: レイアウトを選択する

そこには 10 個のプリセット レイアウトがあります。 ここで、列の数を選択するように求められます。 好みに応じていずれかを選択してください。

ここで、必要に応じて列番号を変更し、レイアウトをカスタマイズできます。 レイアウトは7種類あります。 要件に応じていずれかを選択できます。

現時点では、デフォルトのレイアウトを使用します。 次のステップに進みましょう。

ステップ 4: 列をカスタマイズする

列はすでに追加されています。 次に、それをカスタマイズする必要があります。 3 つのゲーミング マウスを 3 つの列に表示するとします。 やり方を見てみましょう。

1. 画像を追加する

まず、最初の列の「+」アイコンをクリックし、検索ボックスで「画像」を検索します。

次に、画像をクリックして、「アップロード」ボタンをクリックします。 (画像がすでにメディア ライブラリに追加されている場合は、メディア ライブラリをクリックして列に追加できます。) 次に、特定の画像を選択し、「開く」をクリックします。

1. 画像の寸法を設定する

アップロードされた画像は WordPress にとって適切なサイズではない可能性があります。 その場合は、「画像寸法」オプションを見つけて、幅と高さのボックスに適切な画像寸法を入力します。

1. 画像タイトルを追加

次に、イメージに名前を付ける必要があります。 これを行うには、別のブロックを作成する必要があります。 画像ブロックをクリックして Enter をクリックします。 すると新しいブロックが出現します。

次に、画像の名前を入力します。 最初のイメージは Razor V3 マウスです。

1. 最初の列に背景色を追加する

よりキャッチーにするには、最初の列をクリックして「背景とラッパー」オプションを検索します。

次に、好みに応じて単色/グラデーションカラーを追加します。

1. 2行目と3行目をカスタマイズする

まったく同じプロセスに従い、2 行目と 3 行目を特定の画像とタイトルでカスタマイズします。

1. コンテンツの最大幅を設定する

ここで、画像の位置が背景に対して適切に整列していない可能性があります。 その場合は、「Content Max-Width」オプションを見つけて、それに応じて変更します。 適切な位置合わせを行うために 766 のままにします。

1. プライマリ行ブロックの背景を追加する

これが最後のステップです。 最終的な外観を与えるために、行列の背景を追加します。 そのためには、「行」列を選択し、「背景とラッパー」を検索します。 それをクリックして、任意の単色/グラデーション色を選択します。

ついに完成しました。 それでは、最終的な出力を確認してみましょう。

こちらもお読みください: WordPress Shape Divider: セクションを分割する技術をマスターする

最後の言葉

これで、WordPress の列について混乱することがなくなりました。 列ブロックを追加し、デフォルトの WordPress 列ブロックと PostX 行ブロックの両方でカスタマイズする方法についてはすでに説明しました。 練習する時間です。

それでは、ためらわずに列を試して創造性を発揮してください。 あなたのウェブサイトを、視聴者を魅了するだけでなくインスピレーションを与える傑作に変えましょう。

PostX Pro を入手して、すべてのエキサイティングな機能をロック解除し、素晴らしい Web サイトを作成しましょう