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

**URL:** https://meta.discourse.org/t/image-and-text-as-logo/138996
**Category:** Support
**Created:** [2020 年 1 月 17 日午後 11:40 UTC](https://meta.discourse.org/t/image-and-text-as-logo/138996 "2020-01-17T23:40:51Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![wallaceandgromit](https://avatars.discourse-cdn.com/v4/letter/w/e9bcb4/32.png) [@wallaceandgromit](https://meta.discourse.org/u/wallaceandgromit)
#### Post date: [2020 年 1 月 17 日午後 11:40 UTC](https://meta.discourse.org/t/image-and-text-as-logo/138996/1 "2020-01-17T23:40:51Z")

</div>

こんにちは。

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

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

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

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

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2020 年 1 月 18 日午前 12:24 UTC](https://meta.discourse.org/t/image-and-text-as-logo/138996/2 "2020-01-18T00:24:32Z")

</div>

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

---

<div class="post-metadata">

### Author: ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [2020 年 1 月 18 日午前 2:14 UTC](https://meta.discourse.org/t/image-and-text-as-logo/138996/3 "2020-01-18T02:14:37Z")

</div>

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

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

```

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/4/84f4eeba697b1d7edeb53bdeafe15ef088b867b9.png)

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

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/f/7f5df16d3ced3fbb8ce3d64cbdd8dd69f8a4d470.png)

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

---

<div class="post-metadata">

### Author: ![wallaceandgromit](https://avatars.discourse-cdn.com/v4/letter/w/e9bcb4/32.png) [@wallaceandgromit](https://meta.discourse.org/u/wallaceandgromit)
#### Post date: [2020 年 1 月 18 日午後 12:42 UTC](https://meta.discourse.org/t/image-and-text-as-logo/138996/5 "2020-01-18T12:42:00Z")

</div>

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

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

---

<div class="post-metadata">

### Author: ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [2020 年 1 月 20 日午後 8:31 UTC](https://meta.discourse.org/t/image-and-text-as-logo/138996/6 "2020-01-20T20:31:46Z")

</div>

お試しください

```plaintext
.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;
}

```

```plaintext
<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>

```

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

> **[GitHub - oerog/header-text: Add Text After Your Logo on Discourse](https://github.com/oerog/header-text)**
>
> Add Text After Your Logo on Discourse

---

<div class="post-metadata">

### Author: ![wallaceandgromit](https://avatars.discourse-cdn.com/v4/letter/w/e9bcb4/32.png) [@wallaceandgromit](https://meta.discourse.org/u/wallaceandgromit)
#### Post date: [2020 年 1 月 22 日午後 10:18 UTC](https://meta.discourse.org/t/image-and-text-as-logo/138996/7 "2020-01-22T22:18:37Z")

</div>

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

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [2020 年 2 月 21 日午後 10:22 UTC](https://meta.discourse.org/t/image-and-text-as-logo/138996/8 "2020-02-21T22:22:36Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.