Webnodeのテンプレートをカスタマイズする方法

CMSのWebnodeでheadに独自のタグを入れたり、CSSをカスタマイズする場合は、ちょっと複雑な作業が必要になるのでメモ。

管理画面上で簡単にできること：

• テンプレートの選択や編集
• ヘッダやフッタのカスタマイズ
• GoogleアナリティクスやGoogle Webmaster Toolのタグ挿入（IDを指定するだけ）

それ以外は、以下のような手作業が必要になります。

1. テンプレートをダウンロードする

テンプレートを変更する画面に移動し、「My templates」をクリックすると、自分が今使っているテンプレートをZIP圧縮してダウンロードするボタンが表示されます。

図:WebnodeのTemplate:

2. ダウンロードしたZIPファイルを解凍する

ファイル名はテンプレートによって異なります。解凍すると、複数のファイルやフォルダが作成されます。

3. HTMLファイルを編集する

変数するのは、直下にある「index.html」と、「variants」フォルダの中にあるHTMLファイルです。

図:WebnodeのTemplate:

これらはレイアウトが異なるだけなので、head部分は変わらないはずです。

CSSを編集したい場合は、「css」フォルダの中のファイルを編集します。

4. ZIPで圧縮する

余計なフォルダ（階層）が増えないようご注意。

方法にもよりますが、解凍してできるフォルダではなく、中身をバラバラと選択して圧縮すると良いでしょう。

5. 管理画面でアップロードする

ダウンロードする時と同じ画面で、今度は左側のボタン「Import my own template」をクリックし、4のZIPファイルを選択してアップロードします。

図:WebnodeのTemplate:

アップロードが終わったあとに、さらに「Use this template」ボタンをクリックしないと適用されません。

図:WebnodeのTemplate:

注意：テンプレートを変更すると、ページ毎のレイアウト指定がリセットされます。トップページやカテゴリTOPページを一通り目視で確認するとよいでしょう。