SWELLのウィジェット【ヘッダー内部】の使い方！ボタンや告知が簡単に設置できる
SWELLを使うようになって、1年7か月。
このブログが「SWELL」関連のキーワードで検索上位にいるせいか、時々質問をいただいています。
一番多い質問は、今回紹介する「グローバルナビ右端のボタン」の設置方法です。
グローバルナビゲーションと並んでいるので、メニューの設定と誤解されている感じがします。
右端のボタンは、ウィジェットの「ヘッダー内部」から設置します。
SWELL公式サイトでは、ショッピングカートのアイコンと「購入する」という四角いボタンになっています。
記事の内容（もくじ）
SWELLのグローバルナビ右端にボタン設置方法
この質問が多いのは、たぶんグローバルナビと「ヘッダー内部」という言葉が違う印象なので、SWELL公式のマニュアルで見つけにくいのではないかと思います。
数人の方からは「これはどのようにすればできますか？ 独自？」と、スクリーンショット付きの質問が届きました。
私の場合は、Favoritesプラグインのブックマーク入口に使っています。
Favoritesプラグインの解説ページにある「一覧ページへのリンクを作る（SWELLの場合）」にも簡単に書きましたが、詳しくは下記の通りです。
CSSをゴニョゴニョせず、簡単に目立つボタンや告知の文字列を表示できます。
「ヘッダー内部」を使わないのは勿体ないです。
SWELLの公式サイトは「購入する」ボタン、つまりカートへのリンクになっています。
やるコトは2つ
- 挿入したい内容をブログパーツで作る
ボタン・SNSアイコン・文字列… - ウィジェット「ヘッダー内部」に配置
ボタンを置くとしたら
STEP
ブログパーツ「新規追加」 → ボタン作成
SWELLブロックから「SWELLボタン」を選択。好みのボタンを作る。
「ブログパーツ」一覧に戻り、呼び出しコードをコピー（ctrl＋C）。
STEP
ウィジェットを開き「ヘッダー内部」に「カスタムHTML」をドラッグ。呼び出しコードをペースト
＼あったらいいなぁ～の機能満載／
テーマで執筆速度が違ってくる
「ヘッダー内部」使い方あれこれ
このウィジェット「ヘッダー内部」は1つのボタンだけでなく、複数のボタンやSNSアイコンも配置できます。
「ヘッダー内部」に複数のボタンを配置
ボタンを複数配置することもできます。
ボタンがたくさん並んでしまうと、どれも全然目立たなくなるので、バランスを見て上手に使うのが肝心です。
STEP
ブログパーツで「新規追加」
STEP
新規画面にカラムブロック追加
ボタンの数だけカラムを設定
上記サンプルはボタン2個、2カラム
STEP
1カラムに1つのボタンを作る
カラムに入れないとボタンが横並びになりません
STEP
ブログパーツの一覧画面に戻り「呼び出しコード」をコピー
STEP
ウィジェットを開き「ヘッダー内部」に「カスタムHTML」をドラッグ。呼び出しコードをペースト
ボタンを色違いにするなど工夫すれば、どちらも目立つかもしれません。
でもまぁ、ボタン1つが断然目立つとは思いますが…。
「ヘッダー内部」にSNSアイコンを配置
これ見よがし（笑）のSNSリンクより、こんな場所の大人しいアイコンの方が私は好き。
ここは注意！
（外観 → カスタマイズ）ヘッダーバーに「SNSアイコンリストを表示する」にチェックを入れていると、ヘッダーエリアにSNSアイコンがダブってしまいますよ。
大人しく、でも少し目立たせたい…なら、「SNSアイコンリストを表示する」のチェックを外し、上記のようにした方が良いかもしれません。
STEP
外観 → カスタマイズ「SNS情報」設定
自身の公表したいSNSのURLを入力
SNS以外にもRSSやお問い合わせページにも対応しています
STEP
「ヘッダー内部」に「[SWELL]SNSリンク」を挿入
アイコンはカスタマイズで設定したメインカラーになります。可愛い！
＼高速・高機能な一押しテーマ／
画像も配置できます
ボタンと同じ手順で画像（リンク設定などして）も配置できます。
プロフィールにジャンプさせたい時はボタンより自分のアイコンにした方が効果的かもしれません。
楽天のROOMの入口にするなら、ROOMのロゴを配置するとか…いろいろ工夫できる場所です。
SWELLのブログパーツは変幻自在、使い道がたくさんあって嬉しい、楽しい！