はじめに
今回はWordPressにおけるCocoonテーマでの画像を横並びに表示する方法を書いていきます。
イメージとしては以下のようになります。
また、以下のように画像の比率も自由に変えることもできます。
サイト上で比較画像を2つ載せたいと言う場面は必ず出てくると思います。
例えば、部屋の掃除をして「Before」の画像を左へ「After」の画像を右に配置することでかなり変化が分かりやすくなると思います。
簡単にはなりますが、是非最後までご覧ください.。
手順
それでは、以下に手順を示していきます。
とても簡単なので2〜３分あれば十分作業を終えられます。
「＋」を選択
編集画面より「＋」を選択します。
出てきた検索欄に「カラム」と入力します。
すると、「２カラム」という項目が出てくるので、これをクリックします。
2つの色付きの枠
「２カラム」をクリックすると、下のように2つの色付きの枠が出てきます。
画像をアップロード
枠をクリックすると、先ほどのような「＋」のアイコンが出てきますので、これをクリックします。
同様に「画像」を選択します。
以下のように画像をアップロードできるようになりますので、画像をアップロードします。
以下のように画像をアップロードできたら右と下の白丸をドラッグして大きさを調整できます。
右側の枠についても同様に「＋」→「画像」を選択し、画像をアップロードすると、2つの画像を横並びに表示することができます。
2つの画像を貼れたらプレビューで確認してみて下さい。
最後に
WordPressのテーマであるCocoonを使用した便利な機能はまだまだありますので、これからも書いていきたいと思います。
最近は多肉植物の栽培についての記事も書いておりますので、そちらもサイト上部のSitemapよりご覧ください。
以上、ありがとうございました。
