WordPressで画像を並べて整列させる方法

画像の整列は、WordPressブロガーにとって常に苦労しています。

この投稿は、エディタでの画像の配置や配置をいじることを認めるよりも多くの時間を費やした人のためのものです。

画像を整列させるための二つの最良の方法

画像を隣り合うように配置するために考慮すべき二つの技術があります。 私はそれぞれを使用する方法だけでなく、長所と短所が含まれて共有します。

画像をギャラリーに揃える

画像を並べて配置する最も信頼性の高い方法は、WordPressのギャラリーを使用することです。

これまでにギャラリーを作成したことがない場合は、このチュートリアルに従ってギャラリーを作成します。

トリックは、画像の中型バージョンを使用し、あなただけの二つの画像を含めている場合でも、二つの列を選択することです。 結果は次のようになります:

ギャラリーの例のスクリーンショット

投稿に配置する画像とは異なり、ギャラリーには画像を隣同士に保つ特別なHTMLがあります。 この構造により、画像を行/列に整列させるのが簡単で手間がかかりません。

列のショートコードで画像を配置

あなたのサイトに新しいプラグインを追加して気にしない場合は、列のショートコードは、画像を整列させるための素晴ら

列ショートコードプラグインページのスクリーンショット

列ショートコードは、新しいメニューであなたのサイトをいっぱいにしないもの素晴らしいプラグイン 実際には、それはあなたの管理者ダッシュボードに追加する唯一のものは、エディタの上にこの便利なボタンです。

列のショートコードで追加されたボタン

列のショートコードで追加されたボタン

それがどのように動作するかを示すために、私は三つの画像の単一の行を作成します。

カラムのショートコードの使い方

最初のステップは、エディタの空の行にカーソルを置くことです。 次に、ショートボタンをクリックして、列のオプションを選択します。

列のショートコードを追加する方法を表示する
三つの列を持つ行を作成します。

この手順を繰り返して2番目の1/3列を追加し、次にもう一度繰り返しますが、今回は3分の1(最後)オプションを使用します。 結果は、エディタに追加された次のショートコードです。

エディタのショートコード

あなたが前にショートコードを使用したことがない場合は、最初にこのチュートリアルに従うことをお勧めします。

あなたが見ることができるように、各ショートコードは、開始タグと終了タグを持っています。 今、あなたはこのように、各ショートコードの中に画像を置くことができます:

エディタ内のショートコード内の画像

エディタのショートコード内の画像

は混乱のように見えますよね?

これは、ショートコードがエディタで画像のスタイルを設定できないためですが、問題ではありません。 サイト上でそれらを表示すると、次のように列にきれいに整列します:

列に配置された画像の例

列に配置された画像の例

列のショートコードは、ギャラリーに比べて

ショートコードは、ギャラリーのようなエディタでうまく表示されず、で動作するように たとえば、ギャラリーはすべての画像を強制的にリンクさせます:

  • メディアファイル
  • 添付ファイルページ
  • Nothing

columnsプラグインを使用すると、画像にカスタムUrlと異なるタイプのページへの各リンクを設定できます。

列を混在させることもできます。 たとえば、1/3列のショートコードを持つ画像の隣に2/3ショートコードに1つの画像を配置することができます。

配置オプションを使用しない理由

これらのメソッドは、すべての頭痛なしで必要なレイアウトを生成します。

ワードプレスのギャラリーは、行に画像を整列させる最も簡単で簡単な方法です。 しかし、列のショートコードは、より多くの柔軟性を提供する良い選択肢です。

画像を新しいHTML構造に配置するため、どちらも非常にうまく機能します。 HTMLは関係なく、それらを表示するために使用される画面の、サイドバイサイドレイアウトを維持することが可能になります。

何か見逃したことはありますか? 何か質問はありますか? 以下のコメントを投稿してください。

ベン-シブリー
ベン*シブリー
ベン*シブリーは、WordPressのテーマデザイナー&開発者であり、競争のテーマの創設者です。

Leave a Reply