【Impreza】余白を追加するには

Wordpressテンプレートの一つであるImprezaついてご説明します。
（本マニュアルはImpreza 5.1を元に作成しております）

余白について

余白の設定方法はいくつかあります

• 行間
  　　行（row）ごとに余白を設定できます
  
  
• 要素間
  　　ひとつの行を幾つかのカラムに分けることができますが、そのカラムごとの余白を設定できます
  
  
• 余白要素の挿入
  　　区切り線や空白などの要素を利用することで余白を設定できます

【Row】行間を設定するには

以下の図の場合について説明します。

1. 行間を設定したい行の右上にある鉛筆マーク（この行を編集）をクリックします。
   
   
   
   
2. 行 設定画面が表示されます。
   
   
   
   
3. 「Row Height」で、どのくらいの余白にするか選択します。
   
   
   
   
4. 「変更保存」をクリックします。
5. 選択したRow Heightに応じた余白が設定されます。
   
   例）この状態で下の行のRow Heightを変更した場合（黄色エリアは行間の外）
   
   
    
   ※Full Screenの場合は余白の高さが実際に表示している画面の高さになります

【カラム】要素間を設定するには

 以下の図の場合について説明します。

1. 行内の鉛筆マーク（このカラムの編集）をクリックします。
   
   
   
   
2. カラム 設定画面が表示されるので、「デザインオプション」タブをクリックします。
   
   
   
   
3. CSS Boxのpaddingに挿入したい余白の値を入力します。
   
   
   
   
4. 「変更保存」をクリックします。
5. 選択したpaddingに応じた余白が設定されます。
   
   例）3カラムのうち中央のカラムのpaddingを変更した場合
   
   
   
   
   

余白要素を挿入するには

　ここでは、画像(Single Image)と画像(Single Image)の間に余白を入れる場合について説明します。　

　①【Separator】 区切り線を利用する方法

1. 行内の（このカラムの前に追加）をクリックします。
   
   
   
   
2. 要素追加画面が表示されるので、「Separator」をクリックします。
   
   
   
   
3. Separatorが作成されます。
   
   
   
4. Separatorにカーソルを合わせ、鉛筆マーク  をクリックします。
   
   
   
   
5. Separator 設定画面が表示されるので、以下を設定します。
   
• タイプ：「invinsible」（透明で見えなくなります）
• サイズ：入れたい余白のサイズに応じて「Medium」などのいずれかを選択
  
  
  
  
6. 「変更保存」をクリックします。
   
7. 作成したSeparatorを、余白を入れたい箇所にドラッグ＆ドロップします。
   
   
   「プレビュー」をクリックすると、Separator挿入によって余白が入ったことが確認できます。
   
   　　Separatorなし　　　　　　Separatorあり
   　　　　
   

 ②【空きスペース】空白を利用する方法

1. 行内の（このカラムの前に追加）をクリックします。
   
   
   
   
2. 要素追加画面が表示されるので、「空きスペース」をクリックします。
   
   
   
   
3. 空きスペース 設定画面で高さを設定します。
   
   
   
   
4. 「変更保存」をクリックします。
5. 作成した空きスペースを、余白を入れたい箇所にドラッグ＆ドロップします。
   
   
   「プレビュー」をクリックすると、空きスペース挿入によって余白が入ったことが確認できます。
   
   　　空きスペースなし　　　　空きスペースあり
   　　

③【Spacer/Gap】端末ごとにコンポーネント間の余白を設定する方法

1. 行内の（このカラムの前に追加）をクリックします。
   
   
   
   
2. 要素追加画面が表示されるので、「Spacer/Gap」をクリックします。
   
   
   
   
3. Spacer/Gap 設定画面でDesktop、Tabs（横向き・縦向き）、Mobile（横向き・縦向き）の余白を入力します。
   
   
   
   
4. 「変更保存」をクリックします。
5. 作成したSpacer/Gap を、余白を入れたい箇所にドラッグ＆ドロップします。
   
   
   「プレビュー」をクリックすると、表示する端末や向きごとに余白が異なることが確認できます。
   
   表示例）
   
   ※画面の向きが自動的に切り替わる場合、変更後の向きにあった余白にするためには画面の再表示が必要な場合がありますのでご注意ください。