フォーラムをリニューアルしました!
今後は、新フォーラムをご利用ください。
ヘッダーロゴの横にテキスト表示 < SWELLに関する質問
ヘッダーロゴの横にテキストを入れたのですが、メニュー追従でメニューが出てきたらテキストが表示されません。以下の3つの方法をご教授願います。
1.追従メニューでロゴ横のテキスト表示方法
2.ロゴ横のテキストを2段に表示させる方法
3.ロゴ横のテキストのサイズ変更
対象サイト:www.sky-inter.jp
1.追従メニューでロゴ横のテキスト表示方法
- swell/parts/header/fix_header.php を swell_child/parts/header/fix_header.php となるよう子テーマに複製
- 子テーマの fix_header.php を下記のように変更(全文掲載)
<?php
if( !defined( 'ABSPATH' ) ) exit;
$header_class = SWELL_FUNC::get_header_class();
?>
<div id="fix_header" class="l-fixHeader <?=$header_class?>">
<div class="l-fixHeader__inner l-container">
<div class="l-fixHeader__logo">
<?php echo SWELL_PARTS::head_logo( 'no', true ); ?>
<div class="c-catchphrase u-thin"><?=SWELL_PARTS::catchphrase()?></div>
</div>
<div class="l-fixHeader__gnav c-gnavWrap"><!-- gnav --></div>
</div>
</div> - 子テーマの style.css か 外観 > カスタマイズ > 追加CSS あたりに下記 CSS を追加
@media screen and (min-width: 960px) {
.l-fixHeader__logo .c-headLogo {
margin-right: 16px;
}
.l-fixHeader__logo .c-catchphrase,
.l-header__logo .c-catchphrase {
padding: 4px 0;
font-size: 13px;
}
.l-fixHeader__inner .c-catchphrase {
letter-spacing: .2px;
}
}
2.ロゴ横のテキストを2段に表示させる方法
設定 > 一般設定 > キャッチフレーズ の入力欄で任意の位置で <br> タグを記述すると良いと思います。
3.ロゴ横のテキストのサイズ変更
先程の CSS のコードの中の
font-size: 13px;
と書かれたところの値を変更すればOKです。
ご教授有難うございます。
もう2点ほどご教授願います。
①2のロゴ横テキストを2段にする方法で入力欄に <br> を追加したのですが
<br>がそのまま表示され2段に表示されません。
②追従メニューでフォント変更は出来たのですが、一番最初に表示される
ヘッダーメニューのフォントサイズはどこで変更すれば良いのでしょうか?
素人的な質問で申し訳ございません。
何度もすみませんがご教授の程、よろしくお願いします。
①1行目は普通にキャッチフレーズに書いて、2行目は下記CSSで対応するのがシンプルだと思います。
.c-catchphrase:after {
display: block;
content: "2行目の文章をここに書く";
}
② fix_header.php と CSS の修正版を書いておきます。以前のものは破棄してください。
(前回のコードで一気に変更できるようにしたつもりですが足らなかったようなのです。)
fix_header.php
<?php
if( !defined( 'ABSPATH' ) ) exit;
$header_class = SWELL_FUNC::get_header_class();
$SETTING = SWELL_FUNC::get_setting();
?>
<div id="fix_header" class="l-fixHeader <?=$header_class?>">
<div class="l-fixHeader__inner l-container">
<div class="l-fixHeader__logo">
<?php echo SWELL_PARTS::head_logo( 'no', true ); ?>
<?php if ( $SETTING['phrase_pos'] === 'head_wrap' ) : ?>
<div class="c-catchphrase u-thin"><?=SWELL_PARTS::catchphrase()?></div>
<?php endif;?>
</div>
<div class="l-fixHeader__gnav c-gnavWrap"><!-- gnav --></div>
</div>
</div>
CSS
@media screen and (min-width: 960px) {
.-series .c-headLogo {
margin-right: 16px;
}
.-series .l-fixHeader__logo .c-catchphrase,
.-series .l-header__logo .c-catchphrase {
padding: 4px 0;
font-size: 13px;
}
.l-fixHeader__inner .c-catchphrase,
.l-header__inner .c-catchphrase {
letter-spacing: .2px;
}
}
font-size: 13px; の値を変更すれば今度こそ一気にできるようになると思います。
度々スミマセン。
2行表示は出来ましたが、やはり2番のフォントサイズが追従メニューは変更できるのですが
最初のメニューのフォントサイズが変わりません。
ご教授の程、よろしくお願いします。
前回の CSS は 外観 > カスタマイズ > 追加CSS に設置すれば反映されました。
しかし、子テーマの style.css では優先順位の差で効かなかったようなので該当部分の優先順位を上げたものを貼っておきます。前回の CSS コードは破棄してください。
/*1行目はサイト設定のキャッチフレーズに書く*/
.l-fixHeader__logo .c-catchphrase:after,
.l-header__logo .c-catchphrase:after {
display: block;
content: "2行目の文章をここに書く";
}
@media screen and (min-width: 960px) {
.-series .c-headLogo {
margin-right: 16px;
}
.l-header.-series .l-header__logo .c-catchphrase,
.l-fixHeader.-series .l-fixHeader__logo .c-catchphrase {
padding: 4px 0;
font-size: 10px;
}
.l-fixHeader__inner .c-catchphrase,
.l-header__inner .c-catchphrase {
letter-spacing: .2px;
}
}
有難うございます。
無事に出来ました。
すみません、こちら確認が遅くなってしまいました!
解決済みのようなので、クローズとさせていただきます...!