セクションの設定 - ビルディング - Carrd ドキュメント
Last updated on 5/24/2025@mrbirddev
セクションの作成
セクションの概念の中心にあるのは、セクションの開始と終了を示し、どの要素がそれに属するかを決定する特別なコントロール要素であるセクションブレイクです。使用方法は以下の通りです:
要素を追加をクリック。
コントロールをクリックして新しいコントロール要素を作成。
タイプをセクションブレイクに設定。
短くて説明的な名前を、小文字、数字、ハイフンのみで構成(例:
work
)。これによりセクションを一意に識別し、リンクすることができます(下記参照)。サイトを分割したい場所にセクションブレイクをドラッグし、クリックを離して配置します。それで完了です。ビルダーでは効果は見えませんが、サイトの公開バージョンでは以下のことが起こります:
- 設定した名前(例:
work
)で新しいセクションを作成し、セクションブレイク後のすべての要素を含めます(別のセクションブレイク、フッターマーカー、またはサイトの下部まで)。 - セクションブレイク前のすべての要素を(別のセクションブレイク、ヘッダーマーカー、またはサイトの上部まで)前のセクションに割り当てます。
- ... そして前のセクションが存在しない場合は、自動的に
home
という名前で作成します。
ボタンやリンク、URLを使用するほぼすべてのものにハッシュ
#
とセクションの名前を続けてリンクします(例:#work
)。(オプション) サイトのページ要素を選択し、アニメーションタブをクリックして、サイトがセクションを変更する際に使用するセクション変更時の効果を選択。
完了です! セクションへのリンクをクリックすると、すぐに開いて内容が表示されます(セクション変更効果が選択されている場合はそれを使用)。各セクションは、サイトのURLにハッシュ付きの名前を追加するだけでディープリンクできます(例:
foo.carrd.co/#work
)。また、セクション間を移動するための特別なURLにリンクすることもできます。
URL | Description |
---|---|
section:next | 次のセクションを開く。 |
section:previous | 前のセクションを開く。 |
section:first | 最初のセクションを開く。 |
section:last | 最後のセクションを開く。 |
...それだけです!このプロセスを繰り返してセクションを増やすか、さらに一歩進めてヘッダーやフッターを追加することもできます。
Last updated on 5/24/2025@mrbirddev