画像とテキストをロゴとして

サポート
1

こんにちは。

フォーラムに「ロゴ」画像と「タイトル」を設定しています。

現在、ヘッダーには「ロゴ」のみが表示されています。これを、ロゴの右側に「タイトル」も表示されるようにしたいです。スレッドのタイトルがロゴの横に表示される形式（ページをスクロールすると、サイトタイトルがスレッドのタイトルに置き換わる）と同じようにしたいと考えています。

これは可能でしょうか？Googleで検索しても解決策が見つかりませんでした。

よろしくお願いいたします。

2

テキストも必要なら、ロゴにテキストを含めてデザインすればいいのでは？

3

以下のような方法があります

d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "ここにテキストを表示";
}

image
image1004×394 21.3 KB

ただし、トピックのタイトルが表示されるなど、表示したくない場所では非表示にする必要があります。

image
image994×402 20.6 KB

これを行うには、archetype-regular というボディクラスを持つページでは表示しないようにする（この場合、トピックページには一切表示されません）か、スクロール開始時に Large ロゴと Small ロゴが入れ替わるのと同じように、JavaScript で非表示にする処理を追加します。

5

ご回答いただき、誠にありがとうございます。それは素晴らしいですね！

おっしゃる通り、それを消すために必要な JavaScript はご存知ですか？それだと最高です。

6

お試しください

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Here is some text";
}
.archetype-regular #main.no-text .d-header .title::after,
.archetype-private_message #main.no-text .d-header .title::after  {
    display:none;
}

<script>
    $(document).ready(function() {
    	$(window).scroll(function(){
    		checkScroll()
        }); 
    
    	function checkScroll() {
    		var y = $(window).scrollTop();		
    		if (y > 55) {
                document.getElementById("main").classList.add('no-text');
            } else {
                document.getElementById("main").classList.remove('no-text');
            }
    	}
    	checkScroll();
    });
</script>

コンポーネントとしてはこちらです

7

ありがとうございます！完璧です。