WordPress投稿に複数列コンテンツを追加する方法(HTMLは不要)

WordPressの投稿に複数列のコンテンツを追加しますか?列を使用して、投稿やページの魅力的なレイアウトを作成できます.


新聞や雑誌などの従来の印刷メディアは、印刷のごく初期から複数列のレイアウトを使用しています。彼らの目標は、利用可能なスペースを経済的に利用しながら、ユーザーが小さいテキストを読みやすくすることでした。.

単一列レイアウトは、Webでより一般的に使用されます。ただし、マルチコラムグリッドは、コンテンツをハイライト表示し、スキャンと読み取りを容易にするのに役立ちます。.

この記事では、HTMLコードを記述せずにWordPressの投稿に複数列のコンテンツを簡単に追加する方法を紹介します.

WordPressの投稿とページに複数列のコンテンツを追加する

WordPressでの複数列コンテンツの追加–簡単な方法

WordPressで複数列コンテンツ、つまりグリッド列コンテンツを作成することは、デフォルトの機能として提供されるため、簡単になりました。新しいWordPressブロックエディターGutenbergには列ブロックが含まれています.

複数列のレイアウトを追加するには、新しい投稿を作成するか、既存の投稿を編集する必要があります。投稿編集エリアに移動したら、上部にある[追加]アイコンをクリックしてブロックを追加します.

次に、[レイアウト要素]タブにある[列]ブロックを選択する必要があります.

WordPress投稿に列ブロックを追加する

マウスカーソルが左の列でジャンプし、テキストのプレースホルダーが右の列に表示されます。.

列が投稿に追加されたWordPressのWordPressをブロックする

上のスクリーンショットでわかるように、Columnsブロックは最初は空の領域のように見えます。左にマウスを置くと、ブロックの境界線が強調表示されます.

また、投稿編集画面の右側の列にブロック設定が表示されます.

列がWordPressをブロック-2列

デフォルトでは、列ブロックは2つの列を追加します。右側のブロック設定から、追加する列の数を増やすことができます。 1つの行に最大6つの列を追加できます。.

列にさらに列を追加する

列をクリックして入力を開始するだけで、コンテンツを追加できます。キーボードのタブキーを使用して、次の列に切り替えることができます.

WordPress列にテキストを追加する

列にメディアやその他のコンテンツを追加する

テキストコンテンツに加えて、WordPress列に画像を追加してビデオを埋め込むこともできます.

列ブロックを使用すると、各列内にブロックを追加できます。マウスを列に移動するだけで、その中にある「新しいブロックを追加」アイコンが表示されます。 /を入力してからブロック名を入力してブロックを追加することもできます.

WordPress列に新しいブロックを追加する

選択したブロックが列内に表示されます。これで、コンテンツを追加できます.

WordPressに追加された画像ブロック

新しい列がデフォルトのTwenty Nineteenテーマでどのように表示されるかを次に示します。この例では、3つの列を使用しており、最後の列には画像が含まれています.

WordPress投稿の3列-プレビュー

画像とその横にテキストを追加するだけの場合は、列の代わりに「メディアとテキスト」ブロックを使用することもできます。この特定のブロックは、テキストの横に画像やビデオなどのメディアを表示するために特別に作成されています.

WordPressでメディアとテキストブロックを追加する

古いWordPressクラシックエディターで複数の列を追加する

WordPressをGutenbergにアップグレードしておらず、クラシックエディターをまだ使用していない場合は、グリッド列レイアウトを作成するための別のプラグインをインストールする必要があります。.

まず、Lightweight Grid Columnsプラグインをインストールしてアクティブ化します。詳細な手順については、WordPressにプラグインをインストールする方法に関するステップバイステップガイドに従ってください.

有効にすると、新しい投稿を作成するか、古い投稿を開いて編集できます。次に、ビジュアルエディターのツールバーから[列を追加]ボタンをクリックします。.

列アイコンの追加軽量グリッド列プラグイン

これで、最初の列を追加するためのポップアップウィンドウが表示されます。デスクトップ、タブレット、およびモバイルデバイスで、列がカバーできる領域をさまざまに選択できます.

たとえば、デスクトップグリッドの割合を50%に設定すると、列は半分の行をカバーします.

グリッド幅パーセント-軽量グリッド列

列の幅を設定するオプションはたくさんあります。5の間隔で5%から100%までです。ドロップダウンをクリックして選択できます。.

列幅オプション-グリッドの割合

その後、[コンテンツ]ボックスに列のコンテンツを追加し、[OK]ボタンをクリックして投稿に挿入する必要があります.

列にコンテンツを追加する-軽量グリッド列プラグイン

プラグインは、コンテンツに必要なショートコードを生成し、それを投稿エディターに追加します.

WordPress列に追加されたショートコードとコンテンツ

最初の列が追加されたので、プロセスを繰り返して列をさらに追加できます。行の最後の列については、[行の最後の列]チェックボックスを必ずオンにしてください.

WordPressの2列のショートコードとコンテンツ

その後、投稿を保存してプレビューできます。これは、Twenty Seventeenテーマを使用したテストサイトでの外観です.

27テーマの2つのWordPress列

この記事が、WordPressの投稿とページに列を追加する方法の学習に役立つことを願っています。また、WordPressの投稿で画像を簡単に配置する方法に関する簡単なガイドもご覧ください。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map