Monotone Galleryの使い方
フォルダ構成
基本的に編集するのは config.js と settings.css の2ファイルです。assets/ フォルダ内のファイルは触らないでください。表示崩れや動作不良の原因になります。
各ファイルの役割
| ファイル | 役割 | 編集 |
|---|---|---|
config.js | サイトタイトル・作品情報・プロフィールなど | ★必要 |
settings.css | カラー・フォントのカスタマイズ | 必要に応じて |
index.html | トップページのHTML | 不要 |
assets/css/style.css | テンプレートのCSS | 不要 |
assets/js/script.js | テンプレートのJavaScript | 不要 |
画像の入れ方
ギャラリー画像
assets/image/works/ フォルダに画像を入れてください。
画像形式は webp・jpg・png・gif に対応しています。
ファイル名にスペースや日本語は使わないでください（例：works_01.webp）。
ヘッダー・プロフィール・OGP画像
assets/image/ フォルダ内の以下のファイルを下記のファイル名で保存してください。
| ファイル名 | 用途 | 推奨サイズ |
|---|---|---|
head.webp | ヘッダー背景画像 | 横長（1920×1080px 程度） |
prof.webp | プロフィール画像 | 正方形（300×300px 程度） |
ogp.webp | SNSシェア時の画像 | 1200×630px |
拡張子を変える場合（例：head.jpg にしたい場合）は、config.js のパスも合わせて変更してください。
config.jsの編集方法
config.js をテキストエディタで開いて編集します。
サイト基本情報
const SITE_CONFIG = {
// サイトタイトル
title: "ここをサイト名に変更",
// サイトのURL（SNSシェア用。末尾のスラッシュは不要）
siteUrl: "https://yoursite.com",
// サイトの説明文（SNSシェア時に表示）
description: "サイトの説明文",
// OGP画像のパス
ogImage: "assets/image/ogp.webp",
// ヘッダー背景画像のパス
headImage: "assets/image/head.webp",
ニュース
{} で囲まれた1行が1件のニュースです。
コピー＆ペーストで増やせます。削除するときは {} ごと削除してください。
news: [
{ date: "2026-01-01", newsText: "お知らせの内容", link: "" },
{ date: "2026-01-01", newsText: "リンクあり", link: "https://..." },
],
date：日付newsText：お知らせの内容link：リンクURL（不要な場合は空欄のまま）
プロフィール
profile: {
name: "名前",
profImage: "assets/image/prof.webp",
profileText: "自己紹介テキスト",
},
SNSリンク
URLを入力すると表示されます。表示したくないSNSはURLを空欄にしてください。
links: [
{ label: "X (Twitter)", url: "https://x.com/yourname", icon: "x" },
{ label: "Instagram", url: "", icon: "instagram" },
// ...
],
テキストボタンリンク
お問い合わせやご依頼リンクなどを設定できます。{} をコピーして増やせます。不要な場合は {} ごと削除してください。
ctaLinks: [
{ label: "お問い合わせ", url: "https://..." },
{ label: "ご依頼はこちら", url: "https://..." },
],
作品一覧
{} で囲まれた1件が1作品です。コピー＆ペーストで増やせます。
最後の {} 以外には末尾にカンマ（,）が必要です。
サイトが表示されなくなった場合はカンマの付け忘れがないか確認してください。
works: [
{
title: "作品タイトル",
category: "カテゴリ名",
thumbnail: "assets/image/works/works_01.webp",
caption: "作品の説明",
movie: "",
type: "",
},
],
| 項目 | 内容 |
|---|---|
title | 作品タイトル |
category | カテゴリ名（フィルターボタンに使用） |
thumbnail | サムネイル画像のパス |
caption | キャプション・作品説明 |
movie | 動画URL or パス（画像のみの場合は空欄） |
type | 動画の場合は "video"、画像は空欄 |
動画の掲載方法
動画を載せたい場合は movie と type を設定してください。
YouTubeの動画を載せる場合
{
title: "動画タイトル",
category: "カテゴリ名",
thumbnail: "assets/image/works/thumb.webp",
caption: "",
movie: "https://www.youtube.com/watch?v=XXXXXXXXX",
type: "video",
},
自分でアップロードした動画を載せる場合
動画ファイルをフォルダに入れてパスを指定します。
{
title: "動画タイトル",
category: "カテゴリ名",
thumbnail: "assets/image/works/thumb.webp",
caption: "",
movie: "assets/video/sample.mp4",
type: "video",
},
いずれの場合も thumbnail にはサムネイル用の画像パスを設定してください。
settings.cssの編集方法
settings.css をテキストエディタで開いて、カラーコードを書き換えてください。
:root {
/* フォント */
--font-heading: 'Josefin Sans', 'Noto Serif JP', sans-serif;
--font-body: 'Noto Serif JP', serif;
/* ギャラリー背景色 */
--g-bg-color: #333333;
/* フッター背景色 */
--f-bg-color: #333333;
/* ... */
カラーコードは #333333 のような6桁の16進数で指定します。
サーバーへのアップ方法
編集が終わったら、フォルダの中身をすべてサーバーにアップロードしてください。
FTPソフトを使う場合
- FTPソフトでサーバーに接続する
monotone-gallery/フォルダの中身をすべてサーバーの公開フォルダにアップロードする
アップロードするもの：
├── assets/
├── config.js
├── settings.css
├── index.html
└── LICENSE_GLightbox.txt
README.txtはアップロード不要です。
更新するとき
編集したファイルだけ上書きアップロードすればOKです。
画像を追加した場合は追加した画像ファイルもアップロードしてください。