【SWELL】ヘッダーバーのキャッチフレーズの表示幅（横幅）を広げる【コピペカスタマイズ】

2021年1月7日2021年2月26日

SWELLはサイトの最上部にキャッチフレーズを表示させるバーを表示できますが、長すぎると途中で切れてしまうんですよね…。

こんなに長くする人は珍しいかもですが、サイト制作をしてるとめちゃくちゃ長いキャッチフレーズを希望する方もいます。
そんな時のコピペカスタマイズを残しておきます。

ちなみに、この画像の歯科医院はありません。架空です。

【SWELL】ヘッダーバーのキャッチフレーズの表示幅（横幅）を広げる

CSSを記述する場所は「外観」→「カスタマイズ」→「追加CSS」です。

ここに、以下をコピペします。

/* ヘッダーバーのキャッチフレーズの表示幅 */
.l-header__bar .c-catchphrase {
width: 90%;
}

デフォルトだと表示幅が50％になっているので、好きな数字に変更してください。
（右側にSNSボタンが表示されるので、バランスを見ながら）

画面の幅によっては、ここで調節しても見切れる時があります。
それはさすがにキャッチフレーズが長すぎると思うので、短くした方が良いかもですね。

右側のプレビューで確認して問題がなければ「公開」をクリックして完了です。

SWELLだと、キャッチフレーズをカスタマイザーから変更できます。

「外観」→「カスタマイズ」→「WordPress設定」→「サイト基本情報」

「外観」→「カスタマイズ」→「ヘッダー」の中にあります。

この２箇所で表示・非表示の切り替えや、カラー設定ができるので、時間のあるときにいじってみてください。
個人的には、キャッチフレーズは表示させる方が好きです。

¥1,782 （2021/02/16 18:42時点 | Amazon調べ）

＼今日は楽天ポイント5倍の日／

ポチップ

上手くいったらシェアしてね！