画像を横並びにする方法!

Pocket

どうも。きょう*です(^^)/

いまさら感が半端ありませんが、やっと画像を横並びに表示することが出来ました(; ・`д・´)

発毛治療やダイエットの比較写真の場合、画像を横並びに表示出来ればわかりやすいとは思いながらも、出来ずにここまできました(笑)

実は過去に何度か画像を横並びにする方法を調べたことがあったのですが、「html」や「CSS」という言葉が出てきたとたんあきらめました⊂((〃≧▽≦〃))⊃

もちろん今でもさっぱりわかりません( ー`дー´)

しかし、「WP Canvas – Shortcodes」というプラグインを使えば、比較的簡単に画像を横並びにすることが出来ることがわかりました。

「WordPress」を使って記事を書いている場合に限定されてしまいますが、参考になればと思います(*^。^*)

スポンサードリンク

WP Canvas – Shortcodes

インストールしましょう

まずは、「WP Canvas – Shortcodes」のインストールです。

「WordPress」管理画面⇒「プラグイン」⇒「新規追加」をクリックしましょう。

インスト

「プラグインを追加」の画面で、「WP Canvas – Shortcodes」と入力し検索しましょう。

 無題

そして検索一覧から、「WP Canvas – Shortcodes」⇒「いますぐインストール」をクリックしましょう。

インスト 3

この画像の「インストール済み」の部分が未インストールなら「いますぐインストール」になっています。

 インストール完了後に、「有効化」をクリックするのを忘れないようにしましょう。

使い方

管理画面から「新規投稿追加」をクリックし「投稿画面」を開きましょう。

エディタは「ビジュアル」です。

無題

 

すると、「ビジュアル」エディタに、今までになかった新しく項目が追加されていますよね?

 無題

その項目の一つ(向かって左側)をクリックし「Columns」⇒「1/2+1/2」をクリックしましょう。

無題

するとこのように表示されます。

無題

この表示にある2カ所の「Sample Content」という部分が画像を読み込む箇所になります。

画像を読み込む方法ですが、まず一つ目の「Sample Content」をドラッグし、「メディアを追加」から画像を読み込みます。

無題

するとこのようになります。

無題

同様に、2つ目の「Sample Content」にも画像を読み込みましょう。

無題

記事作成段階では、このように表示されますが、投稿すれば横並びに表示されます。

もちろん、プレビューでも確認できます。

無題

2枚だけでなく、3枚横並びなど色々出来ますので、用途に合わせて試してみてはいかがでしょうか(*^_^*)

僕もこれから色々試してみたいと思っています。

それではまた(^.^)/~~~

 

Pocket

コメントを残す

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