「CSS」というタグがついている記事
グローバルナビの任意の項目を画面の右端に固定表示するカスタマイズ例
- カテゴリー
- Lightning G3カスタマイズ
HTML / CSS に関する知識をお持ちでないお客様側でも 外観 ⇒ メニュー で右端に固定表示するナビ項目を自由に設定・差し替えできるようになっています。
グローバルナビの最後の2項目を画面の右端に固定表示するカスタマイズ例
- カテゴリー
- Lightning G3カスタマイズ
このカスタマイズを行っておくことによって、HTML/CSS をいじらなくてもいいので、誰でもかんたんに 外観 ⇒ メニュー で右端の2項目を設定(差し替えも)できるようになっています。
Lightning G3 モバイルナビのカスタマイズ例
- カテゴリー
- Lightning G3カスタマイズ
Lightning G3 のモバイルナビをモノクロのダークカラーでカスタマイズしてみました。
VK Filter Search カスタマイズ例 - アマゾンっぽい小さい検索ボックス
VK Filter Search ブロックをカスタマイズして、アマゾンの検索ボックスのようなデザインでコンパクトなものにしてみました。
段落やテーブル内のテキストリンクをボタンにするカスタマイズ
WordPress のブロックエディターで、段落やテーブルの中のテキストリンクをボタンのようなスタイルにするやり方を考えてみました。
グローバルナビメニューのお問い合わせだけスタイルを変えてみました②
- カテゴリー
- Lightning G3カスタマイズ
グローバルナビメニューの最後にある お問い合わせ が目立つようにスタイルを変えてみました。※スクロール時 (.header_scrolled) とタブレット (.device-mobile) の表示に対応
グローバルナビメニューのお問い合わせだけスタイルを変えてみました
- カテゴリー
- Lightning G3カスタマイズ
グローバルナビメニューの最後にある お問い合わせ が目立つようにスタイルを変えてみました。
CSS グリッドレイアウトを使った画像のレイアウト例
CSS グリッドレイアウトを使うと、柔軟で複雑なコンテンツの配置が可能になります。フレックスボックスと使い分けて活用したいですね。
「メディアとテキスト」ブロックのカスタマイズ例
WordPress 標準の「メディアとテキスト」ブロックを CSS でカスタマイズして、テキストをずらしてメディアに重ねたデザインにしてみました。
アーカイブページでのカテゴリー表示のスタイルを変更しました
カテゴリー名をアイキャッチ画像に重ねて表示していましたが、見づらいので、カードの上にタブ形式で表示するスタイル に変更しました。
投稿や固定ページのページヘッダーの画像を個別に設定するやり方
編集画面で カスタム CSS に行を追加します。Lightning G3 Pro Unit でも投稿の編集画面にはページヘッダー画像設定がありませんので、この記事で紹介したやり方で設定します。
ハンバーガーメニューのボタンを目立たせるカスタマイズ
- カテゴリー
- Lightning G3カスタマイズ
デフォルトのハンバーガーボタンのままだと控えめなので、ボタンが目立つように CSS で飲食店向けにカスタマイズして、さらにパソコン、タブレットでも使えるようにしました。ペットサロン向け・カットサロン向けのパターンもあります。
パンくずリストのカスタマイズ＋α ②
Lightning のパンくずリストのスタイルを CSS でカスタマイズしてみました。ついでに、グローバルメニューとソーシャルボタンも傾けてデザイン統一を図ってみました。さらにヘッダーの余白をなくしてすっきりさせてみました。
パンくずリストのカスタマイズ＋α
Lightning のパンくずリストのスタイルを CSS でカスタマイズしてみました。ついでに、グローバルメニューとソーシャルボタンも傾けてデザイン統一を図ってみました。