背景+リード文
背景イメージと見出し、テキスト、ボタンリンクを表示します。デスクトップのレイアウトは3タイプあります。
ユニット追加画面
前半(全体)
追加クラス
ユニットを包括しているdiv要素に、class属性を追加できます。
クラス名のみを半角スペースで区切って入力してください。
追加属性
ユニットを包括しているdiv要素に、class以外の属性を追加できます。
属性名も含めて入力してください。
背景色
ユニットの背景色を、白・文字色・ブログの外観の設定のカラーから選択できます。
レイアウトが「タイプ2」か「タイプ3」だった場合は、選択したカラーを維持したまま半透明になります。
画像
デスクトップ用・モバイル用の画像をアップロードしてください。モバイル用が設定されていなかった場合はデスクトップ用の画像がモバイル端末でも表示されます。
推薦サイズは「画像素材の推薦サイズ一覧」を参照ください。
トリミング
ウィンドウサイズが変わったときの画像の挙動を変更できます。
画像をトリミングする
常にユニットのサイズを一定に保ち、背景画像がはみ出す場合はトリミングします。写真のレイアウトによっては、被写体が欠けてしまうことがあります。
トリミングしない
常に画像本来の縦横比を保ち、背景画像全体を表示しようとします。画面サイズによってユニットの高さが変わるため、文字数が多いとはみ出すことがあります。
レイアウト
デスクトップのレイアウトを3タイプから選択できます。
配置
画像とリード文の左右位置を選択してください。
後半(リード文)
見出しサイズ
リード文見出しの文字サイズを選択できます。文字数が多い場合は「小さい」「さらに小さい」をお勧めします。
見出しタイプ
リード文見出しのデザインを選択できます。
見出しレベル
リード文見出しをマークアップするHTMLタグを選択できます。
見出しテキスト
リード文見出しのテキストを入力してください。spanなどのHTMLタグを使用できます。
未入力の場合は見出しを表示しません。
本文テキスト
見出しの下のリード文を入力してください。HTMLタグを使用できます。
未入力の場合は本文を表示しません。
ボタンのURL
何らかのページへの移動をさせたい場合は、ここにURLを入力してください。
未入力の場合はボタンを表示しません。
ボタンテキスト
ボタンに表示する文字列を入力してください。未入力の場合「詳しくはこちら」となります。
ボタンカラー
ボタンの背景色もしくは枠線の色を、白・文字色・ブログの外観の設定のカラーから選択できます。
リンク先の挙動
ボタンをクリックしたときに、リンク先を別ウィンドウで表示するかを選択できます。