SWELLのウィジェット【ヘッダー内部】の使い方！ボタンや告知が簡単に設置できる

10

SWELLを使うようになって、もうすぐ4年。私が最も長く使ったテーマとなりました。

結構使い込んだ気もしています。

このブログが「SWELL」関連のキーワードで検索上位にいるせいか、時々質問をいただいています。

一番多い質問は、今回紹介する「グローバルナビ右端のボタン」の設置方法です。

グローバルナビゲーションと並んでいるので、メニューの設定と誤解されている感じがします。

右端のボタンは、ウィジェットの「ヘッダー内部」から設置します。

SWELL公式サイトでは、ショッピングカートのアイコンと「購入する」という四角いボタンになっています。

SWELLのグローバルナビ右端にボタン設置方法

  ヘッダーに設置できるウィジェットエリア【SWELL公式】

この質問が多いのは、たぶんグローバルナビと「ヘッダー内部」という言葉が違う印象なので、SWELL公式のマニュアルで見つけにくいのではないかと思います。

数人の方から「これはどのようにすればできますか？　独自？」と、スクリーンショット付きの質問が届きました。

私の場合は、Favoritesプラグインのブックマーク入口に使っています。

CSSをゴニョゴニョせず、簡単に目立つボタンや告知の文字列を表示できます。

「ヘッダー内部」を使わないのは勿体ないです。

SWELLの公式サイトは「購入する」ボタン、つまりカートへのリンクになっています。

「ヘッダー内部」設置の手順

ボタンを置くとしたら

＼あったらいいなぁが大抵ある！／

機能満載＆使いやすい

「ヘッダー内部」使い方あれこれ

このウィジェット「ヘッダー内部」はボタンだけでなく、複数のボタンやSNSアイコンも配置できます。

「ヘッダー内部」に複数のボタンを配置

ボタンを複数配置することもできます。

ボタンがたくさん並んでしまうと、どれも全然目立たなくなるので、バランスを見て上手に使うのが肝心です。

ボタンを色違いにするなど工夫すれば、どちらも目立つかもしれません。
でもまぁ、ボタン1つが断然目立つとは思いますが…。

「ヘッダー内部」にSNSアイコンを配置

これ見よがし（笑）のSNSリンクより、こんな場所の大人しいアイコンの方が私は好き。

ここは注意！

（外観 → カスタマイズ）ヘッダーバーに「SNSアイコンリストを表示する」にチェックを入れていると、ヘッダーエリアにSNSアイコンがダブってしまいますよ。

大人しく、でも少し目立たせたい…なら、「SNSアイコンリストを表示する」のチェックを外し、上記のようにした方が良いかもしれません。

＼高速・高機能な一押しテーマ／

画像やアイコンを設置してアピール

ボタンと同じ手順で画像やアイコンも配置できます。

あらかじめブログパーツでリンク設定まで済ませて、ウィジェット「ヘッダー内部」に挿入しましょう。

• プロフィールなら自分のアイコン
• 楽天ROOMならROOMのロゴ
• 購入ページならカートアイコン
  SWELL公式サイトのように
• 問合せページなら封筒アイコン

SWELLのブログパーツは変幻自在、使い道がたくさんあって嬉しい、楽しい！

＼すご～く使いやすい傑作テーマ／

機能満載！だけど超わかりやすい！