ワードプレスで画像を横並びにするプラグインShortcodes by Angie Makes

スポンサーリンク



ワードプレスで記事を書いていると、画像を横並びにして縦長の記事をスッキリ見せたいと思うことがありますよね。

でもCSSやhtmlはよく解らないから、画像を横に並べるのは難しいかも・・・なんてお困りの方も多いのでは?

今回は横並び画像のレイアウトが簡単に作れるプラグイン、「Shortcodes by Angie Makes」について解説していきます。

【横並びの画像】

プラグイン名変更について
「Shortcodes by Angie Makes」は「WP Canvas – Shortcodes」という名称でしたが、2017年1月に名称変更されました。プラグイン検索で「WP Canvas – Shortcodes」が出てこなくて困っている方は「Shortcodes by Angie Makes」と検索してみてください。機能や使い方はそのままです。

Shortcodes by Angie Makesをインストール

さっそくプラグイン「Shortcodes by Angie Makes」を導入していきましょう。

まずはワードプレスのプラグインの「新規追加」でShortcodes by Angie Makesを検索しましょう。

「今すぐインストール」を押して「有効化」しましょう。

これでShortcodes by Angie Makesを導入することができました。

画像を横並びに貼り付ける

使い方を解説していきます。

まずは管理画面から、投稿or固定ページの「新規投稿」をクリックし投稿画面を開いてください。

投稿画面が開いたら、エディタを「ビジュアル」で開いてください。

かぎカッコのボタンが追加されているはずです。

まずは画像を2つ並べてみましょう。

「」ボタンをクリックし「Columns」→「1/2+1/2」をクリックしてください。

すると以下のようなコードが表示されます。

画像を読み込む箇所は、コードの「Sample Content」の部分なので、この部分に「メディアを追加」して画像を入れましょう。

Sample Contentの部分に画像を挿入したら、「プレビュー」ボタンで記事を確認してみてください。

横並びの画像ができています。

レイアウト一覧

画像のレイアウトの種類は、上記で試した「1/2+1/2」以外は以下の種類があります!

1/3+1/3+1/3
1/3+2/3
2/3+1/3
1/4+1/4+1/4+1/4
1/4+1/2+1/4
1/2+1/4+1/4
1/4+1/4+1/2
1/4+3/4
3/4+1/4

1/3+1/3+1/3のレイアウト
1/3+2/3のレイアウト
2/3+1/3のレイアウト
1/4+1/4+1/4+1/4のレイアウト
1/4+1/2+1/4のレイアウト
1/2+1/4+1/4のレイアウト
1/4+1/4+1/2のレイアウト
1/4+3/4のレイアウト
3/4+1/4のレイアウト

まとめ

ワードプレス初心者はCSSやhtmlで四苦八苦するケースが多いですが、今回紹介した「Shortcodes by Angie Makes」のように、プラグインの使い方を覚えれば、画像の並べ替えも、ボタンの設置やその他の機能も比較的簡単にカスタマイズできるのです。

「Shortcodes by Angie Makes」は並べ替えの種類も豊富でその他の機能も充実しているので今後活躍が期待できそうですね。

他の「Shortcodes by Angie Makes」の機能に関しては、使うことがあれば紹介したいですが、ほぼ画像並び替え機能がメインになりそうです。

ということで、今回はプラグイン「Shortcodes by Angie Makes」の紹介でした。



スポンサーリンク



スポンサーリンク



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です