Wordpress

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

投稿日:2016年8月16日 更新日:

画像を横に並べる方法

僕みたいにCSSや、HTMLが苦手な人に嬉しいWebデザインのテクニックのひとつを共有します。(2019年5月30日追記しました)ここから新規追記の記事です。
この方法は2つあります。



横並びボタンが用意されたWPテーマを利用するのもおすすめ

この記事をアップした時はプラグインを使って、横並びする方法をまとめていますが、最近はワードプレステーマに予めクイックタグ内に「横並びする」ボタンがついています。例えばいまあなたがご覧になっている当サイトはTCDテーマBRIDGEを使用しており投稿記事内本文書き出し部分の上に「レイアウト2C」「レイアウト3C」というクイックタグボタンがあります(下図参照)。
クイックタグ

これはとっても便利で、レイアウトボタンを選んで、そこへ画像を貼り付ければOKです。
こうしたクイックタグが付いているWPテーマを選べばサイト作りで立ち止まることもありませんね。
TCDデモサイトを見る

ここから下は2019年以前の内容です。
複数の画像(上図参照)を横並びにするにはスタイルシートと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」は、こんなことができます>>

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




  • この記事を書いた人

虎ジィ

2019年で72歳達成!バンザ~イ!! パソコン音痴の58歳で始めたアフィリエイト。艱難辛苦の荒波を乗り越えて今でも現役バリバリのWEBコンサルタント社長業とアフィリエイト塾「虎の穴」を14年継続主宰。

初心者おすすめ記事

1

アフィリエイトを始めたいので手順を教えてよという期待に応えて、図解入で解説しますね。在宅ビジネス、あるいは会社員の副業としてアフィリエイトの認知度は高いです。そこでアフィリエイトをこれから始める人に「 ...

サイト作り 2

アフィリエイトの仕組みや流れがわかったがところで、次はあなた専用のアフィリエイトサイトを作るについて必要なものや手順を解説していきます。自分専用のサイトを作りは、アフィリエイトで、安定して稼ぐための第 ...

3

読者の滞在率を高めるためにサイトをデザインします。と言ってもそんなに難しくなく、あらかじめ用意されているWordPressのテンプレートを使います。 目次1 ワードプレス向けのテンプレート(テーマ)を ...

4

STEP1~STEP3までは、アフィリエイトサイトの仕組みや用意するまでを紹介しました。さて、ドメインを取って、サーバーもレンタルして、WordPressのテンプレートまで揃いました。 では、ここから ...

5

アフィリエイトサイト作りの山場であるサイトの収益化に進みます。ここまで解説してきた手順よりは、一番興味のあることだと思いますので、できるだけわかりやすく月に5万円稼ぐ方法をイラストや写真を使って解説し ...

-Wordpress

Copyright© アフィリノトビラ , 2019 All Rights Reserved Powered by AFFINGER5.