「Fumora」は、くすみカラーやペールトーンを基調にした柔らかいイメージのWebページテンプレートです。コンテンツの合間に配置した画像ブロックがアクセントを添えます。
アンケートで「おそろいのテンプレートとてがろぐスキンが欲しい」とのお声をいただき作成しました。もちろん単体での使用もどうぞ。
おそろいのてがろぐスキンもあります！→Fumora Skin
このテンプレートについて
無料
対応済み
自由にカスタマイズOKバリエーション
テキストの色や背景色のカスタマイズは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 |
