18周年記念キャンペーン中
チャンス&お得がいろいろ(9/30迄)エックスサーバー

【SWELL】グローバルナビの右端-ブログパーツ+「ヘッダー内部」

ヘッダー内部

SWELLを使うようになって、10か月。

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

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

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

記事の内容(もくじ)

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

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

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

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

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

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

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

ヘッダー内部ボタン
サンプル画像

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

やるコトは2つ

  1. ブログパーツにボタンを作る
  2. ウィジェット「ヘッダー内部」に配置
STEP
ブログパーツ「新規追加」 → ボタン作成

SWELLブロックから「SWELLボタン」を選択。好みのボタンを作る。

「ブログパーツ」一覧に戻り、呼び出しコードをコピー(ctrl+C)。

STEP
ウィジェットを開き「ヘッダー内部」に「カスタムHTML」をドラッグ。呼び出しコードをペースト

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

余談ですが…

「Favorites」は訪問者各自のブックマークページをサイト内に作れるプラグインですが、「ブックマーク」という言葉があまりにも普通すぎて、「あなた専用のブックマークですよ」と短い単語で言い表すのがすごく難しです。

何と表記したら、迷いなくスルーされずにこのボタンの意味を伝えられるかしら…という事で、時々名称が変わってしまうのでした。ダメですね。

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

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

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

ヘッダー内部 ボタン2個配置

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

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

STEP
ブログパーツで「新規追加」

STEP
新規画面にカラムブロック追加

ボタンの数だけカラムを設定
上記サンプルはボタン2個、2カラム

STEP
1カラムに1つのボタンを作る

カラムに入れないとボタンが横並びになりません

STEP
ブログパーツの一覧画面に戻り「呼び出しコード」をコピー

STEP
ウィジェットを開き「ヘッダー内部」に「カスタムHTML」をドラッグ。呼び出しコードをペースト

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

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

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

ヘッダー内部 SNSリンク設置

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

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

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

STEP
外観 → カスタマイズ「SNS情報」設定

自身の公表したいSNSのURLを入力
SNS以外にもRSSやお問い合わせページにも対応しています

STEP
「ヘッダー内部」に「[SWELL]SNSリンク」を挿入

アイコンはカスタマイズで設定したメインカラーになります。可愛い!

画像も配置できます

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

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

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

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

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
記事の内容(もくじ)
閉じる