SWELLカスタマイズ事例 – ハルノヒ

メインビジュアル

コンセプトキャッチでもある「春の陽に思う」のスプラッシュ画面のあと、ブログのコンセプトに添って、産まれて間もないお子さんの写真と桜の写真をメインビジュアルのスライド画像に配置。

メインビジュアル（スライドショー）を背景に固定することで、一見ブログとは思えない印象を与え、スライドの画像を変えればまた違った印象を与えられるようなギミックにしました。

隠しギミック

ところどころに隠しギミックも仕込んでます。

コンテンツ領域

グループ化したブロック要素の輪郭をbox-shadowでぼかしやらかな印象にしています。

「新しい書綴」領域の最新の記事部分は、flickityでカルーセル表示、カテゴリの最新記事部分はSWELLのタブブロックを使用しています。

ハンバーガーメニューの固定

SWELLではスマホ表示のみに採用されている「ハンバーガーメニュー」を、パソコンで見た時にも表示しています。

3本線をクリック（タップ）すると開閉メニューを表示し、この開閉メニュー内のではタイトル画像と、[SWELL]新着記事ウィジェット（リスト型）で、最新の記事を表示しています。

やさしい配色と明朝体の使用

SWELL設定で明朝体を指定しています。明朝体だとどうしても堅い印象を与えがちですが、装飾部分などブログ全体でやさしい配色を使用しているので、ちがった印象を与えています。

カテゴリラベルの配置変更

SWELLでは通常、アイキャッチの上にカテゴリラベルを表示しますが、タイトル回りをすっきりさせたかったのとシンプルにしたかったので、カテゴリラベルと日付をJavascriptで記事下に移動しています。