【SWELL】キャッチフレーズをスマホでも表示させるカスタマイズ方法

スマホだとキャッチフレーズが表示されないんですか？との相談を受けたり、フォーラムでもたまに質問が来るのでメモしておきます。
「キャッチフレーズ含めてサイト名」みたいなことも多いですし、割と需要ありますよね。

事前準備：キャッチフレーズの表示位置を設定しておく

キャッチフレーズの表示位置は「ヘッダーロゴの近くに表示」にしておきましょう。
設定箇所は「外観」→「カスタマイズ」→「ヘッダー」の中の「キャッチフレーズ設定」です。

スマホでキャッチフレーズを表示させるCSS

CSSを貼り付ける場所は「外観」→「カスタマイズ」→「追加CSS」です。
インデント付けてないので、自由に調節してください。

ロゴ（サイト名）が文字の場合

@media (max-width: 959px) {
.l-header__inner .c-catchphrase {
display: block;
margin-top: 0;
font-size: 12px;
color: #148336;
}
}

上記のCSSは、文字色が緑になっています。color部分のカラーコード（#148336）を好きな色に変更してくださいね。
余白や文字サイズも好きな感じで調節しましょう。

ロゴ（サイト名）が画像の場合

@media (max-width: 959px) {
.l-header__inner .c-catchphrase {
display: block;
margin-top: -10px;
margin-bottom: 10px;
font-size: 12px;
color: #148336;
}
}

上記のCSSは、文字色が緑になっています。color部分のカラーコード（#148336）を好きな色に変更してくださいね。
余白や文字サイズも好きな感じで調節しましょう。

ロゴに画像を設定している場合、ロゴ画像に上下の余白がついているので【margin-top: -10px;】をつけています。（ちょっと気持ち悪いですが、CSSを最小限にするためです）
ロゴ画像とキャッチフレーズが重なってしまったり、近すぎで嫌な方は【margin-top: -5px;】とかに調節してください。

「ヘッダーロゴの近くに表示」以外の条件でも表示させたい方

今回ご紹介したカスタマイズは、キャッチフレーズを「ヘッダーロゴの近くに表示」した場合にのみ有効なので、物足りない方もいるかもしれません。

フォーラムで以前しらこさんが回答してくださっていたものもシェアしておきます。もっと高度なカスタマイズに挑戦したい！という方はコチラもどうぞ！
＞https://users.swell-theme.com/forum/postid/938/