Session log galleryの使い方
フォルダ構成
基本的に編集していただくのは赤字で示した「image」フォルダの中身と、「session-logs」フォルダの中身、「config.js」の３つです。
サイトの色を変更したいときは「settings.css」を編集します。
ご自身でCSSの変更を行いたい場合は、「addition.css」に追記すると元のcssを上書きできます。
「assets」「GLightbox」フォルダの中身は触ると表示が崩れたり動作不良が起こる原因となるため、触れないことをおすすめします。
なお、デモサイトで表示されている画像は同梱されておりません。
最初にすること
config.jsでサイトの設定を行う
サイトのタイトルなど、主要な設定を行います。
/* =========================================
【設定】ここを書き換えてください
========================================= */
const SITE_CONFIG = {
siteTitle: "デモ：TRPGセッション記録", // サイトのタイトルを記述
// --- プロフィール設定 ---
profile: {
name: "管理者名",
description: `
ここに紹介文が入ります。<br>
自己紹介や空き日程など書いてもいいかも<br>
新規卓〇月～
`,
links: [
{ label: "X", url: "https://twitter.com/..." },
]
}
};
siteTitle
サイトのタイトル
name
サイト管理人の名前
description
プロフィールテキスト<br>タグで改行できます
links
プロフィールリンクボタンを設定できます
labelにはボタンに表示されるテキストを、urlには推移先のURLを記述してください{ label: "X", url: "https://twitter.com/..." },
複数リンクを置く場合は、{},を丸ごとコピーして増やすことでボタンを増やすことができます。
imageフォルダ
背景画像
設定する場合は、画像名を「bg-image.webp」とし、フォルダ内に格納してください。
アイコン画像
画像名を「icon.webp」とし、フォルダ内に格納してください。
アイコン画像は1:1を推奨。
余白は自動的にトリミングされます。
セッションログを編集する
「session-logs」フォルダの中身を編集します。
session-YYMMDDフォルダ
セッションログの詳細ページのテンプレートです。
こちらのフォルダをコピーし、フォルダ名を変更して中身を編集します。
フォルダ名は何をつけても問題ありません。
管理がしやすいようにご自由に命名してください。
index.html
・OGPの設定
SNSなどに共有する際に表示されるサムネイルなどの設定です。
下記部分をセッションページごとに書き換えます。
<!-- OGP（SNS共有時の表示）の設定 -->
<meta property="og:site_name" content="サイトタイトル">
<meta property="og:title" content="シナリオ名">
<meta property="og:description" content="簡単なテキストを入れる">
<meta property="og:image" content="https://あなたのドメイン/session-logs/フォルダ名/img/session.webp">
<!-- OGP（SNS共有時の表示）の設定ここまで -->
サイトタイトルとシナリオ名、ページの簡単な説明を入力後、画像のURLを記述します。
「あなたのドメイン」は、ご自身のサイトURLの「https://」のあとに続く文字列を記述してください。
「フォルダ名」は、先程「session-YYMMDD」をコピーして作成したフォルダ名を記述してください。
・ページ全体の編集
index.html内の下記を編集してください。
/* =========================================
【設定】ここを書き換えてください
========================================= */
title: "シナリオ名",
system: "システム名",
systemColor: "green",
startDate: "2026-02-17",
endDate: "2026-02-18",
content: `
ここに本文を書く<br>
GM：〇〇<br>
PL：△△
`,
// システムに合わせた権利表記を記述してください
license: `
表記例：<br>
本頁は、「〇〇〇」及び「■■■■」が権利を有する『システム名』の、二次創作です。<br>
(C)〇〇〇<br>
(C)■■■■
`,
// メモ
// 下記の{},をコピペし、[],の中に貼る
// { title: "メモのタイトル", content: "内容" },
memos: [
{ title: "メモのタイトル", content: "内容" },
],
// 関連リンク
// 下記の{},をコピペし、[],の中に貼る
// { label: "リンクテキスト", url: "ここにURLもしくはパスを入れる" },
links: [
{ label: "リンクテキスト", url: "ここにURLもしくはパスを入れる" },
],
// 画像ギャラリー
// 下記の{},をコピペし、[],の中に貼る
// { path: "img/画像名.拡張子", type: "" },
gallery: [
{ path: "img/画像名.拡張子", type: "" },
]
/* =========================================
【設定】ここまで
========================================= */
title
シナリオ名
system
システム名
systemColor
システムラベルの色の設定
green（緑）、orange（オレンジ）、blue（青）、purple（紫）、red（赤）、skyblue（水色）、yellow（黄）の7種類を設定できます。
startDate
セッションの開始日
endDate
セッションの終了日
未記入でもOKです
content
自由記入欄です<br>で改行できます
参加者など記述しても良いかと思います
license
TRPG各システムに合わせた著作権表示を記述してください
memos
セッションメモセクション部分です
タイトルだけ表示され、クリックで中身が見えるようになります
titleにメモのタイトルを、contentに内容を記述してください<br>で改行できます{ title: "メモのタイトル", content: "内容" },を複製することで、メモを増やすことができます
未記入でもOKです
links
関連リンクセクション部分です
labelにリンクテキストを、urlには推移先のURLを記述してください{ label: "リンクテキスト", url: "ここにURLもしくはパスを入れる" },を複製することで、リンクを増やすことができます
未記入でもOKです
gallery
画像ギャラリーセクション部分です
セッションのスクショやイラストなど、画像をギャラリー化できます
pathには画像のパス（img/画像名.拡張子）を入力してください
typeはワンクッション挟みたい場合に設定します
type: “blur”
サムネイルをぼかします
「ワンクッション」表記となります
type: “spoiler”
サムネイルをぼかします
「ネタバレ注意」表記となります
type: “r18”
サムネイルをより強くぼかし、モノクロにします
「成人向け」表記となります
type未記入の場合は、サムネイルはぼかされずに並びます
{ path: "img/画像名.拡張子", type: "" },を複製することで、画像を増やすことができます
ギャラリーに載せる画像は、「session-log-gallery」フォルダ内の「img」フォルダへ格納してください
session.webp
ページ冒頭やサムネイル、OGPとなる画像です
デフォルト状態でも表示されますが、オリジナルの画像（セッションのスクリーンショットなど）に変更する場合は、設定したい画像の名前を「session.webp」とした上で、上書き保存してください
imgフォルダ
ギャラリーセクションに載せる画像の格納フォルダ
これで詳細ページの設定は以上です。
サイトトップにログ一覧を載せる
詳細ページを作成しただけではトップにリンクカードが表示されません。
そのため、「config.js」の下記部分を設定します。
// トップページのリストカード情報
// {}, を増減することでカードを増減させられます
// リストは日付（date）の降順で自動的に並ぶため、上に追加しても下に追加しても問題ありません
const SESSION_LIST = [
{
title: "シナリオ名",
system: "システム名",
systemColor: "orange",
date: "2026-02-17",
image: "session-logs/session-000000/session.webp",
link: "session-logs/session-000000/index.html"
},
]
title
シナリオ名（詳細ページと統一）
system
システム名（詳細ページと統一）
systemColor
システムラベルの色の設定（詳細ページと統一）
green（緑）、orange（オレンジ）、blue（青）、purple（紫）、red（赤）、skyblue（水色）、yellow（黄）の7種類を設定できます。
date
セッションの開始日（詳細ページと統一）
image
サムネイル画像の設定
「session-000000」の部分を、作成したフォルダ名に書き換えてください
link
「session-000000」の部分を、作成したフォルダ名に書き換えてください
これでサイトトップに詳細ページへのリンクカードが並びます。
settings.css
サイトの色を変更したいときはこのファイルを編集してください。
カラーコード部分を書き換えることで、色を変更することができます。
:root {
/* 変更したい箇所のカラーコードを書き換えてください*/
/*======================================
文字色
======================================*/
/*ベースの文字色*/
--text-color: #333333;
/*サイト名の文字色*/
--site-title-color: #333333;
/*リンクの文字色*/
--link-text-color: #5363b3;
/*詳細ページライセンスの文字色*/
--license-text-color: #797979;
/*======================================
背景色
======================================*/
/*サイト全体の背景色*/
--bg-color: #ebebeb;
/* --- サイトの背景を画像にする場合は下記を編集 --- */
/* 画像を使う場合は url('画像パス') 、色だけなら背景色と同じ色を入れる */
--bg-image: url('../../image/bg-image.webp');
/* 背景をぼかす強さ (0px でぼかしなし) */
--bg-blur: 5px;
/* 画像の明るさ (100% が通常、50% で暗くなる) */
--bg-brightness: 100%;
/*各セクションの背景色*/
--bg-section-color: #ffffff;
/*======================================
システム名ラベル
======================================*/
/* ラベル色 */
--system-name-color-green: #c3e7c4;
--system-name-color-orange: #ffe0c5;
--system-name-color-blue: #abb6e1;
--system-name-color-purple: #e2bfeb;
--system-name-color-red: #e1b3b3;
--system-name-color-skyblue: #bcebf1;
--system-name-color-yellow: #f0f3b9;
/* 文字色 */
--system-name-color: #333333;
/*======================================
セッション日付
======================================*/
/* 文字色 */
--session-date-color: #747474;
/*======================================
メモ背景色
======================================*/
/* 背景色 */
--session-memo-color: #fdf1df;
/*======================================
ボタン
======================================*/
/*ボタン 枠の色*/
--button-border-color: #4F4141;
/*ボタン 背景色*/
--button-bg-color: transparent;
/*ボタン 文字色*/
--button-text-color: #4F4141;
/*ボタン 選択中の枠の色*/
--button-border-color-active: #4F4141;
/*ボタン 選択中の背景色*/
--button-bg-color-active: #4F4141;
/*ボタン 選択中の文字色*/
--button-text-color-active: #ffffff;
}