これは便利！「WP Canvas – Shortcodes」プラグインで画像を横並びにする！

公開日：2015年2月24日
最終更新日: 2016年1月10日

こんにちは！

記事を投稿する時に、記事内容が文字だけだと見栄えもイマイチですし、読むのにちょっと疲れてしまいます。文字と文字の間には、適度に一息付ける画像や記事内容の説明となる画像があった方が読みやすいです。

記事をより読みやすくするために、画像の並べ替えなど、工夫して表示させたいものですが、「WordPress」で記事に画像を使う場合、単純に1枚だけを表示させるのは簡単ですが、画像を並べて表示させるとなると、途端に難しくなります。

「html」や「CSS」の知識がある人なら問題はありませんが(それでも面倒です)、WEBの初心者の方からすれば、かなりハードルが高い作業です。

そんな時に便利なプラグインが「WP Canvas – Shortcodes」で、使い方さえ覚えれば簡単に画像を並べることができます。今回は「WP Canvas – Shortcodes」で画像を並べる手順を紹介したいと思います。

目次！

1.「WP Canvas – Shortcodes」をインストール！
2.実際に使ってみましょう！

「WP Canvas – Shortcodes」をインストール！

まずはプラグインのインストール！

「WordPress」管理画面へログインし「プラグイン」⇒「新規追加」をクリックしてください。

「プラグインを追加」の画面が開きますので、「WP Canvas – Shortcodes」と入力し検索してください。

「WP Canvas – Shortcodes」の検索一覧が表示されますので、一覧の中の「WP Canvas – Shortcodes」⇒「いますぐインストール」をクリックしてください。

「本当にこのプラグインをインストールしてもいいですか？」の画面が表示されますので「OK」をクリックしてください。

「WP Canvas – Shortcodes」がインストールされますので「プラグインを有効化」をクリックしてください。

プラグインの一覧画面に戻り「WP Canvas – Shortcodes」が有効化されたのを確認できます。

これでプラグインのインストールは完了です。

実際に使ってみましょう！

管理画面から「新規投稿追加」をクリックし「投稿画面」を開いてください。

「投稿画面」が開いたのを確認したら、エディタは「ビジュアル」で開いてください。

画像を2枚並べてみます！

「ビジュアル」エディタに新しく項目が追加されているのが確認できます。

追加されている項目の一つをクリックし「Columns」⇒「1/2+1/2」をクリックしてください。

以下のように投稿画面に自動的にコードが表示されます。画像を読み込む箇所は、コードの「Sample Content」の部分です。

「Sample Content」をドラッグし、「メディアを追加」から画像を読み込んでください。

画像が投稿画面に読み込まれました。下にある「Sample Content」にも同じように読み込んでみたいと思います。

画像を2枚読み込むことができました。これで投稿してみたいと思います。

実際に投稿画面を確認すると、問題なく画像が2枚並んで表示されていました。簡単ですね。

他にもいろんな機能があり、「アイコン」や「Googleマップ」、「プログレスバー」などを追加することも可能です。

ただ現状、よく利用するのは画像を並べることだと思いますので、一通り画像の並べられる種類を紹介します。

種類は上記で試した「1/2+1/2」以外は以下の種類があります。

「1/3+1/3+1/3」の表示サンプルです。

「1/2+2/3」の表示サンプルです。

「2/2+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」の表示サンプルです。

使い方を覚えると画像の表示方法の幅が広がりますので、ぜひ覚えておいてください。サンプルでは画像を並べていますが、画像の横に説明文としてテキストを表示させることも簡単にできます。画像をテキストに変更すれば良いだけです。

最後に！

WEBの初心者であるお客さんは、画像の並べ替えに四苦八苦するケースが多いです(上手く画像が並ばないとクレームがあります)。ただこのプラグインの使い方を覚えてもらえれば、画像の並べ替えも比較的簡単に可能になります。

並べ替えの種類も豊富ですし、今後は重宝するプラグインになりそうです。他の機能に関しても、使うことがあれば紹介したいと思います(便利ですが実践ではあまり使う機会がなさそうな気がします)。

以上「これは便利！「WP Canvas – Shortcodes」プラグインで画像を横並びにする！」でした！

それではまた。

関連記事

新着記事