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

2013年10月15日 09:10

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部分は変わらないはずです。

code44

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

4. ZIPで圧縮する

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

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

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

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

図:WebnodeのTemplate:

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

図:WebnodeのTemplate:

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

実践ブログ

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

2013年10月15日 09:10
CMSのWebnodeでheadに独自のタグを入れたり、CSSをカスタマイズする場合は、ちょっと複雑な作業が必要になるのでメモ。 管理画面上で簡単にできること: テンプレートの選択や編集 ヘッダ

Webnodeでサイトを公開する前に行うべきこと

2010年05月04日 00:40
CMSのWebnodeでサイトを立ち上げる前に行っておくと良いことのメモ。 Google Webmaster ToolsやYahoo Site...

SaaS型CMS「Webnode」の有料プランに加入してみた

2010年03月01日 22:28
無料でサイトを構築できるCMS+ホスティング16サービス一挙紹介でレビューしたSaaS型CMSのうち、本サイトで採用したチェコのSaaS型CMSである「Webnode」を使い続けて半年。良いサービスは

Webnodeのレビュー記事がCMS Wireに

2009年08月22日 15:25
ホスティング(レンタルサーバー)付きの超簡単CMSであるWebnodeのレビュー記事が、CMS Wireに掲載されています。 Webnode Does Simple CMS, Offers Web...

CMS『Webnode』のデザインテンプレートをレビュー

2009年08月06日 02:00
49種類の(デザイン)テンプレート が用意されています。Google...

CMSとしてWebnodeを採用しました

2009年07月26日 06:57
このサイトを立ち上げるためにSaaS(ASP)のCMSを15種類評価し、最終的に「Webnode」を選びました。 CMS選定にあたっての要件: 運用面 非営利の個人サイトなので導入も運用も無料にし

Real Time Web Analytics