ワードプレス

画像を横に並べるブラグイン「Shortcodes by Angie Makes」

ワードプレスでページを作成するときに、画像を横に並べる方法が分からないことがありませんか。

専門的なHTMLやCSSの知識があれば、画像を横に並べることは簡単でしょう。

しかし、副業初心者にとっては、これが、難しいんです。

分からないなりに、調べながら作業をしていっても画像が表示されない問題や、表示されても画像がずれてしまうことはよくあります。

そこで、そのトラブルを解決してくれるプラグインがあるのでご紹介します。

Shortcodes by Angie Makes

画像を横に並べることができるプラグインは、「Shortcodes by Angie Makes」です。

これは本当に簡単に画像を横に並べることができます。

使い方

まず、プラグインをインストールします。

インストールが終了したら、新規の投稿ページを開きます。

開いたら下の赤丸のように[]のメニューがあるので、クリックします。

Columnsにカーソルを合わせると新たにリストが表示されます。

並べたい枚数によって何枚並べるかを選択します。

横に2枚並べたい場合は、1/2+1/2を選びます。

3枚の場合は、1/3+1/3+1/3を選ぶようにします。

WP Canvas

使用例

実際に画像を横に並べてみます。

今回は2枚の画像を横に並べる作業をします。

1/2+1/2をクリック

すると下の画像の文字列が表示されます。

2枚作業

画像選択

上の画像のように「SampleContent」をドラックして色を反転させます。

反転させた状態で左上の「メディアを追加」ボタンをクリックして並べたい画像を選びます。

同じように、2行下の「SampleContent」の画像を選ぶ作業をします。

並べる例1

こんな風に画像が表示されます。

表示の確認

変更をプレビューでちゃんと画像が横にならんでいるかをチェックしてみましょう。

 

ホームページイメージ2

並んで表示されていれば、終了です。

便利な機能

「Shortcodes by Angie Makes」は、本当によくできたプラグインです。

画像を並べるだけではなくて、文章を入れることもできます。

画像を並べると、その下に文章を入れたくなりますよね。

プラグインがなれば、文章を画像の下にいれるだけでも苦労します。

しかし、「Shortcodes by Angie Makes」を使えば本当に簡単です。

「SampleContent」で追加した画像と、[wp-column][wc・・・]の間に1行挿入します。

そこに入れたい文章をそのまま入力すれば、プレビューしたときに反映されます。

まとめ

「」は、本当に便利なプラグインです。

このプラグインを使うと初心者でも画像を簡単に並べることができるようになります。

  • このエントリーをはてなブックマークに追加

ピックアップ記事

  1. 最初にレンタルサーバーを借りるならロリポップ

関連記事

  1. ワードプレスのインストール

    ワードプレス

    「初心者でもできる」ワードプレスでホームページ作成(インストール編)<第4章>

    ようやくホームページ作成に取り掛かります。契約した独自ドメインのサ…

  2. ワードプレス

    「初心者でもできる」ワードプレスの設定<第9章>

    今回は、ワードプレス(Wordpress)の設定についてです。ワー…

  3. ワードプレス

    「初心者でもできる」ワードプレスのテーマ選定<第5章>

    今回は、インストールをしたワードプレス(Wordpress)を使ってホ…

  4. ワードプレス

    ワードプレスヘッダー画像を超簡単に作る魔法のテクニック

    ワードプレスのヘッダーは、ホームページの顔となる重要な部分です。ワ…

  5. ワードプレス

    オールドドメインでサイト作成実況中継

    新たにサイトを作ることになったので、一連の流れをまとめていきます。…

  6. 子テーマ

    ワードプレス

    ワードプレステーマ『MAG』の子テーマを作る方法

    ワードプレステーマ「MAG」の子テーマを作る方法をまとめました。私…

サラリーマン必見のニュース

サラリーマンが知っておきたいNEWS

最近の記事

  1. 子テーマ
  2. ワードプレステーマmag
  3. ワードプレスエラー
  4. ワードプレスのインストール
  5. ワードプレスのドメイン

おすすめ記事

  1. 知識

    被リンクSEO効果の検証(延長戦)
  2. トラブル

    リダイレクトでサイトを簡単に引っ越しする方法
  3. 知識

    被リンクのSEO効果を検証
  4. 知識

    副業で自由に使えるお金をGET
  5. 知識

    無料画像サイトを使うメリット
PAGE TOP