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

SWELLを使うようになって、1年7か月。
このブログが「SWELL」関連のキーワードで検索上位にいるせいか、時々質問をいただいています。
一番多い質問は、今回紹介する「グローバルナビ右端のボタン」の設置方法です。
グローバルナビゲーションと並んでいるので、メニューの設定と誤解されている感じがします。
右端のボタンは、ウィジェットの「ヘッダー内部」から設置します。

SWELL公式サイトでは、ショッピングカートのアイコンと「購入する」という四角いボタンになっています。
記事の内容(もくじ)
SWELLのグローバルナビ右端にボタン設置方法
この質問が多いのは、たぶんグローバルナビと「ヘッダー内部」という言葉が違う印象なので、SWELL公式のマニュアルで見つけにくいのではないかと思います。
数人の方からは「これはどのようにすればできますか? 独自?」と、スクリーンショット付きの質問が届きました。
グローバルナビ右端のこの部分を何と表現していいのかわからないので、間違いがないようスクリーンショットが添付されたのだと思います。
私の場合は、Favoritesプラグインのブックマーク入口に使っています。
CSSをゴニョゴニョせず、簡単に目立つボタン(やいろいろ)にできる「ヘッダー内部」は使えるヤツです。

Favoritesプラグインの解説ページにある「一覧ページへのリンクを作る(SWELLの場合)」にも簡単に書きましたが、詳しくは下記の通りです。
やるコトは2つ
- ブログパーツにボタンを作る
- ウィジェット「ヘッダー内部」に配置
STEP
ブログパーツ「新規追加」 → ボタン作成
SWELLブロックから「SWELLボタン」を選択。好みのボタンを作る。
「ブログパーツ」一覧に戻り、呼び出しコードをコピー(ctrl+C)。
STEP
ウィジェットを開き「ヘッダー内部」に「カスタムHTML」をドラッグ。呼び出しコードをペースト
サンプル画像と違い、今は「あなたのブックマーク」としていますが…。
余談ですが…
「Favorites」は訪問者各自のブックマークページをサイト内に作れるプラグインですが、「ブックマーク」という言葉があまりにも普通すぎて、「あなた専用のブックマークですよ」と短い単語で言い表すのがすごく難しです。
何と表記したら、迷いなくスルーされずにこのボタンの意味を伝えられるかしら…という事で、時々名称が変わってしまうのでした。ダメですね。
「ヘッダー内部」使い方あれこれ
このウィジェット「ヘッダー内部」は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のブログパーツは変幻自在、使い道がたくさんあって嬉しい、楽しい!