この記事はアフィリエイト広告を利用しています。

上記の製品更新情報に書かれているように、Lightning G3 Pro Unit のヘッダーとフッターをブロックを組み合わせて作成できるようになりました。これにより、Lightning でもブロックテーマのような柔軟なデザインを作ることが可能になったんです。これ、とてもうれしいですね。

これからこの機能を使ってヘッダー、フッターを作ることが増えそうです。そこで、WordPress コアの検索ブロックをヘッダー、フッターで使いやすいようにカスタマイズしておきました。

ブロックテーマを積極的に使うのが遠のいたなぁ...

2024.1.8 仕様変更など

検索ブロックの配置（左揃え・中央揃え・右揃え）をかんたんに切り替えできるようにした。

仕様変更前

以下のカスタム CSS により右揃えする。

selector .wp-block-search__inside-wrapper {
    justify-content: flex-end;
}

この仕様だと、左揃え・中央揃えにしたいときにコードの書き換えが発生するので、使い勝手が悪い。

仕様変更後

検索ブロックを横並びブロックに入れて、横並びブロックで左揃え・中央揃え・右揃えを指定する。

クリックして入力欄が表示されるタイプはたぶん右揃え使うことがほとんどだと思うので、仕様変更前のものを使うのがよい（仕様変更後のものはヘンな動きをする）。

クリックして入力欄が表示されるタイプで、仕様変更前のものを使って、左揃えで入力欄が右に開くカスタマイズを行ったものを追加した。

① ボタンを丸く、入力欄を角丸にカスタマイズした例

ボタンの色はキーカラーになっています。

常に入力欄が表示されているタイプ

仕様変更前の検索ブロック↓

クリックして入力欄が表示されるタイプ

仕様変更前の検索ブロック↓

↓仕様変更前の検索ブロックで入力欄が右に開くようにしたもの

② ①を小さめにした例

検索窓をヘッダーに組み込む場合はこのくらいのサイズがちょうどよい。

常に入力欄が表示されているタイプ

仕様変更前の検索ブロック↓

クリックして入力欄が表示されるタイプ

仕様変更前の検索ブロック↓

↓仕様変更前の検索ブロックで入力欄が右に開くようにしたもの

③ ボタンを四角に、入力欄をピン角にカスタマイズした例

ボタンの色はカスタムカラー 1 になっています。

常に入力欄が表示されているタイプ

仕様変更前の検索ブロック↓

クリックして入力欄が表示されるタイプ

仕様変更前の検索ブロック↓

↓仕様変更前の検索ブロックで入力欄が右に開くようにしたもの

Lightning G3 Pro Unit の入手方法

Lightning G3 Pro Unit は Lightning に便利な機能を拡張することができるプラグインで、このプラグインを使うと効率的で柔軟なサイト制作が可能になります。このプラグインは単体では販売されていなくて、Vektor Passport というライセンス製品に含まれて販売されています。

Vektor Passport は、コピペで使える豊富なプロ品質プレミアムパターン、Lightning G3 Pro Unit、VK Blocks Pro を好きなだけ使える大変お得なライセンス製品です。ライセンス1つで自分が制作・管理する複数のサイトに使うことができます。ライセンス期間は 1年 / 3年 / 5年から選べます。

投稿者プロフィール

対馬俊彦魚沼情報サービス (新潟県南魚沼市)

WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

また、制作業者様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

» ご相談・お問い合わせはこちらからどうぞ

WordPress / Lightning オンラインサポートのご案内

サイトをご覧いただき、ありがとうございます。このサイトを運営している、魚沼情報サービスの対馬です。

WordPress を使用したサイト制作・カスタマイズ・サポートを全国どこからでも承っています。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン (VK Blocks Pro ・ VK Filter Search Pro) を使ったサイト制作・カスタマイズを最も得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。

ご要望をうかがった上で費用見積り（無料）を提示させていただきます。

ご相談・お問い合わせはお気軽にどうぞ