全テンプレート共通

導入ガイド

ZIPを開いてから、サイトを公開するまで。このページには、TraceStudio のすべてのテンプレートに共通することをまとめています。どのファイルに何が入っているかなど、テンプレートごとの手順は、ZIP の中の START_HERE(または README)をご覧ください。

01はじめる前に

必要なのは、パソコンとブラウザとテキストエディタだけです。ほかのソフトも、プログラミングの知識もいりません。

ZIPを展開します。 Mac ではダブルクリック、Windows では右クリック →「すべて展開」。
フォルダの中の index.html をダブルクリックすると、テンプレートがブラウザで開きます。公開したときと同じ見た目です。
テンプレートのガイドを開きます。 START_HERE.ja.md(日本語)か START_HERE.md(英語)。MONO ARCHIVE と ÉCRU は README.md(日本語)と README.en.md(英語)です。

テキストエディタは、Mac のテキストエディット、Windows のメモ帳で十分です。無料の Visual Studio Code を使うと読みやすくなりますが、なくても大丈夫です。

文章・リンク・写真の一覧は、settings.js などの1〜3つの小さなファイルにまとまっています。これらを変えるために、HTMLを触る必要はありません。中身は、次のような行が並んでいます。

name: 'Your Name',
role: 'Photographer',
location: 'Tokyo, Japan',

保存したら、ブラウザを再読み込みすると変更が反映されます。

ZIPには、ファイル名と縦横比を書いた仮の画像が入っています。これをあなたの写真に差し替えます。

いちばん簡単な方法: 写真の名前を仮の画像と同じ名前(hero.jpg など)に変えて、images フォルダにドラッグし、「置き換える」を選びます。
または、写真を images に入れて、そのファイル名を設定ファイルに書きます。
JPG で、長い辺が2000px前後あれば十分です。大きすぎるとページが重くなるだけです。
ファイル名は半角の英数字とハイフンで。スペースや日本語は使いません。大文字・小文字も正確に書きます(多くのサーバーでは photo.jpg と photo.JPG は別のファイルです)。
alt は、写真が見えない人のための短い説明です。「霧の湖に浮かぶ木の小舟」のように一行で書きます。

公開する前は、ブラウザの幅を狭くすると、スマホ向けの表示に切り替わります。公開したあとは、実際にスマホでアドレスを開いて確認してください。

サイトはフォルダそのものなので、そのままアップロードできます。下の2つはどちらも無料プランがあり、ブラウザにフォルダをドラッグするだけで公開できます。index.html が入っているフォルダをアップロードしてください。

各サービスの画面は、ときどき変わります。見た目が違うときは、上の公式ガイドが最新です。レンタルサーバーでも公開できます。すべてのファイルとフォルダを、同じ構成のままアップロードしてください。

公開すると、まずサービスの無料のアドレス(yourname.netlify.app など)が使えます。yourname.com のような自分のアドレスを使いたいときは、ドメインを取得して、サービスの設定でつなぎます。

STUDIO・NOCTURNE・STILL・PLAIN にはお問い合わせフォームがあります。そのままの状態では、Send を押すと、見た人のメールソフトが、あなた宛ての文面ができた状態で開きます。

サイトから直接メッセージを受け取りたいときは、Formspree などのフォームサービス(無料プランあり)を使います。サービスでフォームを作り、https:// から始まる送信先のアドレスをコピーして、settings.js に貼ります。

formAddress: 'https://formspree.io/f/xxxxxxx',

フォルダはパソコンに残しておきます。変更はそのフォルダの中で行い、ブラウザで確認してから、同じ方法でフォルダごともう一度アップロードします。アドレスは変わりません。

「settings.js could not be read」(または別のファイル名)と表示される: クォート、カンマ、カッコを消してしまっています。変更した行を、ガイドの例と見比べてください。取り消し(⌘Z / Ctrl+Z)で戻すのも近道です。
写真の場所に「Image not found: images/…」と表示される: ファイルに書いた名前と、images の中のファイル名が違います。つづり、大文字・小文字、末尾(.jpg・.jpeg・.png)を確認してください。
変更が反映されない: ファイルを保存してから、ブラウザを再読み込みしてください。公開後は、古い表示がしばらく残ることがあります。少し待ってから、もう一度読み込んでください。
ページが真っ白になる: 多くは、いちばん上と同じ原因(クォートやカンマの消し忘れ)です。最後に変更したファイルの、その行を確認してください。
公開したあとだけ写真が出ない: ファイル名の大文字・小文字が違う(Photo.jpg と photo.jpg)か、images フォルダがアップロードされていません。

1回の購入で、テンプレートを1つのWebサイトに使用できます。自由に変更でき、ご自身のサイトにも、クライアント1件のサイトにも、商用目的でも使えます。テンプレートの転売・共有はできません。全文は ZIP の中の LICENSE.md をご覧ください。

デモサイトの写真は、ダウンロードには含まれていません。サイト制作をおまかせしたい場合は、お問い合わせください。