NOVAのLPブロックのプレビューと説明
詳細なLPブロックの使用方法は以下を参照してください。
これはセンターブロックです（H2）
NOVAのランディングページ（LP）作成機能はブロック単位で作成します。
LPブロックは「通常ブロック、センターブロック、カラムブロック、画像ブロック」の4種類です。
それぞれのブロックは「背景色、グラデーション背景、背景画像、背景黒透過、背景白透過、背景の高さ」を設定可能です。
各ブロックやその設定はコピペや書き換えで簡単に作成、切り替え可能です。
現在あなたが読んでいるこのブロックは「センターブロック＋背景画像＋背景黒透過」を設定したものです。
センターブロックは単純に見出しやテキストを中央寄せにするブロックです。
ここではあわせて背景画像を設定し、テキストを見やすくするため背景を黒く透過しています。
またすべてのLPブロックは通常の記事と同じように編集可能なので
以下のように見出し、テキスト、ボタンリンク、画像など通常可能なあらゆるものを表示、編集することができます。
H3見出し
あいうえお。
これは通常ブロックです（H2）
これは通常ブロックです。通常ブロックは特徴のない、通常の記事と同じように扱うブロックです。扱う商品やサービスを説明するテキスト、画像、動画などの設置に適しています。
H3見出しについて
H3見出しはサイトカラーが自動で適用されます。任意の色にするには通常と同じようにテキストを選択して「文字色」ボタンから変更できます。
背景色を変更する
ここでは背景色をグレーにしています。全てのLPブロックの背景色は初期値で「background-color: #ffffff;」と白色に設定されています。「#ffffff」の部分を書き換えて任意の色を指定します。ここでは「#f3f3f3」にしています。
好きなカラーを取得する方法は以下を参考にしてください。
これは通常ブロックです（H2）
このブロックは通常ブロックに「背景画像、背景白透過」を指定した場合です。
「背景白透過」では背景画像が白く透過され、テキストは黒になります。
また「背景の高さ」ですが、LPブロックは画面のサイズに合わせて自動調整して表示されるレスポンシブデザインです。そのため背景画像のサイズや縦横の比率に制限はありません。どんな画像でも中央を基準に適切に調整し表示されます。
しかし何かしらの理由で「背景の高さ」を固定したい場合もあるかもしれません。背景の高さは初期値で「height: auto」と自動的に調整される設定になっているので「height: 400px」のように書き換えて固定することができます。
背景の高さを固定すると、テキスト量が多い場合にスマホ表示では収まらなかった部分が隠れてしまう場合があるので必ずスマホ表示を確認してください。
これはカラムブロックです（H2）
テキストテキスト（H3）
カラムブロックは横2列で一方に画像、もう一方にテキストを配置するブロックです。
基本的に左（1カラム目）が画像、右（2カラム目）がテキストで使用してください。左右のコンテンツはスマホ表示だと縦並びに表示され左が上、右が下になります。
画像を右にしたい場合は「no-rev」の部分を「rev」に書き換えてください。スマホ表示の上下はそのままに横並びの左右のみを入れ替えて表示できます。
また「no-circle」の部分を「circle」と書き換えると画像を円形に切り抜いて表示できます。正方形の画像でなければ真円にならないので注意してください。
これはカラムブロックです（H2）
テキストテキスト（H3）
こちらが「no-rev」の部分を「rev」に書き換えた場合です。内部的には左に画像、右にテキストを配置していますが表示は左右逆になり、スマホ表示では画像、テキストの順で表示されます。
またここでは「グラデーション背景」を設定しました。グラデーションはWebGradients.comやEggradients.comで任意のグラデーションの「CSSをコピーする」をクリック。「background: linear-gradient();」の行に貼り付けると反映されます。
また背景の色でテキストが見づらくなったので、H3見出しのフォントカラーを通常と同じようにテキストを選択して「文字色」ボタンから白に変更しました。リンクテキスト色も同様の手順で変更可能です。
これは画像ブロックです（H2）
これは画像を横並びで表示できる「画像ブロック」です。2カラム（横2列）から4カラムをサポートします。
任意のテキストを画像の上か下部に表示できます。
スマホ表示では自動で縦並びになりますが、タブレット（の画面サイズ）表示だと4カラムの場合は2x2、3カラムの場合は2x1で表示されます。
タブレット表示で横並びのままにしたい場合は「img-col t2x2」の「t2x2」の部分を削除で可能になります。
ここに画像下部テキスト。
ここに画像下部テキスト。
ここに画像下部テキスト。 ここに画像下部テキスト。
以下は4カラム目を削除して3カラムにした場合です。