スポンサードリンク


複数画像を横並びで記事に挿入する方法!WP Canvas – Shortcodesで折り返し機能搭載のレスポンシブ対応!WordPressの便利なプラグイン!

    WP Canva 画像サイズ

    WordPressで記事を書いていると、画像を横並びにして表示させたくなることがあります。

    そういう場合ってCSSで調整したり、テーブルタグを使ったりと正直面倒ですよね。

    しかし、WordPressのプラグイン「WP Canvas – Shortcodes」を知ってからは、
    記事内に簡単に画像の横並びを作ることができますし、他にも機能が豊富ですごく重宝しています。

    このプラグインを入れるだけで、任意のカラムを簡単に指定することができので、
    記事の画像レイアウトの調整がものすごく捗ります。

     

    WP Canvasの使い方!

    WordPressの記事エディタ画面を表示させます。
    WP Canvas – Shortcodes」を有効化すると、メニュー内にアイコンが追加されます。

    WP Canvas アイコン

    [ ]と表記されているアイコンがありますので、クリックします。

    以下のように「Columns」をクリックし、「1/2 + 1/2」を選択します。

    WP Canvas 使い方

     

    選択すると、エディタ内に以下のコードが自動的に入力されます。

    これはWP Canvasのショートコードです。
    Sample Contentと書かれた部分に記述することで横並びにすることができます。

    Sample Contentは必要ないので消し、ショートコードで囲まれたところで、メディアの追加をします。
    それぞれ、画像を配置しましょう。

    WP Canva 画像サイズ

     

    流れ的には上の通りになれば良いですが、WordPressで画像を貼りつけた場合、
    画像サイズがピクセル(固定値)で指定されている為、そのままページを表示させると、
    位置が合ってなかったり、ページから画像がはみ出してしまいます。

     

    スポンサードリンク

     

    なので、「ビジュアルエディタ」から「テキストエディタ」に切り替えて、
    画像タグのwidthを100%にし、heightを消します。

    WP Canva 画像サイズ

    widthを100%の利用にしたのは、画像を可変長対応させるためです。
    また、100%指定することで、WP Canvasの画像の領域サイズと合わせることができるからです。

    変更したら記事を保存し、ページを確認すると以下のように画像を横並びに表示させることができます。

    自作PC メイン機

    祖父と自作PC お正月

    このように記事内で好きな画像を簡単に横並びすることができますよ。

     

    レスポンシブでスマホでの閲覧も対応!

    このプラグインの優れている点は、スマホでページを閲覧した場合、
    画面サイズに画像が収まりきらない時、画像を折り返してくれるところです。

    なのでWordPressのテーマをPCとスマホで共用に使っている人にとっては、かなり重宝します。

    この他にも画像を3枚表示させたり、ソーシャルアイコンを付けたりと様々なことが
    このプラグインひとつで実現できるので、入れておいて損はないと思います。

      The following two tabs change content below.
      よっき プロフィール画像
      パソコンが大好きな青年。職業はプログラマ/SE。 フリーランスとしてウェブサイトの構築・保守の業務に従事。専門学校とパソコンスクールで講師も担当。幼少期からパソコンが大好きで、趣味がそのまま仕事に転じた。自作PCの魅力に惹かれたのは学生時代の頃。自作PC専門ブログで、お得な情報を紹介しています。

      スポンサードリンク


      コメントを残す




      CAPTCHA


      このページの先頭へ