Simple Blueの使い方

フォルダ構成

assets

css

all.min.cssFont AwesomeのCSS　編集禁止×

sanitize.cssリセットCSS

style.cssテンプレートのCSS

webfontsFont Awesome用　編集禁止×

comic.jsテンプレートのコミックページのJS

gallery.jsテンプレートのギャラリーページのJS

main.jsテンプレートのトップページのJS

script.jsテンプレートの共通JS

comic

comic-01コミック１話

comic-02コミック２話

comic-03コミック３話

cover-imageコミックの表紙・サムネイル画像

imagesビューア用画像　編集×

comi_style.cssビューア用CSS　編集×

comic.jsビューア用JS　編集×

comic-list.jsコミック更新用

index.htmlコミックページのhtml

GLightboxGLightbox関連　編集×

illustration

image-worksギャラリー画像

index.htmlギャラリーページのhtml

works.jsギャラリー更新用

image設定画像

addition.css追加でCSSを書きたいときはここに追加

config.js設定用JS

index.htmlトップのhtml

LICENCE_slick-custom.txtslick-customのライセンス表記

LICENSE_fontawesome.txtFont Awesomeのライセンス表記

LICENSE_GLightbox.txtGLightboxのライセンス表記

README.txt★最初に読んでください★

settings.cssカラーを変更したい場合はこちらを編集

基本的に編集していただくのは赤字で示した「comic」フォルダの中身と、「illustration」フォルダの中身、「config.js」の３つです。
htmlの編集がほとんど必要ないテンプレートとなっています。

サイトの色を変更したいときは「settings.css」を編集します。
ご自身でCSSの変更を行いたい場合は、「addition.css」に追記すると元のcssを上書きできます。

「assets」「GLightbox」フォルダの中身は触ると表示が崩れたり動作不良が起こる原因となるため、触れないことをおすすめします。

最初にすること

config.jsでサイトの設定を行う

サイトのタイトルなど、主要な設定を行います。

/* =========================================
【設定】ここを書き換えてください
========================================= */
const SITE_CONFIG = {
    title: "デモ：シンプルブルー",
    favicon: "image/favicon.svg",
    headerText: "ヘッダー部分だけSNSっぽい見た目のサイトテンプレートです。<br>ギャラリーページとコミック掲載ページがあります。",
    adminName: "Your Name",
    profileText: "ギャラリーにはイラストや写真等の掲載の他、動画（Youtubeリンク可）も掲載することができます。<br>サイトの編集方法については、<a href=''>「サイトの編集方法について」</a>をご確認ください。",

    // フッターのバナー画像（画像パスとリンク先）
    footerBanner: {
        img: "image/sample-banner.png",
    },

title

サイトのタイトル

favicon

ファビコンの設定
ファビコンにしたい画像パスを記述してください。
画像はimageフォルダに格納してください。

headerText

ヘッダー部分（サイト上部）に表示されるテキスト
改行したい位置に<br>タグを記述することで改行できます。

adminName

サイト管理人の名前

profileText

サイト中央のプロフィールテキスト

footerBanner

サイトフッターのバナー設定
空欄にするとバナーが非表示になります。
バナー画像は「image」フォルダに格納してください。

sns

// SNSリンク
sns: [
    { icon: "fa-x-twitter", url: "https://x.com/" },
    { icon: "fa-brands fa-bluesky", url: "https://bsky.app/" },
],

プロフィールのSNSアイコンを設定できます。
{}の行を増減することで、アイコン設定を増減させることができます。
設定できるSNSは下記です。

・X
icon: “fa-x-twitter”

・Bluesky
icon: “fa-bluesky”

・Instagram
icon: “fa-instagram”

・Youtube
icon: “fa-youtube”

各SNSロゴはFontAwesomeのものを使用しています。
ロゴの利用規約は各SNSで定められたものが適用されますので、必ず公式情報をご確認の上ご利用ください。
不安であれば、次のリンクボタンにて対応するのをおすすめします。

buttons

// リンクボタン
buttons: [
    { label: "例）ご依頼はこちら", url: "#" },
    { label: "Mail", url: "mailto:your-email@example.com" },
],

リンクボタンの設定ができます。
labelにボタンのテキスト、urlにリンク先を記述してください。
{}の行を増減することで、リンクボタンを増減させることができます。

news

// お知らせリスト
news: [
    { date: "2026-02-12", text: "サイトを公開しました" },
    { date: "2026-02-15", text: "イラストを3件追加しました" },
],

ニュースセクションにお知らせを追加できます。
dateには日付、textにはお知らせ文を記述してください。
{}の行を増減することで、リンクボタンを増減させることができます。

// トピック
topic: {
    title: "タイトル",
    img: "image/cover-sample.jpg",
    url: "comic/index.html"
}

トピックセクションを設定できます。
titleにはトピックのタイトルを、imgには画像のパスを、urlにはリンク先を記述してください。
画像は「image」フォルダに格納してください。

リンクの設定

// リンク
const LINK_DATA = {
    // 画像バナーのリンク (Favorite)
    favorite: [
        { name: "サイト名1", url: "https://...", img: "image/sample-banner.png" },
        { name: "サイト名2", url: "https://...", img: "image/sample-banner.png" },
        { name: "サイト名3", url: "https://...", img: "" },
    ],
    // テキストリンク (Search)
    search: [
        { name: "テキスト", url: "#", img: "image/sample-banner.png"  },
        { name: "テキスト", url: "#", img: ""  },
    ],
    // テキストリンク (Thanks)
    thanks: [
        { name: "Unsplash", url: "https://unsplash.com/ja", img: ""  },
        { name: "GLightbox", url: "https://biati-digital.github.io/glightbox/", img: ""  },
        { name: "fontawesome", url: "https://fontawesome.com/", img: ""  },
        { name: "なんかいい感じのマンガビューア～slick-custom～", url: "https://guardian.bona.jp/st/cv/", img: ""  },
    ]
}

リンクセクションのリンクを設定できます。

name

サイトの名前

url

サイトのURL

img

バナー画像のパス（ない場合は空欄でOK、テキストリンクになります）
画像は5:1の比率のバナー画像を想定しています。

imageフォルダ

ヘッダー画像

画像名を「header.jpg」とし、フォルダ内に上書き保存してください。
ヘッダー画像は比率3:1を推奨。
余白は自動的にトリミングされます。

アイコン画像

画像名を「icon.jpg」とし、フォルダ内に上書き保存してください。
アイコン画像は1:1を推奨。
余白は自動的にトリミングされます。

イラストギャラリーを編集する

「illustration」フォルダの中身を編集します。

image-worksフォルダ

「image-works」フォルダ内に、作品画像を格納してください。
動画の場合は、サムネイルとなる画像と動画を格納してください。
※Youtube動画など外部リンクを使用する場合は、サムネイル画像のみでOKです
※ギャラリー表示はサムネイルが1:1画像に自動的にトリミングされます

works.js

作品一覧の更新を行うファイルです。
作品を増やしたいときは、{},をそのままコピーして増やしてください。

const WORKS_DATA = [
    {
        title: "作品タイトル",
        category: "Illust",
        img: "image-works/sample01.jpg",
        caption: "作品の説明文など",
        movie:"",
        type: "",
    },
    {
        title: "作品タイトル",
        category: "Illust",
        img: "image-works/sample02.jpg",
        caption: "作品の説明文など",
        movie:"",
        type: "",
    },
];

title

作品のタイトル

img

「image-works」フォルダに格納した画像の名前
「image-works/画像名.拡張子」の形式で記述してください。

caption

作品のキャプションを入れてください

movie

動画作品の場合に入力します。
画像のみの場合は未入力でOKです。
動画ファイルを「image-works」フォルダに格納している場合は、「image-works/動画名.拡張子」の形で記述してください。
Youtubeなど外部リンクの場合は、URLを記述してください。

type

動画作品の場合に入力します。
画像のみの場合は未入力でOKです。
動画作品の場合は、type: "video",と記述してください。

コミックを編集する

「comic」フォルダの中身を編集します。
コミックのビューアには、なんかいい感じのマンガビューア～slick-custom～を使用しています。
基本的な使い方は、ビューア開発者様のサイトをご確認ください。
ここでは、テンプレート独自の設定部分のみ記載します。

cover-imageフォルダ

コミック作品の表紙画像・各話のサムネイル画像を格納してください。

comic-list.js

コミックページの設定ファイルです。

const COMIC_LIST = [
    {
        title: "コミック作品A",                    // コミックのタイトル
        description: "あらすじなどを記述できます",  // コミックのあらすじなど <br>で改行
        cover: "cover-image/cover-sample.jpg",    // 表紙画像のパス
        firstEpisode: "comic-01/index.html",      // １話リンク
        latestEpisode: "comic-03/index.html",     // 最新話リンク
        episodes: [
            { title: "第１話", url: "comic-01/index.html", thumb: "cover-image/comic-01_thumbnail.jpg" }, // urlにはリンク、thumbにはサムネイル画像のパス
            { title: "第２話", url: "comic-02/index.html", thumb: "cover-image/comic-02_thumbnail.jpg" },
            { title: "第３話", url: "comic-03/index.html", thumb: "cover-image/comic-03_thumbnail.jpg" },
        ]
    },
    // 作品が１つのみの場合は下記{}は削除　増やしたい場合は{}をコピペして増やす
    {
        title: "コミック作品B",
        description: "あらすじなどを記述できます",
        cover: "cover-image/cover-sample.jpg",
        firstEpisode: "comic-01/index.html",
        latestEpisode: "comic-03/index.html",
        episodes: [
            { title: "第１話", url: "comic-01/index.html", thumb: "cover-image/comic-01_thumbnail.jpg" },
            { title: "第２話", url: "comic-02/index.html", thumb: "cover-image/comic-02_thumbnail.jpg" },
            { title: "第３話", url: "comic-03/index.html", thumb: "cover-image/comic-03_thumbnail.jpg" },
        ]
    },
];// この行は絶対に消さない

title

コミックのタイトル

description

あらすじやコミックの紹介文など
<br>で改行できます。

cover

コミックの表示画像パスを記述します。
表紙画像は「cover-imageフォルダ」に格納してください。
「cover-image/画像名.拡張子」としてください。

firstEpisode

1話へのリンクパスを記述してください。
「コミックを格納したフォルダ名/index.html」となります。

latestEpisode

最新話へのリンクパスを記述してください。
「コミックを格納したフォルダ名/index.html」となります。
ここは話数を追加する度に書き換えて更新してください。

episodes

・title
各エピソードタイトル

・url
対象のリンクパス
「コミックを格納したフォルダ名/index.html」となります。

・thumb
各話のサムネイル画像
サムネイル画像は「cover-imageフォルダ」に格納してください。
「cover-image/画像名.拡張子」としてください。

settings.css

サイトの色を変更したいときはこのファイルを編集してください。
カラーコード部分を書き換えることで、色を変更することができます。
※transparentは透明色の指定です

:root {

    /* 変更したい箇所のカラーコードを書き換えてください*/

    /*======================================
        ヘッダー画像
    ======================================*/

    /*image/の後に画像のファイル名を記載してください*/
    --header-img: url(../../image/header.jpg);

    /*======================================
        文字色
    ======================================*/

    /*ベースの文字色*/
    --text-color: #333333;

    /*メニューの文字色*/
    --link-color: #333333;

    /*現在地のメニューの文字色*/
    --link-color-active: #648bcf;

    /*メニューにカーソルを当てたときの文字色*/
    --link-color-hover: #fff;

    /*メニューにカーソルを当てたときの背景色*/
    --link-bg-hover: #648bcf;

    /*各見出しの文字色*/
    --h-color : #333333;

    /*日付の文字色*/
    --date-color: #648bcf;

    /*フッターの文字色*/
    --footer-text-color: #ffffff;

    /*ヘッダーの文字色*/
    --header-text-color: #ffffff;


    /*======================================
        背景色、ボタンの色など
    ======================================*/

    /*サイト全体の背景色*/
    --bg-color: #ffffff;

    /*フッターの色*/
    --footer-color: #648bcf;

    /*ボタン 枠の色*/
    --button-border-color: #333333;

    /*ボタン 背景色*/
    --button-bg-color: transparent;

    /*ボタン 文字色*/
    --button-text-color: #333333;

    /*ボタン 選択中の枠の色*/
    --button-border-color-active: #333333;

    /*ボタン 選択中の背景色*/
    --button-bg-color-active: #648bcf;

    /*ボタン 選択中の文字色*/
    --button-text-color-active: #ffffff;

    /*topicホバー時背景*/
    --deco-color: #648bcf;
    /*topicホバー時文字色*/
    --deco-text-color: #ffffff;
}

テンプレート一覧へ戻る