「Fumora」は、くすみカラーやペールトーンを基調にした柔らかいイメージのWebページテンプレートです。コンテンツの合間に配置した画像ブロックがアクセントを添えます。
アンケートで「おそろいのテンプレートとてがろぐスキンが欲しい」とのお声をいただき作成しました。もちろん単体での使用もどうぞ。
おそろいのてがろぐスキンもあります!→Fumora Skin
このテンプレートについて
バリエーション
テキストの色や背景色のカスタマイズはroot.cssで行うことができます。
コピペで簡単!root.cssでカスタマイズ
(1)気に入ったデザインのroot.cssをページからコピー

(2)ダウンロードファイル内のroot.cssにペーストし、上書き

root.cssを使用せずに従来通り直接カラーコードなどをstyle.cssに書き込んでいただいても構いません。
※style.css内での値の適用箇所はダウンロード時点のものです。
Mint Breeze(Default)

Mint Breezeのroot.cssを開く
:root {
--color-text: #333333;/* フォントの色 */
--color-accent: #6d9b7c;/* 強調色。リンクの色など */
--color-pale: #EDF0EB;/* 強調色のペールカラー */
--color-wh: #FFF;
--color-grey: rgba(0, 0, 0, 0.5);
--color-mgrey: rgba(0, 0, 0, 0.2);
--color-lgrey: rgba(0, 0, 0, 0.05);
--bg-imgblock01: url(../_img/green/bg_01.jpg);
--bg-imgblock02: url(../_img/green/bg_02.jpg);
--bg-imgblock03: url(../_img/green/bg_03.jpg);
--bg-imgblock04: url(../_img/green/bg_04.jpg);
--bg-imgblock05: url(../_img/green/bg_05.jpg);
}Sand Morning

Sand Morningのroot.cssを開く
:root {
--color-text: #333333;/* フォントの色 */
--color-accent: #BA855D;/* 強調色。リンクの色など */
--color-pale: #F8F3EE;/* 強調色のペールカラー */
--color-wh: #FFF;
--color-grey: rgba(0, 0, 0, 0.5);
--color-mgrey: rgba(0, 0, 0, 0.2);
--color-lgrey: rgba(0, 0, 0, 0.05);
--bg-imgblock01: url(../_img/beige/bg_01.jpg);
--bg-imgblock02: url(../_img/beige/bg_02.jpg);
--bg-imgblock03: url(../_img/beige/bg_03.jpg);
--bg-imgblock04: url(../_img/beige/bg_04.jpg);
--bg-imgblock05: url(../_img/beige/bg_05.jpg);
}Rose Dawn

Rose Dawnのroot.cssを開く
:root {
--color-text: #333333;/* フォントの色 */
--color-accent: #d28996;/* 強調色。リンクの色など */
--color-pale: #FAEFEF;/* 強調色のペールカラー */
--color-wh: #FFF;
--color-grey: rgba(0, 0, 0, 0.5);
--color-mgrey: rgba(0, 0, 0, 0.2);
--color-lgrey: rgba(0, 0, 0, 0.05);
--bg-imgblock01: url(../_img/pink/bg_01.jpg);
--bg-imgblock02: url(../_img/pink/bg_02.jpg);
--bg-imgblock03: url(../_img/pink/bg_03.jpg);
--bg-imgblock04: url(../_img/pink/bg_04.jpg);
--bg-imgblock05: url(../_img/pink/bg_05.jpg);
}Sky Whisper

Sky Whisperのroot.cssを開く
:root {
--color-text: #333333;/* フォントの色 */
--color-accent: #4682b4;/* 強調色。リンクの色など */
--color-pale: #E9EEF2;/* 強調色のペールカラー */
--color-wh: #FFF;
--color-grey: rgba(0, 0, 0, 0.5);
--color-mgrey: rgba(0, 0, 0, 0.2);
--color-lgrey: rgba(0, 0, 0, 0.05);
--bg-imgblock01: url(../_img/blue/bg_01.jpg);
--bg-imgblock02: url(../_img/blue/bg_02.jpg);
--bg-imgblock03: url(../_img/blue/bg_03.jpg);
--bg-imgblock04: url(../_img/blue/bg_04.jpg);
--bg-imgblock05: url(../_img/blue/bg_05.jpg);
}Lavender Twilight

Lavender Twilightのroot.cssを開く
:root {
--color-text: #333333;/* フォントの色 */
--color-accent: #9061A4;/* 強調色。リンクの色など */
--color-pale: #F4EFF6;/* 強調色のペールカラー */
--color-wh: #FFF;
--color-grey: rgba(0, 0, 0, 0.5);
--color-mgrey: rgba(0, 0, 0, 0.2);
--color-lgrey: rgba(0, 0, 0, 0.05);
--bg-imgblock01: url(../_img/purple/bg_01.jpg);
--bg-imgblock02: url(../_img/purple/bg_02.jpg);
--bg-imgblock03: url(../_img/purple/bg_03.jpg);
--bg-imgblock04: url(../_img/purple/bg_04.jpg);
--bg-imgblock05: url(../_img/purple/bg_05.jpg);
}ダウンロードファイルの内容
HTML
トップページ
| index.html | トップページのサンプル |
下層ページ(「subpage」フォルダ内)
| parts.html | このテンプレートで予めCSSの設定をしてある見出しやリストなどのデザインの一覧 |
CSS
「_css」フォルダ内
| root.css | テキスト背景の色、画像の設定 |
| style.css | デザイン用のスタイルシート |
JavaScript
「_js」フォルダ内
| script.js | ページ内リンクのスクロールの動作 |
画像
「_img」フォルダ内
継続して利用をする場合は配布元の規約をご確認ください。
| bg_01.jpg bg_02.jpg bg_03.jpg bg_04.jpg bg_05.jpg | 「beige」「blue」「green」「pink」「purple」の各フォルダ内の画像 配布元:Unsplash |
| bnr.gif | 自作のテスト用画像 |
| work_thumb_01.jpg work_thumb_02.jpg work_thumb_03.jpg work_thumb_04.jpg | 表示サンプル用画像 ご自分の作品とは区別してください。 配布元:Unsplash |
外部ファイルの読み込み
| jQuery CDN | https://releases.jquery.com/ |
| Google Fonts | Zen Kaku Gothic New Libre Baskerville |
ダウンロードファイルの更新履歴
| Version: 1.0.0 | リリース | 2025.4.21 |