カテゴリー「Lightning Pro」の記事

Lightning は「シンプルでカスタマイズしやすい」という特徴を持っています。アップデートにより進化し続けて使いやすくなっていることもこのテーマの大きな魅力です。Lightning Pro は第2世代の Lightning で、2021年5月には Lightning Pro の次の世代の Lightning G3 がリリースされています。

Lightning Pro
Lightning Pro スマホのフッターナビのカスタマイズ例(横並び・中央寄せ)

スマホで表示するフッターナビのナビ項目を横並びにして、中央寄せのレイアウトにしました。画面幅が足りなくて折り返すことも想定しています。

Lightning Pro
Lightning Pro でヘッダーを透過にするときの CSS の例

キャンペーンテキストを表示している場合・表示していない場合の例を紹介しています。

Lightning Pro
モバイル固定ナビをパソコンでも使ったカスタマイズ例

Lightning モバイル固定ナビ をパソコンでも使えるようにカスタマイズして、ベクトルさんのサイト横断メニューのような画面下部のメニューを実装しています。

Lightning Pro
6 Web Fonts with CSS で投稿日・投稿者のアイコンが表示されない問題

調べてみたところ、body タグに付与されるクラス名がセレクタに使われていることが原因でした。

ExUnit
ページトップへ戻るボタンのデザインをカスタマイズ

Lightning Pro / Lightning G3 / X-T9 / Katawara で使える、子テーマの CSS などにコピペするだけのお手軽カスタマイズを紹介します。

Lightning Pro
404 ページをカスタマイズする方法

大事な見込み客を逃してしまうことにならないように、アクションフックとフィルターフックで 404 ページをカスタマイズするやり方を紹介します。

Lightning Pro
スライドショーで画像をじわぁ~っとズームインさせるには

数行の CSS を書くだけで、かんたんです。

Lightning Pro
ハンバーガーメニューをパソコンでも表示するカスタマイズ

パソコン画面でグローバルメニューをシンプルにして(または表示しないで)、ハンバーガーメニューをメインで使うユーザーインターフェースにしたいときに役立ちそうなお手軽なカスタマイズ方法です。

Lightning Pro
ヘッダー上部のお問い合わせボタンをスクロール時に画面の右端に表示

ボタンをちょっとだけ大きめに表示して、マウスホバー時に動きを持たせてあります。

Lightning Pro
スマホのヘッダーに SNS アイコンを表示するやり方

ヘッダー上部に置いた Facebook・Twitter・LINE のボタンをスマホのヘッダーにも表示するやり方を紹介します。

Lightning Pro
ヘッダー上部のお問い合わせボタンの横に SNS ボタンを追加するには

Lightning Pro でヘッダー上部のお問い合わせボタンに並べて、Facebook・Twitter・LINE のボタンを追加するやり方を紹介します。

Lightning Pro
サブメニューの項目を横に並べるカスタマイズ

CSS でカスタマイズしています。サブニューの項目が5~6個くらいのときに使うとちょうどいいかんじです。