「CSS」というタグがついている記事

このタグが付いた記事は23あります。
グローバルナビの任意の項目を画面の右端に固定表示するカスタマイズ例
カテゴリー
Lightning G3カスタマイズ

HTML / CSS に関する知識をお持ちでないお客様側でも 外観 ⇒ メニュー で右端に固定表示するナビ項目を自由に設定・差し替えできるようになっています。

Lightning G3 無料版でスクロール時にヘッダーロゴ画像を表示するには
カテゴリー
Lightning G3カスタマイズ

このカスタマイズは CSS だけでできます。

グローバルナビの最後の2項目を画面の右端に固定表示するカスタマイズ例
カテゴリー
Lightning G3カスタマイズ

このカスタマイズを行っておくことによって、HTML/CSS をいじらなくてもいいので、誰でもかんたんに 外観 ⇒ メニュー で右端の2項目を設定(差し替えも)できるようになっています。

Lightning G3 モバイルナビのカスタマイズ例
Lightning G3 モバイルナビのカスタマイズ例
カテゴリー
Lightning G3カスタマイズ

Lightning G3 のモバイルナビをモノクロのダークカラーでカスタマイズしてみました。

VK Filter Search カスタマイズ例 - アマゾンっぽい小さい検索ボックス
カテゴリー
カスタマイズその他

VK Filter Search ブロックをカスタマイズして、アマゾンの検索ボックスのようなデザインでコンパクトなものにしてみました。

画像ブロックを下余白なしにするやり方
カテゴリー
VK Blocks

作業が楽になってきていて、これから CSS のコードを書く機会がだんだん減っていく傾向のように感じています。

段落やテーブル内のテキストリンクをボタンにするカスタマイズ
カテゴリー
WordPressカスタマイズ

WordPress のブロックエディターで、段落やテーブルの中のテキストリンクをボタンのようなスタイルにするやり方を考えてみました。

コールセンター
グローバルナビメニューのお問い合わせだけスタイルを変えてみました②
カテゴリー
Lightning G3カスタマイズ

グローバルナビメニューの最後にある お問い合わせ が目立つようにスタイルを変えてみました。※スクロール時 (.header_scrolled) とタブレット (.device-mobile) の表示に対応

コールセンター
グローバルナビメニューのお問い合わせだけスタイルを変えてみました
カテゴリー
Lightning G3カスタマイズ

グローバルナビメニューの最後にある お問い合わせ が目立つようにスタイルを変えてみました。

CSS グリッドレイアウトを使った画像のレイアウト例
カテゴリー
その他

CSS グリッドレイアウトを使うと、柔軟で複雑なコンテンツの配置が可能になります。フレックスボックスと使い分けて活用したいですね。

【CSS だけ】アコーディオンを実装しました (Lightning 無料版)
カテゴリー
カスタマイズ

JavaScript を使わずに CSS だけでアコーディオンを実装するやり方を紹介します。

リンク(アンカー)
外部リンクに Font Awesome アイコンをつけるカスタマイズ
カテゴリー
Lightning G3カスタマイズ

段落内のテキストリンクに自動的に Font Awesome アイコンをつけるやり方を紹介しています。

「メディアとテキスト」ブロックのデザインをカスタマイズ
「メディアとテキスト」ブロックのカスタマイズ例
カテゴリー
WordPressカスタマイズ

WordPress 標準の「メディアとテキスト」ブロックを CSS でカスタマイズして、テキストをずらしてメディアに重ねたデザインにしてみました。

CSS で縦中横のスタイルを設定するやり方
カテゴリー
その他

text-combine-upright プロパティを使って、CSS で縦中横のスタイルを設定できます。

【アフター】アーカイブページでのカテゴリー表示のスタイル
アーカイブページでのカテゴリー表示のスタイルを変更しました
カテゴリー
カスタマイズ

カテゴリー名をアイキャッチ画像に重ねて表示していましたが、見づらいので、カードの上にタブ形式で表示するスタイル に変更しました。

投稿や固定ページのページヘッダーの画像を個別に設定するやり方
カテゴリー
Lightning G3カスタマイズ

編集画面で カスタム CSS に行を追加します。Lightning G3 Pro Unit でも投稿の編集画面にはページヘッダー画像設定がありませんので、この記事で紹介したやり方で設定します。

ハンバーガーメニューのボタンを目立たせるカスタマイズ
カテゴリー
Lightning G3カスタマイズ

デフォルトのハンバーガーボタンのままだと控えめなので、ボタンが目立つように CSS で飲食店向けにカスタマイズして、さらにパソコン、タブレットでも使えるようにしました。ペットサロン向け・カットサロン向けのパターンもあります。

パンくずリストのカスタマイズ+α ②
カテゴリー
Lightning G3カスタマイズ

Lightning のパンくずリストのスタイルを CSS でカスタマイズしてみました。ついでに、グローバルメニューとソーシャルボタンも傾けてデザイン統一を図ってみました。さらにヘッダーの余白をなくしてすっきりさせてみました。

パンくずリストのカスタマイズ+α
カテゴリー
Lightning G3カスタマイズ

Lightning のパンくずリストのスタイルを CSS でカスタマイズしてみました。ついでに、グローバルメニューとソーシャルボタンも傾けてデザイン統一を図ってみました。