画像を横並びで表示する時に便利なプラグイン WP Canvas – Shortcodes（Shortcodes by Angie Makesに変更）

毎月1回行っている、八王子WordPressもくもく会ですが参加者の都合などにより最近では夜も月に1回開催するようになっています。その参加者に以前「画像を横並びで表示したいがレイアウトががたつく」というお話を聞きました。HTMLでcssなどを使えばうまくできるのでは？という感じの話をしてたのですが、その方が再度もくもく会にでられたときに、プラグインを使ってうまく表示できるようになったと教えてくれました。
面白そうでしたので私もさっそく試してみました。

※ 現在はこのプラグイン名が Shortcodes by Angie Makes に変更されたようです。使い方は変わらないようですので、以下の文章のWP Canvas – Shortcodes を Shortcodes by Angie Makes と読み替えてご利用ください。

WP Canvas – Shortcodes をインストールする

WP Canvas – Shortcodes をインストールします。

ダッシュボード　プラグイン＞新規追加 をクリック

WP Canvas と入力してリターン

似たような名前のプラグインがたくさんあるので、この WP Canvas – Shortcodes の 今すぐインストール をクリック

プラグインを有効化 をクリック

これでインストールが終了です。このプラグインをインストールすると

ビジュアルエディターの上部に

この２つの部品が追加されます

画像を２つ横並びにしてみる

アップロードしたままの大きな画像を２つ並べたい場合は

画像をメディアを追加 から指定してから、ハンドルを持って、

縮めたりするかと思いますが、このように縦横比が違う画像だと

上部でそろえたいのですが下部でそろってしまいます。この辺はcssなどを使えば上部でそろえることもできるのですがちょっと面倒です。

WP Canvas – Shortcodes を使って画像を２つ並べるには

エディターに追加された　[]▼　マークをクリック、1/2 + 1/2 をクリックします。

すると、このようなショートコードがエディターに入ります。この状態でプレビューすると

こんな感じに Sample Content という文字が２つ横に並んでいます。ということは、この　Sample Content という箇所に表示したい画像を指定すればいいようです

１つめのSaple Contentを選択しておき、メディアを追加 をクリック

メディアを挿入 画面で使いたい画像を選択して、投稿に挿入 をクリック

こんな感じで画像が入りました。同じように２つめの画像も

追加します。この状態でプレビューしてみると

このように１/２ずつのレイアウトになり、画像も上部にそろった形で表示されます。

画像のレイアウトはとてもたくさんあります

[]▼　マークをクリック するとたくさんのレイアウトが表示されているので試してみました

1/3 + 1/3 + 1/3 で編集すると、

このように3分割表示となります

均等な大きさでないレイアウト　1/4 + 1/2 + 1/4 も試してみると

こんな風なレイアウトになりました。簡単に凝った表示ができてうれしいです(^^)/

画像だけでなく文字もレイアウトできる

画像だけでなく文字も使ってレイアウトしてみます。

1/2ずつのレイアウトで左に画像、右に文字を入れて複数行配置すると

画像と文字がきれいにレイアウトされたコンテンツができます。こんな感じにして商品紹介などに使っても面白いですね！

レスポンシブ対応を確認してみる

横並び、ということですがちゃんとレスポンシブにも対応しています。先ほどのコンテンツを表示してブラウザの幅を縮めてみると

ちゃんと幅が狭い場合にも、いい感じのレイアウトになっていました。

まとめ：WP Canvas – Shortcodesの実力はこんなもんじゃなさそう…

画像を横並びにきれいに表示する、ということだけでこのプラグインを入れてみましたが、その他に

この赤枠の部分や、もう一つ追加された

Font Icons という気になる機能があります。Columns以外の機能もとても便利そうなので色々試してみてまたblogに書きたいと思います。

[amazon_searchlink search=”WordPress”]