SWELLのフルワイドブロックを活用して、比較的制御しやすく、かつ自由な配置で画像を配置するカスタマイズについて解説します。例えば下記のようなことができます。
ここがフルワイドブロックです。
このブロックを基準として、
CSSで画像を色々な箇所に配置しました。
アイデア次第で、色々な
デザインに仕上がります。
上記例ではかなり適当に配置しましたが、一般的な配置にとらわれないレイアウトが可能です。CSSだけで実装していますので、function.phpなど重大なファイルは触りません。画像を配置したいページのCSS欄にコードを入力する形です。なおフルワイドブロックを使う関係上、ワンカラムデザインのみに対応しています。
色々な活用法がありますが、例えば当サイト「文亭」トップページの書籍紹介パートでは、PC表示時のみ左右にふよふよとイラストが浮かんでいるような演出で使用しております。
CSSに不慣れな方からすると、少し難易度は高めのカスタマイズになるかもしれませんが、よい練習にもなるかと思います。
具体的なコードの書き方を解説しました。
- カスタマイズ内容は、記事最終更新日時点のSWELL最新バージョンで動作確認しております。
- カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。
