Skip to content
Rakubo ドキュメントサイト

HTMLエリア (HTML Area)

HTMLエリアパーツは、カスタムHTMLコードを特集ページに直接埋め込むためのパーツです。既存のHTMLコンテンツを利用したい場合や、他のパーツでは実現できない特殊なレイアウトや機能を追加したい場合に使用します。

設定タブ

HTMLエリアパーツを選択すると、設定エリアに以下のタブが表示されます。

  • コンテンツ: HTMLコードを入力します。
  • スタイル: パーツ全体の背景、余白などを設定します。
  • メニュー: モバイルメニューや追従メニューに表示するかどうかを設定します。

コンテンツ設定

「コンテンツ」タブには、HTMLコードを入力するためのテキストエリアが表示されます。

HTMLエリア コンテンツタブ (HTMLコード入力用のテキストエリアを示すスクリーンショット)

  1. HTMLコードの入力: テキストエリア内に、ページに埋め込みたいHTMLコードを直接記述または貼り付けます。
    • <style> タグを使ってCSSを記述したり、<script> タグを使ってJavaScriptを記述することも可能です。（ただし、推奨される方法や制限事項があるか要確認）
  2. ライブプレビューの確認: 入力したHTMLコードの結果は、ライブプレビューエリアに反映されます。意図した通りに表示されているか、レイアウト崩れがないかなどを確認します。

スタイル設定

「スタイル」タブでは、HTMLエリアパーツ 全体 のコンテナに対するスタイルを設定します。埋め込んだHTMLコンテンツ自体のスタイルは、コンテンツタブ内のコードで直接指定する必要があります。

HTMLエリア スタイルタブ (スタイルタブ全体のスクリーンショット)

  • 背景: パーツコンテナの背景色や背景画像を設定します。
  • パディング・マージン: パーツコンテナの内側・外側の余白を調整します。
  • 枠線: パーツコンテナに枠線を追加します。
  • … その他、スタイルオプションがあれば記載。

メニュー設定

「メニュー」タブでは、このHTMLエリアパーツをモバイルメニューや追従メニューに含めるかどうかを設定します。

設定方法の詳細は「6. メニュー設定（モバイル・追従）」ガイドを参照してください。

これでHTMLエリアパーツの設定は完了です。