ワードプレスの画像を横に表示する方法

ワードプレスの画像を横に表示しますか？ 時には、あなたのウェブサイト上で連続してあなたの写真を整列させたいことがあります。 この記事では、WordPressの画像を隣同士に表示する方法を紹介します。

ワードプレスの画像を横に表示する

ワードプレスで画像を横に表示するには、いくつかの異なる方法があります。 3つの簡単な方法を見てみましょう…

方法1: 左揃え

まず、WordPressの投稿やページに写真を追加します。 エディタの左上隅にある[メディアを追加]ボタンをクリックして、挿入する画像を選択します。

画像を選択したら、投稿に挿入ボタンをクリックします。

各画像をクリックし、左揃えを選択して画像を横に整列させます（これを行うにはビジュアルタブにいる必要があります）。

または、ポストに挿入ボタンをクリックする前に、メディアの挿入画面内の配置オプション（”添付ファイルの表示設定”の下）から”左”を選択するこ

画像が自動的に横に並んで表示されます。 結果は次のとおりです:

この方法には一つの欠点があります。 画像と同じページにテキストがある場合は、画像の右側にある空の領域がいっぱいになります:

方法2：カスタムCSSを追加

独自のカスタムCSSコードを画像に追加することで、webサイトでの表示方法を完全に制御できます。

まず、ページや投稿をテキストモード（ビジュアルモードではない）で編集していることを確認してください。

画像の<img>タグに、次のコードを追加します:

style= "float: left; margin-right: 15px;"

これにより、画像が各画像の右側に15pxのスペースで隣り合って配置されます。 以下に示すように、隣に表示するすべての画像にこのコードを追加する必要があります:

:

画像の右側にテキストが表示されないようにするには、代わりにこのコードを使用してください:

style= "display: inline-block; margin-right: 15px;"

今、あなたのテキストはあなたの画像の周りに折り返されません。 代わりに、次のようになります:

このメソッドの唯一の欠点は、コードを手動で追加する必要があることです。

方法3：Envira Galleryを使用する

Envira Galleryは、WordPressで画像を並べて表示する最も簡単な方法です。 隣同士に表示されたときにすべての画像が完璧に見えるように、それも自動的に小さなサムネイルに大きな写真を作ります。

開始するには、Envira Galleryプラグインをインストールして有効にする必要があります。

次に、単にEnviraギャラリーに移動します”WordPressで新しい画像ギャラリーを追加するには、新しい追加します。

単にあなたのイメージギャラリーの名前を追加し、Enviraギャラリー設定の下の画像セクションに必要な写真を追加します。

変更を保存するには、必ず公開ボタンを押してください。

今、あなたはショートコードといくつかの他の情報とダイアログボックスが表示されます。 これらのショートコードのいずれかをコピーしてページに貼り付けたり、画像を並べて表示したい場所に投稿したりするだけです。

(詳細なチュートリアルについては、WordPressでサムネイル付きの画像ギャラリーを作成する方法を確認してくださ）

それだ！ 画像がウェブサイトにどのように表示されるかの例を次に示します:

Enviraを使用して、さまざまな高さの画像を横に表示することもできます。 その上で私たちのチュートリアルでは、WordPressで石積みの画像ギャラリーを作成する方法をチェックしてくださ

この記事がWordPressの画像を隣に表示する方法を学ぶのに役立つことを願っています。 また、あなたのWordPressのギャラリーのための画像スライダーを作成する方法についての私達のガイドをチェックアウトすることができます。

あなたはこの記事が好きなら、より多くの無料のWordPressのチュートリアルのためにFacebookやTwitterで私たちに従ってください。