カスタマイズ
CSS アニメーション - 青空をバックに紙飛行機がふわふわ

私はいままで CSS のアニメーション (animation) を使ってコーディングすることがほとんどなかったのですが、表現の幅を広げるために必要があれば使っていくようにした方がよいと思って、練習でひとつ作ってみました。

Lightning
農家サイトのカスタマイズ例 - 全画面のスライダーを使った Lightning トップページ【100dvh版】

お米をネット販売する南魚沼市の農家のサイトのトップページをイメージして作ったカスタマイズ例です。VK スライダーブロックの高さを 100dvh に設定してあります。

Lightning
農家サイトのカスタマイズ例 - 全画面のスライダーを使った Lightning トップページ【100vh版】

お米をネット販売する南魚沼市の農家のサイトのトップページをイメージして作ったカスタマイズ例です。カバーブロックの [カバー画像の最小の高さ] を 100vh に設定してあります。

Lightning
グローバルナビの項目の幅を均等にしたカスタマイズ例①

幅を均等にしたので、個々の項目の文字数を少なめで揃えておくのが望ましいです。

カスタマイズ
縦方向で動き、さらに逆方向にも動くスライダーの実装例

縦方向に動くスライダーを作りました。Lightning にバンドルされている Swiper を利用しています。

カスタマイズ
背景の歯車(ギヤ)が回転するデザインの実装例

背景で動いている部分に画像ではなく Font Awesome のアイコンを用いています。アイコンを置き換えることにより、さまざまなバリエーションがかんたんに可能となります。

Lightning
アーカイブページに投稿のコンテンツを全文表示したカスタマイズ例

[続きを読む] のようなボタンをクリックする必要がなく、コンテンツを続けて読み進めることができます。

Lightning
スクロール時に表示されるグローバルナビを差し替えたカスタマイズ例

表示するコンテンツはブロックエディターで編集できますので、HTML / CSS などの知識がない方でも書き換え可能です。

Lightning
LINE 予約バナーをスマホ画面の先頭に固定表示したカスタマイズ例

アクションフックと CSS を使ってカスタマイズしました。

カスタマイズ
扉が開閉するような立体的な動きのハンバーガーメニュー(メガメニュー)

メニュー部分をブロックエディターでビジュアル編集する仕様にしてありますので、柔軟にかんたんにお好みのデザイン・レイアウトにすることができます。