SWELLのウィジェット【ヘッダー内部】ブログパーツで有効活用

6

SWELLを使うようになって、1年7か月。

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

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

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

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

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

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

SWELL公式サイトの説明ページ

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

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

グローバルナビ右端のこの部分を何と表現していいのかわからないので、間違いがないようスクリーンショットが添付されたのだと思います。

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

CSSをゴニョゴニョせず、簡単に目立つボタン（やいろいろ）にできる「ヘッダー内部」は使えるヤツです。

Favoritesプラグインの解説ページにある「一覧ページへのリンクを作る（SWELLの場合）」にも簡単に書きましたが、詳しくは下記の通りです。

サンプル画像と違い、今は「あなたのブックマーク」としていますが…。

SWELL公式サイト

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

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

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

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

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

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

WordPress5.7からはボタンの横並びがブロック設定で自由に選択できるようになるらしいです。そうなれば、カラムは必要なくなります。
WordPress5.7の変更点をチェック！（SWELL開発者了さんの記事）

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

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

（外観 → カスタマイズ）ヘッダーバーに「SNSアイコンリストを表示する」にチェックを入れていると、SNSアイコンがダブってしまうので、どちらかにする必要があります。

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

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

画像も配置できます

ボタンと同じ手順で画像（リンク設定などして）も配置できます。

プロフィールにジャンプさせたい時はボタンより自分のアイコンにした方が効果的かもしれません。

楽天のROOMの入口にするなら、ROOMのロゴを配置するとか…いろいろ工夫できる場所です。

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

6