SWELLは標準でも素晴らしいデザイン機能を備えていますが、「ヘッダー周りをより高度にカスタマイズしたい」と感じることはありませんか？
特に電話番号・営業時間などを特別目立たせたい・関連事業をヘッダーでも案内したいといった要望がでると、SWELLの標準機能だけでは対応しきれないこともあります。
今回、そんなニーズに応えるべく、カスタマイザーから直感的に操作できる拡張ユニット「サブヘッダー追加アドオン」を開発しました。 Revifyにて公開いたしましたので、その特徴をご紹介します。
使用例↓
目次
実装方法
使用方法動画
コードスニペットを導入する
こちらのボタンをクリックしてスニペットをダウンロードします。
会員限定コンテンツ
ここは会員限定コンテンツです。
＼お申込みはこちら／
コードスニペットをオンにします。
アドオン機能導入方法
STEP
プラグイン「Code Snippets」を検索します。
管理画面「プラグイン」から、「プラグインを追加」を選択。
「プラグインの検索」欄に、Code Snippetsと入力。
STEP
プラグイン「Code Snippets」をインストール・有効化します。
このプラグインを「今すぐインストール」・「有効化」します。
STEP
コードスニペットをダウンロードします。
該当ページから、コードスニペットをダウンロードします。
コピペではなく、ダウンロード形式で使用するものは上画像のような黄色いボタンで統一しています。
Code Snippets （コードスニペット）とは？
インポート/エクスポートが容易な、コード管理プラットフォームです。
「ひとつの機能としてパッケージングされたコード群」を、利用者はコードを触ることなくスイッチ（トグル）のオンオフで導入できる神ツールです。
STEP
コードスニペットをインポートします。
管理画面「スニペット」「インポート」から、先ほどダウンロードしたコードスニペットをインストールします。
重複インストールを防ぐために下段にチェックを入れ、
Choose Filesエリアに先ほどダウンロードしたファイルをドラッグ&ドロップします。
インストールするファイルにチェックを入れ、「Import Selected」を押します。
STEP
コードスニペットをオンにします。
管理画面「スニペット」「すべてのスニペット」から、先ほどインポートしたスニペットの左端にあるスイッチ（トグル）をオンにします。
目当ての機能が有効化されているか確認します。
使い方：カスタマイザーで設定するだけ
有効化すると、カスタマイザー内に「サブヘッダー設定」という項目が出現します。
各数値を変更するだけで、即座にサイトのデザインへ反映されます。
設定項目の詳細
| 分類名 | 役割・内容 |
| 表示・レイアウト | 表示のON/OFF、スマホ非表示設定、コンテンツ幅の指定 |
| カラー設定 | 背景色と文字色の指定（16進数で自由に変更可能） |
| サイズ・余白 | 文字サイズや上下のパディングを数値で直接指定 |
| テキスト設定 | 任意のテキストと、リンク先のURLを設定 |
| ブログパーツ設定 | 右側（または左側）に表示するブログパーツIDを指定 |
↓デモで使用しているブログパーツのブロックです！
090-1234-5678
営業時間：平日9:00~18:00
＼編集画面でペーストするだけ！／
こんな方におすすめ
- サイト全体の質感を高める「一工夫」を短時間で実装したい方。
- 納品後、クライアント自身でキャンペーン情報などを簡単に更新できる仕組みを作りたい方。
- SWELLの標準機能に、あと少しの「自由度」と「管理のしやすさ」を求めている制作担当者。
まとめ：洗練されたサイト体験をあなたの手で
SWELLのポテンシャルをさらに引き出し、運用フェーズまで見据えたサイト制作を支援したい。 そんな思いから、このアドオンは誕生しました。
単なる表示パーツではなく、WordPressそのものを拡張する利便性をぜひ体感してください。 皆様のWeb制作がよりスムーズに、そして楽しくなれば幸いです。
