会員サイトをリニューアルしました! 新サイトはこちら

ヘッダーロゴの横にテキスト表示 < SWELLに関する質問

フォーラムをリニューアルしました!
今後は、新フォーラムをご利用ください。

ヘッダーロゴの横にテキスト表示
 
通知
すべてクリア

[解決済] ヘッダーロゴの横にテキスト表示

8 投稿
3 ユーザー
1 Likes
2,955 表示
hide3013
(@hide3013)
New Member
Topic starter
 

ヘッダーロゴの横にテキストを入れたのですが、メニュー追従でメニューが出てきたらテキストが表示されません。以下の3つの方法をご教授願います。

1.追従メニューでロゴ横のテキスト表示方法

2.ロゴ横のテキストを2段に表示させる方法

3.ロゴ横のテキストのサイズ変更

対象サイト:www.sky-inter.jp

 
投稿済 : 05/03/2020 10:46 pm
DRILL LANCER
(@rick_addison)
Active Member
 

1.追従メニューでロゴ横のテキスト表示方法

  1. swell/parts/header/fix_header.php を swell_child/parts/header/fix_header.php となるよう子テーマに複製
  2. 子テーマの 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>
  3. 子テーマの 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です。

This post was modified 5年前 by DRILL LANCER
 
投稿済 : 06/03/2020 2:15 am
hide3013
(@hide3013)
New Member
Topic starter
 

ご教授有難うございます。

もう2点ほどご教授願います。

①2のロゴ横テキストを2段にする方法で入力欄に <br> を追加したのですが

 <br>がそのまま表示され2段に表示されません。

 

②追従メニューでフォント変更は出来たのですが、一番最初に表示される

 ヘッダーメニューのフォントサイズはどこで変更すれば良いのでしょうか?

素人的な質問で申し訳ございません。

何度もすみませんがご教授の程、よろしくお願いします。

 
投稿済 : 07/03/2020 2:01 am
DRILL LANCER
(@rick_addison)
Active Member
 

①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; の値を変更すれば今度こそ一気にできるようになると思います。

 
投稿済 : 07/03/2020 3:11 am
hide3013
(@hide3013)
New Member
Topic starter
 

度々スミマセン。

2行表示は出来ましたが、やはり2番のフォントサイズが追従メニューは変更できるのですが

最初のメニューのフォントサイズが変わりません。

ご教授の程、よろしくお願いします。

 
投稿済 : 07/03/2020 4:46 am
DRILL LANCER
(@rick_addison)
Active Member
 

前回の 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;
}
}
 
投稿済 : 07/03/2020 8:49 pm
ゆう reacted
hide3013
(@hide3013)
New Member
Topic starter
 

有難うございます。

無事に出来ました。

 
投稿済 : 08/03/2020 3:57 am
了(開発者)
(@ryo)
Illustrious Member Admin
 

すみません、こちら確認が遅くなってしまいました!
解決済みのようなので、クローズとさせていただきます...!

 
投稿済 : 11/03/2020 3:02 am
共有: