【お知らせバーカスタマイズテスト中】SWELLのウィジェットエリアが一目で分かるサイトを作りました >> SWELLのウィジェットエリアが一目で分かるサイトを作りました >>

【SWELL】ヘッダー内部に入れたウィジェットを3列から2列(ロゴの隣)に並べるカスタマイズ

SWELLは「ヘッダー内部」と言うウィジェットエリアがあらかじめ用意されています。
cocoonを使ってた時はフックでカスタマイズしてたので、とってもありがたい…!!

ヘッダーを1行にしている時は良いのですが、2行にすると「ヘッダー内部」に入れたウィジェットのコンテンツがロゴの下に来て3行になってしまうので、ロゴの横に並べて2行にしてみました。

↓これを↓

↓こうしたい↓

もくじ

完成図と事前準備

完成したらこんな感じ

ヘッダー内部に入れるウィジェットのSNSボタンとサイト検索は、ブログパーツで作ります。

前提条件としてSWELLのSNSリンクは使いません。WordPressのソーシャルアイコンブロックを使います。
(ブログパーツでSWELLのSNSリンクは呼び出せない&CSSを最小限にするため)

事前準備:ブログパーツでコンテンツを作る

ヘッダー内部に入れるコンテンツは、ブログパーツで作ります。
ブログパーツのタイトルは、なんでもOKです。今回は「ヘッダーロゴ横の要素」にしてみました。

パーツの内容は、2カラムの中にSNSリンク(ソーシャルアイコンブロック)とサイト内検索です。
私はこの2つを選びましたが、SWELLボタンでサービスページにリンクさせても良いし、お好きなコンテンツを入れてください。
ブログパーツなので、特別なことは何もありません。いつも通りな感じで作ってください。

SNSリンク(ソーシャルアイコンブロック)の設定

SNSリンクは、とりあえずTwitterとInstagramにしました。
ソーシャルアイコンブロックの配置は「右寄せ」にしておきます。

ソーシャルアイコンブロックになかなかポイントが当たらない時は、左下のパンくずリストから選択できます。

サイト内検索(検索ブロック)の設定

サイト内検索は「左寄せ」に設定しておきます。

その他の詳細
  • 検索ラベルなし
  • ボタンの位置は内側
  • アイコン付きのボタンを使用

ブログパーツのショートコードをコピーしておく

中身のコンテンツが作成できたら、ショートコードをコピーしておきます。

【SWELL】ヘッダー内部に入れたウィジェットのコンテンツを2列(ロゴの隣)にする

まずは「外観」→「ウィジェット」を開いて「ヘッダー内部」にカスタムHTMLを挿入します。

カスタムHTMLの中に、コピーしておいたブログパーツのショートコード を貼り付け。

ウィジェットにブログパーツを入れただけだと、3行になってますよね。
ちなみに中央から少しズレて見えるのはソーシャルアイコンブロックを右寄せした影響です。

3行になってます

3行を2行にするCSSを貼り付ける

CSSを貼り付ける場所は「外観」→「カスタマイズ」→「追加CSS」です。
インデント付けてないので、自由に調節してください。

サイト内検索を入れた場合

@media (min-width: 960px) {
.-parallel .l-header__logo {
width: 40%;
}
.l-header.-parallel .w-header {
width: 60%;
}
.wp-block-search__input {
width: 350px;
}
}

サイト内検索を入れてない場合

@media (min-width: 960px) {
.-parallel .l-header__logo {
width: 40%;
}
.l-header.-parallel .w-header {
width: 60%;
}
}

ロゴ(サイトタイトル)・ヘッダー内部・グローバルメニューの横幅が全部100%になっているので、割合を変更しただけです。

可視化するとこんな感じ

ロゴの大きさやヘッダー内部に入れたコンテンツの量によって見栄えが変わるので、%の数字を調節してください。割合を変えた場合は、サイト内検索の横幅の変更も忘れずに。(当サイトの設定はロゴサイズ80です)
「検索ブロック」を別の場所で使っている方は、任意でclassを当てて調節くださいね。

ブログパーツの中に入れたブロックによっては微調節が必要なものもあると思います。ご自身のサイトに合う感じで整えてください\(^o^)/

上手くいったらシェアしてね!
  • URL Copied!

お気軽にどうぞ!

コメント一覧 (4件)

  • まさにやりたかったことで大変参考になりました!ありがとうございます!
    厚かましくすみませんが、ちなみにヘッダー内ウィジェットをスマホでも表示させるカスタマイズは可能でしょうか><?
    スルーしていただいても全然かまいません。突然のコメント失礼しました。

    • コメントありがとうございます!^_^

      スマホだと「カスタムボタン」を1つ設定できます(公式マニュアル:https://swell-theme.com/basic-setting/84/#index_id16)が、任意のボタンを表示させる方法は今のところ無いようですm(_ _)m

      • お返事ありがとうございます!
        スマホ画面でも電話番号を表示できたらなぁと思って色々試してみたのですがちょっと難しかったです^^;
        スマホはカスタムボタンでの対応にしようと思います。
        ご丁寧にありがとうございました。

      • お返事ありがとうございます!
        スマホ画面でも電話番号を表示できたらなぁと思って色々試してみたのですがちょっと難しかったです^^;
        スマホはカスタムボタンでの対応にしようと思います。
        ご丁寧にありがとうございました。

ねね へ返信する コメントをキャンセル

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

もくじ
閉じる