# ヘッダーにテキストリンクを追加するにはdecorateWidgetを使用します

**URL:** <https://meta.discourse.org/t/use-decoratewidget-to-add-text-link-to-header/289542>\
**Category:** Development\
**Created:** [2023 年 12 月 22 日午後 1:36 UTC](https://meta.discourse.org/t/use-decoratewidget-to-add-text-link-to-header/289542 "2023-12-22T13:36:25Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [2023 年 12 月 22 日午後 6:48 UTC](https://meta.discourse.org/t/use-decoratewidget-to-add-text-link-to-header/289542/2 "2023-12-22T18:48:38Z")

</div>

ここにテキストを挿入する必要があります。

```js
helper.h('a.icon', {
    href:'/docs',
    title: 'Document'
}, ["test", iconNode("book")]),

```

リンクのCSSを調整する必要があります。

たとえば：

```css
padding-inline-end: 2em;
justify-content: space-between;
color: currentcolor;

```

![chrome_Tk18DUhJQQ](https://global.discourse-cdn.com/meta/original/4X/2/0/a/20a6a4ccee110c20e1519471876de776038262bc.png)

> [@martyn\_thomas](#):
>
> また、アイコンをヘッダーの左側（ロゴの隣）に配置する方法はありますか？

右側を意味する場合、次のように試すことができます。

```js
api.decorateWidget('home-logo:after', helper => {
    return helper.h('div.d-header-icons', [
        helper.h('a.icon.btn-flat.doc', {
            href:'/docs',
            title: 'Document'
        }, [iconNode("book"), "Doc"]),
    ]);
});

```

```css
.d-header-icons .icon.doc {
    width: auto;
    gap: 0.5em;
    margin-inline: 1em;

    & .d-icon {
        width: 1em;
    }
}

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/6/5/d/65dc226c59922561820baa57418da1c3c75cb724.png)

簡単にテストしましたが、多少の癖があるかもしれませんが、大まかなアイデアはつかめるはずです！

---

_[View the full topic](https://meta.discourse.org/t/use-decoratewidget-to-add-text-link-to-header/289542)._