SWELLのウィジェットエリアが一目で分かるサイトを作りました >>

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

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

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

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

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

もくじ

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

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

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

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

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

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


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

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

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

【SWELL】ヘッダーバーのキャッチフレーズの変更方法

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


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

【SWELL】ヘッダーバーの表示・非表示切り替え


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

  • ヘッダーバー設定
  • キャッチフレーズ設定

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

上手くいったらシェアしてね!
  • URL Copied!

お気軽にどうぞ!

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

もくじ
閉じる