diff --git a/04-minisites.md b/04-minisites.md index dc563de..2a64fec 100644 --- a/04-minisites.md +++ b/04-minisites.md @@ -63,6 +63,53 @@ ミニサイトの管理画面から、公開済みの記事を追加することもできます。 +## サイト内カテゴリーで記事を分類する + +ミニサイトの中だけで使うカテゴリーを作れます。 +たとえば会社のお知らせ用のミニサイトなら、「お知らせ」「プレスリリース」「IR」のように分けられます。 + +ミニサイトにカテゴリーがあると、ミニサイトのトップページの記事一覧の上にカテゴリーのナビが表示され、読者がカテゴリーごとに記事を絞り込めます。記事のページにも、その記事のカテゴリーが表示されます。 + + + +> サイト内カテゴリーは、エディタの「カテゴリー・お題」で選ぶ mochott 全体のカテゴリーとは別のものです。両方を設定することもできます。 + +### カテゴリーを作る + +カテゴリーを作る方法は2つあります。 + +- **記事を書きながら作る**: エディタでミニサイトを選ぶと、その下に「（ミニサイト名）のカテゴリー」の欄が出ます。名前を入力して、一覧にない場合は「『（名前）』を作成」を選ぶと、その場で作られます。ミニサイトの記事管理の画面でも、同じように作れます +- **まとめて作る**: ミニサイトの設定画面の「サイト内カテゴリー」で、追加・名前の変更・並べ替え・削除ができます + +カテゴリーは、ひとつのミニサイトに20個まで作れます。名前は50文字までです。 + +### カテゴリーの ID について + +カテゴリーには、URL に使われる ID があります（例: `press`）。カテゴリーで絞り込んだページは `?category=press` のような URL になります。 + +- 記事を書きながら作った場合、ID は自動で決まります。名前が英数字ならその名前から（「Press Release」なら `press-release`）、日本語などの名前なら `c1`、`c2` … になります +- ミニサイトの設定画面で作る場合は、ID を自分で指定できます（半角の小文字・数字・ハイフンで32文字まで） +- ID は、一度保存すると変更できません。URL を変えないためです。意味のある ID にしたい場合は、設定画面から作ってください + +### 記事にカテゴリーを付ける + +- エディタで記事を書くとき、ミニサイトの下の欄でカテゴリーを選びます +- 公開済みの記事は、ミニサイトの記事管理の画面で、記事ごとにカテゴリーを変えられます + +### 知っておきたいこと + +- 記事が1件もないカテゴリーは、読者向けのナビには表示されません +- カテゴリーを削除すると、そのカテゴリーの記事は「未分類」になります。記事そのものは削除されません +- 記事をほかのミニサイトに移すと、カテゴリーは外れます +- カテゴリーごとの RSS も使えます（例: `rss.xml?category=press`） +- Tangled のリポジトリを元にしたミニサイトでは、サイト内カテゴリーは使えません + +## ほかのサイトに記事の一覧を表示する + +ミニサイトの最新記事を、会社のサイトなどほかのウェブサイトに表示できます。カテゴリーで絞り込んだ一覧を表示することもできます。 + +→ **会社のサイトにお知らせを表示する（サイトへの埋め込み）** + ## 次のステップ 気になるユーザーの記事を見つけたら、フォローしてみましょう。 diff --git a/08-site-embed.md b/08-site-embed.md new file mode 100644 index 0000000..e6004b8 --- /dev/null +++ b/08-site-embed.md @@ -0,0 +1,241 @@ +# 会社のサイトにお知らせを表示する（サイトへの埋め込み） + +ミニサイトの最新記事を、会社のサイトなど**ほかのウェブサイトに表示できる**機能です。 +HTML に2行貼るだけで、「お知らせ」や「プレスリリース」の一覧を設置できます。 + +ニュース欄のためだけに WordPress などの CMS を用意する必要はありません。 +サイト本体は静的な HTML のまま、更新が必要な部分だけを mochott で書いて公開できます。CMS のアップデートやセキュリティ対策の手間も減らせます。 + + + +## できること + +- 会社のサイトのトップページなどに、ミニサイトの最新記事の一覧を表示します +- 表示する件数や、カテゴリー（「プレスリリース」だけ、など）を指定できます +- 記事をクリックすると、mochott のミニサイトにある記事のページが開きます。ミニサイトに独自ドメイン（例: `news.example.com`）を設定していれば、そちらのページが開きます +- 一覧の見た目は、サイトのデザインに合わせて変えられます +- 表示できるのは、**あなたが所有を確認したサイトだけ**です。ほかの人のサイトに勝手に埋め込まれて、公式の情報のように見せかけられることはありません + +## 準備するもの + +- お知らせ用のミニサイト（まだなければ「ミニサイトを作る」を参照してください） +- 表示したいサイトの HTML を編集できること +- そのサイトに確認用のファイルを置けること、または DNS を設定できること（どちらか一方） + +> **おすすめ**: 記事の詳細ページも自社のドメインで見せたい場合は、ミニサイトに独自ドメイン（例: `news.example.com`）を設定しておくと、一覧のリンク先がそのドメインになります。 + +## 設置の手順 + +### 1. ミニサイトのカテゴリーを用意する（必要な場合） + +「お知らせ」「プレスリリース」「IR」のように分けて表示したい場合は、ミニサイトのカテゴリーを用意します。 + +- ミニサイトの設定画面の「サイト内カテゴリー」でまとめて作れます +- 記事のエディタや、ミニサイトの記事管理の画面で、カテゴリー名を入力してその場で作ることもできます + +カテゴリーを使わない場合は、この手順は飛ばしてかまいません。 + +### 2. 埋め込みを有効にする + +1. ダッシュボードのメニューから「ミニサイト」を選び、お知らせ用のミニサイトの設定を開きます。 +2. 下のほうにある「サイトへの埋め込み」で、「埋め込みを有効にする」をクリックします。 +3. 「貼り付けるコード」が表示されます。表示件数とカテゴリーを選ぶと、コードに反映されます。 + + + +コードは次のような2行です。`key` の値はミニサイトごとに異なります。 + +```html + + +``` + +### 3. 表示するサイトを登録して、所有を確認する + +1. 「表示を許可するサイト」に、表示したいサイトのオリジンを入力します。 + - オリジンとは `https://www.example.com` のように、`https://` とドメイン名だけの部分です（`/news` などのパスは含めません） + - `https://example.com` と `https://www.example.com` は別のサイトとして扱われます。両方で表示する場合は、両方を登録してください +2. 確認方法を「ファイルを置く」か「DNS に TXT を追加」から選び、「追加」をクリックします。 +3. 表示された手順に従って、確認用の値を公開します。 + +**ファイルを置く場合** + +表示された URL（`https://www.example.com/.well-known/mochott-embed.txt`）で、表示された1行だけを書いたテキストファイルを公開します。 + +```text +mochott-embed=（表示された値） +``` + +**DNS に TXT を追加する場合** + +ドメインの管理画面で、次の TXT レコードを追加します。 + +| 名前 | 値 | +| --- | --- | +| `_mochott-embed.www.example.com` | `mochott-embed=（表示された値）` | + +4. 公開できたら「確認する」をクリックします。「確認済み」になれば完了です。 + +確認は**一度だけ**です。確認が済んだら、ファイルや DNS のレコードは削除してもかまいません。 + +> **ヒント**: DNS の設定はドメインを管理している部署や会社しか変更できないことがよくあります。サイトにファイルを置けるなら「ファイルを置く」のほうが手早く済みます。 + +### 4. コードを貼る + +お知らせを表示したい場所に、手順2のコードを貼り付けます。 + +```html +
+

お知らせ

+ + + お知らせ一覧へ + +
+``` + +`` の中に書いたリンクは、記事を読み込むまでの間や、JavaScript が動かない環境で表示されます。お知らせ一覧へのリンクを書いておくのがおすすめです。 + +同じページに `` を複数置くこともできます（`