アフィリエイトで稼ぐ思考講座
画像を横に並べる方法
スポンサードリンク
アフィリエイト塾「虎の穴」
アフィリエイトで稼ぐ思考講座 > Webデザイン > WordPressで複数の画像を横並びにする方法

WordPressで複数の画像を横並びにする方法


僕みたいにCSSや、HTMLが苦手な人に嬉しいWebデザインのテクニックのひとつを共有します。

複数の画像(上図参照)を横並びにするにはスタイルシートとHTMLの知識がないと普通できません。僕もやっとこ知識を学んで理解できるようになりましたが、サイトの構成によって画像配置に神経を使います。つまりユーザーが見やすい画像配置にこだわる、結果、稼げることになるから。
それで、特によく使うのが、2枚や3枚の複数の画像を横一線に並べる方法。

この作業は簡単なようで複雑です。スタイルシートをあれこれ調整したり、面倒くさいからテーブルソースにぶち込んふだりしてお茶を濁すということはシバシバ(汗)

これがなんとWPでは、

専用のプラグインがあってこれをインストールさえすれば、あっという間に画像が並びます。

この WP Canvas – Shortcodesプラグインを使えば、記事内に自分が置きたい場所に画像を表示させることができます。

では早速行ってみましょう!

WP Canvasの設定方法

あなたのWordpress管理画面の左メニュー「プラグイン」→「新規追加」→WP Canvas – Shortcodesをインストール(下記画像参照)

インストールして「プラグインを有効」にして、いよいよ作業開始。
記事投稿画面(ビジュアル画面を選択)を開いて

①並べたい画像枚数を選択する。

ここでは、2枚の画像を横並びにするので(1/2+1/2)を選択

②下図のように「Sample Content部分」を削除して、1枚目、2枚目の画像を追加する。

③画像を選択するには下図参照

④画像を選択したら「更新→変更プレビュー」確認する

⑤完成!

面倒なスタイルシートをいじったり、ダサいスタイルになるテーブルソースに画像を入れることもなく、簡単にスッキリロ2枚の画像が横に並びました。

実はこのプラグインは、こんなの、あんなことがやりたかったけど、できなかったことがサクサクできる便利なプラグインです。

「WP Canvas – Shortcodes」は、こんなことができます>>




キーワード