フォルダ構成

基本的に編集するのは config.js と settings.css の2ファイルです。
assets/ フォルダ内のファイルは触らないでください。表示崩れや動作不良の原因になります。

サイトの更新方法

こちらのテンプレートはスプレッドシートを利用して更新することができます。

スプレッドシートの編集方法

1. スプレッドシート原本 にアクセスし、「コピーを作成」

ファイル＞コピーを作成

2. コピーしたスプレッドシートを編集

スプレッドシート内にメモを入れています。確認の上編集してください。

各シートについて

characters

キャラクター情報を入力するシートです。

config

サイト情報を入力するシートです。

サイトへの反映方法

1. スプレッドシートを編集後、上部メニュー内の「★データ出力」をクリック
2. 出力したい情報を選択

初回のみ必要な手順（クリックで展開）

本ツールを実行する際、Googleから承認を求められます。
このスクリプトは「スプレッドシートのデータを読み込んでテキスト化、出力する処理」および「シートの色を自動で変える処理」のみを行っており、外部のサーバーにデータを送信することは一切ありません。
下記画像の通りに進めてください。

3. 表示されたコードをコピーし、jsファイルにペースト

キャラクター情報

character-list.jsを開き、内容をすべて上書きしてください。

サイトの情報

config.jsを開き、内容をすべて上書きしてください。

画像の入れ方

キャラクターアイコンの設定

画像比率：正方形（300*300程度）推奨
格納先：/img/ フォルダ
ファイル名：スプレッドシートのid番号.png（例：000.png）
※画像形式は png のみ対応しています。

詳細ページ　ギャラリー画像

画像比率：指定なし
※サムネは正方形に切り取られます
格納先：/img/ フォルダ
ファイル名：スプレッドシートのid番号_1.png（例：000_1.png）
※画像形式は png のみ対応しています。
※1枚目をid番号_1.png、2枚目をid番号_2.pngとアンダーバー以降を連番にしてください。

ファビコンの設定

画像比率：正方形（512*512程度）推奨
格納先：/img/ フォルダ
ファイル名：favicon.png
※画像形式は png のみ対応しています。
　htmlが分かる方はhtmlを書き換えて拡張子を変更しても問題ありません。

settings.cssの編集方法

settings.css をテキストエディタで開いて、カラーコードを書き換えてください。

:root {
    /*カテゴリフィルターボタンの色・キャラクター詳細ページのデフォルトカラー*/
    --accent: #1a1a1a;

    /*文字色*/
    --text: #ffffff;

    /*薄い文字色*/
    --sub: #999999;

    /*サイトの背景色*/
    --bg: #1a1a1a;

    /*ボタンなどの枠線*/
    --border: #eeeeee;
}

カラーコードは #333333 のような6桁の16進数で指定します。

サーバーへのアップ方法

編集が終わったら、フォルダの中身をすべてサーバーにアップロードしてください。

FTPソフトを使う場合

1. FTPソフトでサーバーに接続する
2. character-gallery/ フォルダの中身をすべてサーバーの公開フォルダにアップロードする

アップロードするもの：
├── assets/
├── img/
├── character.html
├── character-list.js
├── config.js
├── index.html
├── settings.css
├── LICENSE_fontawesome.txt
├── LICENSE_GLightbox.txt
└── settings.css

README.txt はアップロード不要です。
addition.cssを編集した場合は、addition.cssもアップロードしてください。

更新するとき

編集したファイルだけ上書きアップロードすればOKです。
画像を追加した場合は追加した画像ファイルもアップロードしてください。