SWELLカスタマイズ事例 – コーヒーでもどう？

固定ページを使わないトップページ

トップページは、固定ページを使わず「最新の投稿」によるレイアウトで最新の投稿記事を24件表示しています。フッターの「PROFILE」部分（ブログパーツ）以外はブロックエディタを使っていません。

投稿記事の読み込みが完了すると、左上から順番にフェードインしながら表示しています。なお、サムネイルの表示列は、画面幅に応じて列数が変動します。

フローティングヘッダー

画面中央のロゴ画像はヘッダーに登録しています。ヘッダーを画面中央に配置し、じゃまにならないようスクロールダウンするとフェードアウトします。

スマホでもマウスオーバーに対応

フルスクリーンメニュー

フローティングヘッダーにしたので、ハンバーガーボタンをヘッダー外の画面右上に固定配置。クリックすると、「開閉メニュー」に登録されたメニューを全画面でオーバーレイ表示します。

アイキャッチエリアのレイアウト

キャプチャでもわかるように、通常、アイキャッチ画像は記事幅いっぱいに表示されますが、アイキャッチ画像とタイトルを横並びに表示させ、雑誌の誌面のようなアイキャッチエリアにしています。

スマホ表示では、トップのサムネイルと同じレイアウトにしています。

サイドバー「新着記事」、記事下「関連記事」エリアをサムネイル型に

サイドバーの「LATEST POST – 新着記事」部分は、「ブロック」ウィジェットに、投稿リストブロックの「サムネイル型」を埋め込んでいます。

記事下の「RELATED POST – 関連記事」部分も、JavaScriptで「サムネイル型」に変更しています。

SWELLのサイドバーと記事下のエリアでは、「カード型」か「リスト型」しか選べないんです…。

記事内画像のfloat表示

意外ですが、SWELLでは段落ブロック内で画像を回り込ませるfloat指定ができません。雑誌のようなレイアウトにしたかったので、指定した段落内でのみ画像を回り込ませるようにCSSで調整しました。