# 外部サイトへのDiscourseトピックリストの埋め込みに関するスタイリングと使用の例
**URL:** https://meta.discourse.org/t/examples-of-styling-and-use-of-embedding-a-list-of-discourse-topics-on-a-external-site/130672
**Category:** Support
**Created:** [2019 年 10 月 10 日午前 8:31 UTC](https://meta.discourse.org/t/examples-of-styling-and-use-of-embedding-a-list-of-discourse-topics-on-a-external-site/130672 "2019-10-10T08:31:35Z")
**Posts on this page:** 1
**Showing post:** 4
### Author:  [@adamgpope](https://meta.discourse.org/u/adamgpope)
#### Post date: [2021 年 5 月 12 日午後 4:58 UTC](https://meta.discourse.org/t/examples-of-styling-and-use-of-embedding-a-list-of-discourse-topics-on-a-external-site/130672/4 "2021-05-12T16:58:57Z")
少しいじって、トピックリストの上部に検索バーを追加しました。これで私の埋め込みは以下のようになります：
検索フォーム、スタイル、トピックリストのコード：
> **要約**
>
> ```
>
>
>
>
>
>
>
>
>
>
> ```
ボックスレイアウトを実現するために、Discourse の埋め込み CSS では `grid` の代わりに `flex` を使用しました。
> **要約**
>
> ```
> .topics-list {
> display: inline-flex;
> flex-wrap: wrap;
> padding: 8px 8px 0 8px;
> margin: 3px 3px 0 0;
>
> .topic-list-item .main-link {
> border: 1px solid gray;
> margin: 5px;
> width: 250px;
> height: 90px;
> }
>
> .topic-column-wrapper {
> flex-direction: column-reverse;
>
> .topic-column.details-column {
> width: 100%;
> }
>
> .topic-created-at {
> padding-left: 0!important;
> font-size:13px;
> }
>
> .topic-column.featured-image-column .topic-featured-image img {
> display:none;
> }
> }
> }
>
> .new-topic-btn {
> float: left;
> margin: 16px 0 0 58%;
> height: 40.5px;;
> background:#1e825b;
> }
> .new-topic-btn:hover {
> background: rgb(73, 130, 5);
> }
>
> ```
---
_[View the full topic](https://meta.discourse.org/t/examples-of-styling-and-use-of-embedding-a-list-of-discourse-topics-on-a-external-site/130672)._