ブログ

WordPressで複数の画像を横並びにしたいならWPCanvasプラグインが便利すぎた!

WordPressでブログ記事を書いていると、複数の画像を横並びにして表示させたいケースがあります。当ブログでは今までCSSで調整したり、テーブルを組んでからラインを消したり、相当の労力をかけて表示を試みていました。(これが本当面倒くさい・・)

しかし、WP Canvas – Shortcodes プラグインを使うようになってからは、記事内に任意のカラムを簡単に指定することができます。

このような ⇒ 理論派 vs 感情派 の8つのブログ運用談義コンテンツも短時間で作れるようになりました。

ここでは、1分程度で2枚の画像を横並びにする工程を解説します。私のようにCSSやhtmlが苦手だったり、まったく分からない方にはとても便利ですね。

WP Canvasの設定方法

① カラムを選択する(ここでは2枚の画像を並べるので1/2+1/2)

wp-canvas1

② Sample Content部分をドラッグしてメディアを追加する

wp-canvas2

③ 画像ファイルをアップロードして投稿に挿入

wp-canvas3

④ 挿入された画像を確認したら同様にメディアを追加

wp-canvas4

⑤ もう1枚の画像も投稿に挿入する

wp-canvas5

⑥ 画像を確認したら更新してプレビューする。

wp-canvas06

CSSをいじることなく2枚の画像を横並びにできました。

wp-canvas001

wp-canvas004

WP Canvas – Shortcodesはカラムの設定だけではなく、価格表やソーシャルアイコンも設置できたり、その他さまざまなショートコードが使用できるWordPressユーザーならぜひ導入したい便利なプラグインです。

スリームデザインの無料メールマガジン

ピックアップ記事

  1. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  2. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  3. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  4. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  5. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…

関連記事

  1. webデザイン

    123RFの格安素材を活用して素人っぽいWEBサイトから卒業しよう!

    ここでは123RFの格安素材を活用して素人っぽいWEBサイトから卒業す…

  2. マーケティング

    ワンランク上のBARやCAFEなどの飲食店集客におすすめなWordPressテーマ【Avalon】の…

    これまで飲食店の利益を確保するためには、ポータルサイトからの集客が重要…

  3. webデザイン

    fotoliaの有料素材を活用して個性的なWEBサイトに生まれ変わらせよう!

    ここではfotoliaの有料素材を活用して素人っぽいサイトから脱却して…

  4. webデザイン

    画像の上をカーソルでなぞってビフォアーアフターイメージを実装させるワードプレスプラグインBefore…

    当スリームデザインのブログではフォトショップ技術などを紹介しており、加…

  5. webデザイン

    初心者でも60秒でマスターできるPhotoshopで角丸の画像を作る方法

    WEBデザインなどをしていると画像の角を丸くしたいケースはよくあります…

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル

よく読まれている人気の記事

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  2. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  4. webデザイン

    「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  5. SNS

    思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
PAGE TOP