Total 1885 Downloads

Since 2024.12.10

デモサイト
ダウンロード回数： 3 回
このテンプレートが創作活動のお役に立ちましたら
OFUSEで応援していただけると励みになります

Fumora Skin

「Fumora Skin」は「てがろぐ」を利用した、くすみカラーやペールトーンを基調にした柔らかいイメージのブログスキンです。ページのトップに配置した画像ブロックがアクセントを添えます。

おそろいのWebテンプレートもあります！→Fumora

このスキンについて

利用料 無料
レスポンシブ 対応済み
デザイン 自由にカスタマイズOK
※著作権の明記について一部制限を設けています。詳しくはこちら
検索避け未対応
※検索避けタグの記入方法はこちら
投稿する人数1人
動作環境てがろぐ Ver 4.5.0
ギャラリーモード非対応
画像一覧モード非対応
使用している要素

外側(ページ全体の生成用)のスキン（skin-cover.html）

  • ページ移動ナビゲーション要素
  • OGP＋Twitter Cardの出力
  • ハッシュタグ要素
  • カテゴリ一覧要素
  • 汎用要素（CGIの名称とバージョン番号）※削除不可
  • ライブラリ読み込み（Lightbox）

内側(個別投稿の表示用)のスキン（skin-onelog.html）

  • 投稿ID関連要素（投稿の状態、投稿の編集、投稿の削除）
  • カテゴリ関連要素
  • 投稿日時関連要素（日付）
  • 投稿本文関連要素（投稿本文）
使用していない要素

外側(ページ全体の生成用)のスキン（skin-cover.html）

  • ヘッダ・フッタ向けフリースペース要素
  • 検索窓要素
  • 新着画像リスト要素
  • カレンダー要素
  • 多目的フリースペース要素
  • 新着投稿リスト要素
  • 表示モード要素
  • RSSフィード
  • 日付リスト要素
  • 現在カテゴリ情報要素

内側(個別投稿の表示用)のスキン（skin-onelog.html）

  • 投稿ID関連要素（投稿No.）
  • 投稿単独URL出力要素
  • 投稿ユーザ関連要素（投稿者の表示名、投稿者のアイコン画像）
  • 投稿ユーザ関連要素（投稿者に限定した投稿を見る、投稿者のID名、投稿者の紹介文）
  • 投稿日時関連要素（新規投稿から間もないことを示す文字列）
  • 投稿本文関連要素（投稿本文の文字数、投稿本文の行数、投稿本文読み上げ、行単位・指定行以降・指定文字数・役割別・抽出結果挿入）
  • 投稿本文に含まれる画像関連要素
  • その他（何番目に表示されている投稿）

要素名は公式サイトの「カスタマイズ方法」より引用しています。

非ログイン時は表示されない要素

「QUICKPOST」を「ログインしている際にのみ表示する」に設定する必要があります。設定方法はこちら。

スキンの表示方法

ブラウザで以下のURLにアクセスします。

サブディレクトリにてがろぐを設置した場合

http(s)://ドメイン名/てがろぐを設置したサブディレクトリ（のフォルダ名）/tegalog.cgi?skin-fumora

トップページにてがろぐを設置した場合

http(s)://ドメイン名/tegalog.cgi?skin-fumora

てがろぐ本体のskin-cover.html、skin-onelog.htmlにスキンを上書きした場合

▼サブディレクトリにてがろぐを設置した場合
http(s)://ドメイン名/てがろぐを設置したサブディレクトリ（のフォルダ名）/tegalog.cgi

▼トップページにてがろぐを設置した場合
http(s)://ドメイン名/tegalog.cgi

※ダウンロードファイル内の「_css」「_img」フォルダも併せてアップロードしてください。

スキンのセットアップ方法

一部の要素を非ログイン時は表示されないようにする

デフォルトでは表示されている状態になっています。

管理画面の設定箇所

（1）てがろぐの管理画面にログイン

（2）「設定」にアクセス

（3）「投稿欄の表示」にアクセスし、「ログインしている際にのみ表示する」に設定して保存

このスキンで非ログイン時は表示されない要素はこちら。

バリエーション

テキストの色や背景色のカスタマイズは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

skin-cover.html外側(ページ全体の生成用)のスキン
skin-onelog.html内側(個別投稿の表示用)のスキン

「_css」フォルダ内

root.cssテキスト背景の色、画像の設定
style.cssデザイン用のスタイルシート

「_img」フォルダ内

継続して利用をする場合は配布元の規約をご確認ください。

bg_01.jpg
bg_02.jpg
bg_03.jpg
bg_04.jpg
bg_05.jpg		「beige」「blue」「green」「pink」「purple」の各フォルダ内の画像

配布元：Unsplash

外部ファイルの読み込み

jQuery CDNhttps://releases.jquery.com/
Google FontsZen Kaku Gothic New
Libre Baskerville

ダウンロードファイルの更新履歴

Version: 1.0.0リリース2026.1.3

OSHATEN!

RANKING

1

Basic Blog Skin

2

Single Note Skin

3

Fukidasi Skin

4

Photogenic Day Skin

5

Photogenic Day