ページ作成編

manual

最初の1ページを作る

さっそくWEBサイトを作って見ましょう!
アカウント開設後初期ファイルがアップロードされていますので不要な方はすべて削除してください。

最初の1ページとなる.htmlファイルを作成し、FTPクライアントを使ってアップロードします。まず最初にテキストエディタで次の内容をファイルとして保存し、ファイル名をindex.htmlとします。このファイルをイイウェブのサーバーにアップロードしてください。

アップロード解説

左のファイルを右にドラック&ドロップしてアップロードが完了になります。

管理ページ ファイル画面

index.htmlファイルがアップロードされたらイイウェブの管理画面に移動し、ファイルが反映していることを確認しましょう。

テスト環境

テスト環境で先ほどアップロードしたページを確認することができます。

他のページも作る

cssや画像ファイルもアップロードしてみましょう。

他のページも作る

*マークが本番環境と異なるファイルになります。

アップルアイコン

またapple-touch-icon.pngをルートに設置することによってイイウェブ上でのアカウント切り替えが分かりやすくなり、今どのサイトを選択中か確認できます。

共通のヘッダー部分などを別ファイルにする

htmlファイルで共通部分を使用することがあると思いますがイイウェブではテンプレート変数を使用して共通部分を作ることができます。

コンパイル前
@import "_header.html";

<article>
	主コンテンツ
</article>

@importと記述し埋め込みたいファイル名を指定します。

別ファイル _header.html
<header>
	共通ヘッダー
</header>

ヘッダーファイルを別htmlファイルとして作ります。
_アンダースコアを使用して隠しファイルにしています。

コンパイル後
<header>
	共通ヘッダー
</header>

<article>
	主コンテンツ
</article>

イイウェブサーバーにアップロードすると出力後のhtmlとなり公開されます。
メンテナンスがしやすく、ページ数が多いWEBサイトの場合に便利です。

共通のページ基盤を別ファイルにする

@export構文を使うと別のファイルにインポートさせることができます。

別ファイル _base.html
<!DOCTYPE html>
<html>
	<head>...</head>
	<body>
		@import *;
	</body>
<html>

ベースのhtmlを用意します。
_アンダースコアを使用して隠しファイルにしています。

コンパイル前
@export "/_base.html";

<article>
	主コンテンツ
</article>

@export構文とコンテンツの中身を記述します。

コンパイル後
<!DOCTYPE html>
<html>
	<head>...</head>
	<body>
<article>
	主コンテンツ
</article>
	</body>
<html>

イイウェブにアップロードすることで1つのhtmlファイルとして出力されます。
フォーマットが決まったページの量産の場合に便利です。

ページごとに指定する

テンプレート変数を使用することによってページ毎に文字や数字を変更することができます。
ページ毎に変更する設定はテンプレート変数ページで行います。

テンプレート変数
コンパイル前
<title>{user/title}</title>
コンパイル後 /index.html
<title>マイサイト</title>
コンパイル後 /news.html
<title>最新記事</title>

テンプレートページから一括して値を指定することができます。
また「ファイル」からhtmlファイルをクリックすると1ページにすべてのテンプレートタグの値を変更することもできます。

ページテンプレート変数

条件分岐

テンプレート変数を使用することによって「このページには表示する」「その他のページには表示させない」といった条件分岐ができます。
例)TOPページとTOPページ以外、日本語サイトと多言語サイトなど

テンプレート変数分岐
共通ヘッダの例
<!--{user/menuBar==1}-->
	<nav>
		1を指定したページでだけ表示されます
	</nav>
<!--{/}-->

トップページのみ表示させる場合の例。

共通ヘッダの例
<!--{user/menuBar==1}-->
	<nav>
		1を指定したページに表示されます
	</nav>
<!--{/}-->
<!--{user/menuBar==2,3}-->
	<nav>
		2または3を指定したページに表示されます
	</nav>
<!--{/}-->
<!--{user/menuBar!=1,2,3}-->
	<nav>
		1,2,3「以外」を指定したページに表示されます
	</nav>
<!--{/}-->

応用すると2種類以上に分岐させることができます。

テンプレート変数のバックアップ

テンプレート変数のバックアップ

テンプレート変数はバックアップすることができます。
新規サイトを作った場合に初めからタグを登録する必要はありません。
こちらでバックアップできるのはあくまで「テンプレート変数」だけです。サイトを構成する実際のファイル群はFTPを通じてバックアップしてください。

画像を貼り付ける

画像タグ<img>src=""の中は「相対パス」を指定するか、
あるいは/から始まる「ルート相対パス」を指定してください。これらにはホスト名が含まれないため、テスト環境とプロダクション環境のいずれにも対応できます。

画像タグ(ルート相対パスの例)
<img src="/images/manual/form/form_img001.jpg">

サムネイルの自動生成

URLにw=h=のパラメータを指定することで好みのサイズのサムネイル画像を簡単に作成できます。

横を128ピクセルまで縮小
<img src="?w=128">
縦を192ピクセルまで縮小
<img src="?h=192">
128×192ピクセルまで縮小
<img src="?w=128&h=192">
画質を下げてデータ量を削減
<img src="?w=256&amp;h=192&amp;q=50">

w=あるいはh=を指定すると、もう一方の辺のピクセル数が自動的に調整されます。両方が指定されて縦横比が変わった場合は、上下または左右がカットされます。画質を示すq=1100の整数を指定します。デフォルト値は85です。これらのパラメータを指定するとPNG画像でもJPEG画像に変換されてから出力されるため、ウェブページの軽量化に効果的です。

JavaScriptを設置する

スクリプトタグscriptのsrc=""の中は「相対パス」を指定するか、あるいは/から始まる「ルート相対パス」を指定してください。これらにはホスト名が含まれないため、テスト環境とプロダクション環境のいずれにも対応できます。

スクリプトタグ(ルート相対パスの例)
<script src="/common/js/all.js"></script>

他のファイルを読み込む

/* include */表記を使って別のファイルをインポートできます。ファイルが結合されることで、転送されるファイルの総数が減り、ページの表示の高速化が期待できますが、使い方を誤るとエラーの原因にもなるので注意が必要です。

コンパイル前
$(function()
{
	/* include "/js/_init.js"; */
});
別ファイル /js/_init.js
var helloWorld = 'Hello World!';
console.log(helloWorld);
コンパイル後
$(function()
{
var helloWorld = 'Hello World!';
console.log(helloWorld);
});