> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 上級｜これらのスタイリッシュなレイアウトはどう作る？

> DingTalk ナレッジグループページ向けの 5 種類のスタイリッシュなレイアウトと事例。

| **スタイル番号** | **5種類のスタイリッシュなレイアウト** |
| ---------- | --------------------- |
| スタイル1      |                       |
| スタイル2      |                       |
| スタイル3      |                       |
| スタイル4      |                       |
| スタイル5      |                       |

<Note>
  **スタイル1**

  Step1：カスタムホームページ画面に入り、レイアウトを追加し、3カラムレイアウトを選択します。

  Step2：カルーセル画像モジュールを各レイアウトに順番にドラッグします。

  Step3：保存をクリックしてグループホームページに戻り、鉛筆マークまたは追加をクリックして編集に入ります。

  Step4：画像をアップロードし、ジャンプ先のDingTalkドキュメントまたはリンクを設定します。
</Note>

Step5：編集完了後に完了をクリックし、グループホームページに戻ります。画像の上部で各カラムの見出しを変更できます。各カラムのコンテンツを順番に設定すれば、このスタイルの効果を得られます！

<Note>
  **スタイル2**

  Step1：カスタムホームページに入り、まずレイアウトを追加し、カラム分けなしのレイアウトを選択します。

  Step2：レイアウトを追加した後、「便利な入口」モジュールをレイアウト内にドラッグします。

  Step3：カスタムページを保存し、グループホームページに入ります。

  Step4：当該モジュールで、コンテンツの追加をクリックします。

  Step5：各便利な入口は、アイコン（自分でアップロードすることも可能）とジャンプ先のコンテンツをカスタマイズできます。

  Step6：表示したい便利な入口を順番に追加します。
</Note>

Step7：追加が完了したら、保存してホームページに戻り、グリッドスタイルを選択すれば、この表示効果を得られます！

<Note>
  **スタイル3**

  Step1：まずカスタムページでレイアウトを追加します。

  Step2：自由コンテンツモジュールをドラッグして配置し、保存します。

  Step3：グループホームページに戻り、追加をクリックします。

  Step4：カラム分けの挿入をクリックします。

  Step5：カラム内にさらにカラムを挿入し、同時に＝マークをクリックし、画板マークをクリックしてカラムの背景色を調整します。

  Step6：各カラムには画像、動画などのコンテンツを挿入でき、リンクを挿入したり、テキストコンテンツをカスタマイズしたりすることもできます。

  Step7：入力後、ツールバーを使用して、フォントサイズや色などをカスタマイズ調整できます。

  Step8：保存後にこの効果を得られます。複数行が必要な場合は、カラム分けを複数回挿入してください。
</Note>

<Note>
  **スタイル4**

  Step1：カスタムページでレイアウトの追加をクリックします。

  Step2：自由コンテンツをここにドラッグします。

  Step3：カスタムページを保存します。

  Step4：グループホームページに戻り、追加をクリックします。

  Step5：カラム分けを挿入します。

  Step6：3カラムを挿入します。カラム内にさらにカラムを挿入することも可能です。

  Step7：カラムの背景と枠線の色を選択します。

  Step8：カラム内にコンテンツを入力し、確認をクリックすればスタイル効果を得られます！
</Note>

<Note>
  **スタイル5**

  Step1：カスタムホームページ画面で2カラムレイアウトの追加をクリックします。

  Step2：便利な入口をそれぞれ2カラムにドラッグし、保存してグループホームページに戻り、コンテンツを追加します。

  Step3：便利な入口アイコンは、画像のカスタムアップロードに対応しています。

  Step4：表示したいコンテンツを順番に入力した後、完了をクリックします。

  Step5：グループホームページに戻り、「…」をクリックしてカードスタイルを選択します。

  Step6：2カラム目も同じ方法でアイコンを選択します（アイコンは色の選択にも対応しています！）。

  Step7：コンテンツを順番に入力した後、完了をクリックします。

  Step8：グループホームページに戻ると、表示効果を確認できます。
</Note>

**以上のスタイルはあくまで参考です。創造力を存分に発揮し、より美しく実用的なスタイルをデザインしてみてください！**