画像横並び

どうも。葉です。

WordPressを使用していると、
画像を横に並べてデータなどを
比較しやすく見せたいことってありますよね?

でも、CSSやhtmlがよくわからないから、
画像を横に並べる方法もわからないよ。。。
なんてお困りではないでしょうか?

そんな悩みを抱えている方に、
プラグイン「WP Canvas – Shortcodes」
を使って簡単に画像を横並び表示させる方法を
解説していきます。

1.プラグイン「WP Canvas – Shortcodes」のインストール

プラグインWPCanvas Shortcodes

まずは、今回紹介するプラグイン「WP Canvas – Shortcodes」をインストールをしていきます。

WordPress管理画面の左メニューより、【プラグイン→新規追加】の順でクリックします。

プラグイン→新規追加

次に、プラグインの検索窓に『WP Canvas – Shortcodes』と入力し、
エンターボタンを押します。

プラグイン検索WPCanvas Shortcodes

WP Canvas – Shortcodesの『今すぐインストール』をクリックします。

WP Canvas Shortcodes今すぐインストール

『プラグインを有効化』をクリックします。

プラグインを有効化

以上で、プラグインWP Canvas – Shortcodesのインストールは、完了です。
次に、このプラグインの使い方を解説していきます。

2.WP Canvas – Shortcodesの使い方

2-1.2枚を平行に並べてみる

まずWordPressにて、記事投稿画面に移動します。

投稿→新規追加

タブは、『ビジュアル』を選択します。

ビジュアル

エディタに[]が追加されているので、

【[]→Colums→1/2+1/2】の順でクリックします。

WP Canvas Shortcodes手順

すると、次のようなコードが自動的に入力されます。

画像横表示コード

この中の、『Sample Content』と記述されている場所に画像を挿入していきます。

画像挿入箇所

『Sample Content』をドラッグして、『メディアを追加』をクリックします。

画像を挿入

任意の画像を選択し、投稿に挿入をクリックします。

画像を挿入

すると、『Sample Content』があった場所に
次のように画像が挿入されます。

画像挿入完了

次に、2つ目の『Sample Content』にも同様に任意の画像を挿入します。

画像挿入

画像を挿入して記事を公開すると、次のように
2枚の画像を横に並べることができます。

2-1-1.画像を2枚横並びの完成です!

WordPress-SNS.png

WordPress-SNS.png

2-2.次のような画像横並びパターンが作成可能です

2枚を横ならいびだけでなく、次のようなパターンの横並び画像が作成可能ですよ。

  • 1/3+1/3+1/3
  • 1/3+2/3
  • 2/3+1/3
  • 1/4+1/4+1/4+1/4
  • 1/4+1/2+1/4
  • 1/2+1/4+1/4
  • 1/4+1/4+1/2
  • 1/4+3/4
  • 3/4+1/4

実際にそれぞれの表示がどのようになるかを確認してみましょう!

表示パターン:1/3+1/3+1/3

サンプル画像

サンプル画像

サンプル画像

表示パターン:1/3+2/3

サンプル画像

サンプル画像

表示パターン:2/3+1/3

サンプル画像

サンプル画像

表示パターン:1/4+1/4+1/4+1/4

サンプル画像

サンプル画像

サンプル画像

サンプル画像

表示パターン:1/4+1/2+1/4

サンプル画像

サンプル画像

サンプル画像

表示パターン:1/2+1/4+1/4

サンプル画像

サンプル画像

サンプル画像

表示パターン:1/4+1/4+1/2

サンプル画像

サンプル画像

サンプル画像

表示パターン:1/4+3/4

サンプル画像

サンプル画像

表示パターン:3/4+1/4

サンプル画像

サンプル画像

2-3.テキストと並べることも可能!

この他にも、画像とテキストを並べて表示することも可能です。

サンプル画像

右テキストです。左側にあるひまわりの画像は、とってもきれいですね。このように、テキストの横で画像の解説をすることで、わかりやすく、画像について解説することができますね(^^)

2-4.テキストだけ横に並べることも可能!

私は、左側のテキストだ!
左側こそ至高なり。

左テキスト左テキスト左テキスト左テキスト左テキスト左テキスト左テキスト左テキスト左テキスト左テキスト左テキスト左テキスト

左うっせ!
今の時代は右でしょ!

右テキスト右テキスト右テキスト右テキスト右テキスト右テキスト右テキスト右テキスト右テキスト右テキスト右テキスト右テキスト

みたいな感じです。笑

3.まとめ

プラグイン「WP Canvas – Shortcodes」を使って、画像を横に並べる方法を解説しました。
htmlやCSSがよくわからない素人の方でも簡単に画像を横並び表示することができます。

今回は、画像を横並びにする方法として紹介しましたが、
実際は、記事内で、2カラム、3カラムとカラム数を変更するのが
本来の機能です。

また、「WP Canvas – Shortcodes」には、
今回紹介した機能以外にも

  • Google Mapsの挿入
  • リンクボタンの表示
  • 利用者の声の表示
  • etc

など、数々の便利機能が入っています。
使いこなすことができれば、ブログのデザイン性をぐっと増すことができますよ。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします