書類テンプレートのレイアウトは、HTMLでの編集も可能です。

HTMLタグの編集手順

書類テンプレートのレイアウトをHTMLで編集するには、まず編集画面の上部にある [HTMLタグ表示] アイコンをクリックしてください。

クリックすると、編集画面がHTMLタグ表示に切り替わります。

編集を行った後は、もう一度 [HTMLタグ表示] をクリックして表示を切り替え、画面下部にある [更新] をクリックすると、保存されます。

表（テーブル）を編集する

表（テーブル）の下にできた空白を埋める

書類テンプレートを作成すると、表（テーブル）の下に空白ができることがあります。

テーブルの下にある空白を埋めるには、テーブルの開始タグ <table> 内を編集してください。

1.  "margin-bottom: 0px;" に書き換える

 <table> タグのスタイルを style="margin-bottom: 0px;" に書き換えます。

2. テキスト表示に切り替え、 [更新] をクリック

最後に、ツールバーにある [HTMLタグ表示] でテキスト表示に切り替え、画面下部にある [更新] をクリックします。

更新が完了すると、テーブル下のスペースがなくなります。

テーブルの間にある空白を埋める

書類テンプレートを作成するとき、テーブルとテーブルのあいだに空白ができることがあります。

1.  "margin-bottom: 0px;" に書き換える

テーブル間にできた空白を埋めるには、1つ目のテーブルの開始タグに style="margin-bottom: 0px;" を追加します。

2. テーブルの間にある <p style="line-height: 1.2;"><span ... を削除

次に、今回の例に使用したテンプレートの場合、2つの <table> タグの間にある <p style="line-height: 1.2;"><span style="font-size: 12px;"><br></span></p> という箇所も削除します。

3. テキスト表示に切り替え、 [更新] をクリック

最後に、ツールバーにある [HTMLタグ表示] でテキスト表示に切り替え、画面下部にある [更新] をクリックします。

更新が完了すると、テーブル間のスペースがなくなっています。

列数の異なるテーブルとテーブルを結合する

項目ごとに列数が異なる場合、1つのテーブルでセルの結合を繰り返すと、列の幅が調整しづらくなることがあります。

以下の方法で、列数の異なるテーブルとテーブルを結合し、1つのテーブルのように見せることができます。

1. 列数が異なる項目ごとにテーブルを分けて追加

まず列数が異なる項目ごとにテーブルをぞれぞれ追加します。

2.  style="margin-bottom: -1px;" を挿入

それぞれの <table> タグに、style="margin-bottom: -1px;" を追加、または書き換えます。

3. テキスト表示に切り替え、 [更新] をクリック

最後に、ツールバーにある [HTMLタグ表示] をクリックしてテキスト表示に切り替え、画面下部にある [更新] をクリックします。

列数の異なる別々のテーブルが、1つの表のように表示され、列の幅の調整もしやすくなります。

テーブルの罫線を非表示にする

テーブル内の罫線は削除できません。

非表示にしたい場合は、罫線の色を白に指定してください。

1. style="border:1px solid #fff;" を挿入

罫線の色を白にするには、HTMLモードに切り替え、罫線を削除したい箇所にある <table> と <td> タグに、 style="border:1px solid #fff;" を挿入します。

2. テキスト表示に切り替え、 [更新] をクリック

最後に、ツールバーにある [HTMLタグ表示] でテキスト表示に切り替え、画面下部にある [更新] をクリックします。

更新が完了すると、罫線が見えなくなります。

画像の位置を右揃えにする

書類テンプレートに挿入した画像は、デフォルトでは左揃えのレイアウトで表示されます。

画像を右揃えで表示させるには、HTMLを編集する必要があります。

1. "display: block; margin: auto; margin-right: 0;" に書き換える

HTMLモードに切り替え、imgタグのスタイル部分を、 style="display: block; margin: auto; margin-right: 0;" に書き換えてください。

2. テキスト表示に切り替え、 [更新] をクリック

ツールバー上部の [HTMLタグ表示] をクリックしてテキスト表示に切り替えた後、画面下部の [更新] をクリックすると、画像が右揃えで表示されます。