【SWELLカスタマイズ】ヘッダーバーをスマホ・タブレットサイズでも表示させる方法｜CSSコピペでOK

ヘッダーバーをスマホやタブレットサイズでも表示させたいのですが、どうしたら表示できますか？

この記事では、WordPress「SWELL」の「ヘッダーバー」をレスポンシブ・タブレットサイズでも表示させるためのCSSカスタマイズ方法についてご紹介します。CSSのコピペだけでできるので、ぜひ参考にしてみてください。

ヘッダーバーを表示させるカスタマイズ方法

デフォルトでは、ヘッダーバーは「PCサイズ」のみ表示される仕様になっています。でも個人的には、ヘッダーバーはスマホやタブレットの時に表示されていてもオシャレで素敵なんじゃないかな〜と思っています。（当サイトでも表示させています）

そこで今回は、ヘッダーバーを「レスポンシブ・タブレットサイズでも表示させる方法」についてご紹介します！

CSSコード

以下のコードを「外観＞カスタマイズ＞追加CSS」に貼り付けるだけです！

/* 全てのデバイスでヘッダーバーを表示 */

.l-header__bar {
    width: 100%;
    display: flex !important;
    flex-wrap: wrap;
}

.l-header__barInner {
    width: 100%;
    display: flex !important;
    flex-wrap: wrap;
}

.l-header__bar .c-catchphrase {
    width: 100%;
    display: flex !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

注意事項

ただし、キャッチフレーズが長すぎると文が2行になってしまうのであまり見栄えが良くなくなってしまいます。

そして、SNSアイコンリストを表示させているという場合は、「SNSアイコンリストを表示する」のチェックマークをはずしておくことをお勧めします！