Simple Galleryの使い方
フォルダ構成
基本的に編集していただくのは「image-setting」「image-works」「index.html」の３つです。
サイトの色を変更したいときは「settings.css」を編集します。
ご自身でCSSの変更を行いたい場合は、「addition.css」に追記すると元のcssを上書きできます。
「assets」フォルダの中身は触ると表示が崩れたり動作不良が起こる原因となるため、触れないことをおすすめします。
image-settingフォルダ
contactセクションのアイコン画像を変更
アイコンにしたい画像名を「about-image.jpg」に設定し、フォルダ内の画像を上書きしてください。
画像比率は1:1を推奨。縦長・横長の画像を設定すると、画像の中心を基準に切り取られます。
ファビコン画像を設定
ファビコンにしたい画像名を「favicon.svg」とし、「image-setting」フォルダ内に格納してください。
拡張子が「png」「ico」「gif」の画像も使用することができます。
その場合は、画像を「image-setting」フォルダ内に格納した上で、「index.html」を編集してください。
index.htmlの変更箇所
<head>タグ内の<!--ファビコン画像はここで設定-->というコメント下部分
「favicon.svg」を設定したい画像の拡張子へ変更して保存
<!--ファビコン画像はここで設定-->
<link rel="icon" href="image-setting/favicon.svg">
<!--ファビコンここまで-->
image-worksフォルダ
works画像となります。
ご自身の作品となる画像をこちらのフォルダに格納してください。
動画を載せたい場合は、サムネイルとなる画像を格納してください。
index.html
サイトの情報の変更を行ってください。
index.html上部の下記部分をそれぞれ書き換えることで、サイトの内容が変更されます。
作品リストやボタンなどを追加したい場合は、「{},」で囲まれた部分をそのままコピーして増やしてください。
※作品を増やすためにコピーした際、最後の行以外には必ず末尾にコンマ（,）が必要です。サイトが表示されなくなった場合は、コンマ忘れがないかどうかを確認してみてください。
動画を掲載したい場合
img:“サムネイルの画像”
movie:“動画のURLもしくはパス（動画の保存先）”
type:“video”
を入力すると、動画を再生できるようになります。
画像であれば、movieとtypeは空欄で構いません。
movieにはyoutubeなどの動画リンクを入れても、画像と同様にフォルダ内に保存した動画のパスを入れても大丈夫です。
例）movieフォルダを作り、sample.mp4を保存した場合のパス
movie/sample.mp4
<script>
/* =========================================
【設定】ここを書き換えてください
========================================= */
const SITE_CONFIG = {
title: "デモ：シンプルギャラリー",
adminName: "管理人名",
// 改行したいときは <br> を入れてください
profileText: "ギャラリーとプロフィールのみの構成のシンプルなテンプレートです。<br>イラストや写真等の掲載の他、動画（Youtubeリンク可）も掲載することができます。<br>サイトの編集方法については、<a href=''>「サイトの編集方法について」</a>をご確認ください。",
// 作品リスト（動画の場合はmovieに動画のパスorURL、imgにはサムネイルにしたい画像パスを入力し、typeを"video"にしてください）
works: [
{ category: "カテゴリ１", title: "作品タイトル１", caption: "作品説明", img: "image-works/sample01.jpg", movie:"", type:"" },
{ category: "カテゴリ２", title: "作品タイトル２", caption: "作品説明", img: "image-works/sample02.jpg", movie:"", type:"" },
{ category: "カテゴリ１", title: "作品タイトル３", caption: "作品説明", img: "image-works/sample03.jpg", movie:"", type:"" },
{ category: "カテゴリ２", title: "作品タイトル１", caption: "作品説明", img: "image-works/sample04.jpg", movie:"", type:"" },
{ category: "カテゴリ２", title: "作品タイトル２", caption: "作品説明", img: "image-works/sample05.jpg", movie:"", type:"" },
{ category: "カテゴリ１", title: "作品タイトル３", caption: "作品説明", img: "image-works/sample06.jpg", movie:"", type:"" },
{ category: "カテゴリ２", title: "作品タイトル１", caption: "作品説明", img: "image-works/sample01.jpg", movie:"", type:"" },
{ category: "カテゴリ２", title: "作品タイトル２", caption: "作品説明", img: "image-works/sample02.jpg", movie:"", type:"" },
{ category: "カテゴリ１", title: "作品タイトル３", caption: "作品説明", img: "image-works/sample03.jpg", movie:"", type:"" },
],
// SNSリンク（ボタンの名前とURL）
links: [
{ label: "X (Twitter)", url: "https://x.com/" },
{ label: "Mail", url: "mailto:your-email@example.com" },
]
};
/* =========================================
設定エリアはここまで
========================================= */
</script>
settings.css
サイトの色を変更したいときはこのファイルを編集してください。
カラーコード部分を書き換えることで、色を変更することができます。
※transparentは透明色の指定です
:root {
/* 変更したい箇所のカラーコードを書き換えてください*/
/*======================================
文字色
======================================*/
/*ベースの文字色*/
--text-color: #333333;
/*サイト下部メニューの文字色*/
--link-color: #333333;
/*メニューにカーソルを当てたときの文字色*/
--link-color-hover: #CF6464;
/*リンクの文字色*/
--link-text-color: #CF6464;
/*サイトタイトルの文字色*/
--h1-color: #CF6464;
/*各見出しの文字色*/
--h-color : #CCC2C2;
/*フッターの文字色*/
--footer-text-color: #ffffff;
/*======================================
背景色、ボタンの色など
======================================*/
/*サイト全体の背景色*/
--bg-color: #EFE8E1;
/*フッターの色*/
--footer-color: #CF6464;
/*ボタン 枠の色*/
--button-border-color: #333333;
/*ボタン 背景色*/
--button-bg-color: transparent;
/*ボタン 文字色*/
--button-text-color: #333333;
/*ボタン 選択中の枠の色*/
--button-border-color-active: #333333;
/*ボタン 選択中の背景色*/
--button-bg-color-active: #CF6464;
/*ボタン 選択中の文字色*/
--button-text-color-active: #ffffff;
}