てがろぐスキン
Lattice Skin
このテンプレートはお手軽マイクロブログCGI「てがろぐ」用のスキンです。
ダウンロードファイル内のHTML、CSSだけでは動作しません。また、他のCMSでも動作しません。予めご了承ください。
QRコードをスマートフォンで読み込むと実機でデモサイトを確認できます。
まだてがろぐを設置していない方は「てがろぐ」の始め方をご参照ください。
このスキンについて
「Lattice Skin」は「てがろぐ」を利用した格子がテーマのブログスキンです。ノートの方眼紙のようなレトロなデザインが特徴です。
無料
対応済み
自由にカスタマイズ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-lattice
トップページにてがろぐを設置した場合
http(s)://ドメイン名/tegalog.cgi?skin-lattice
てがろぐ本体のskin-cover.html、skin-onelog.htmlにスキンを上書きした場合
▼サブディレクトリにてがろぐを設置した場合
http(s)://ドメイン名/てがろぐを設置したサブディレクトリ（のフォルダ名）/tegalog.cgi
▼トップページにてがろぐを設置した場合
http(s)://ドメイン名/tegalog.cgi
※ダウンロードファイル内の「_css」「_img」フォルダも併せてアップロードしてください。
スキンのセットアップ方法
スキンのタイトルの編集
ページ上の適用箇所
管理画面の設定箇所
（1）てがろぐの管理画面にログイン
（2）「設定」にアクセス
（3）「フリースペース」にアクセスし、各項目を設定して保存
一部の要素を非ログイン時は表示されないようにする
デフォルトでは表示されている状態になっています。
管理画面の設定箇所
（1）てがろぐの管理画面にログイン
（2）「設定」にアクセス
（3）「投稿欄の表示」にアクセスし、「ログインしている際にのみ表示する」に設定して保存
このスキンで非ログイン時は表示されない要素はこちら。
バリエーション
テキストの色や背景色のカスタマイズはroot.cssで行うことができます。
Default（デモで表示されるデザイン）のroot.cssを開く
:root {
--color-text: #514c4a;/* フォントの色 */
--color-bg: #efe9e6;/* 背景色 */
--color-accent: #8fbfb2;/* 強調色。リンクの色など */
--color-box-bg: rgba(255, 255, 255, 0.5);/* ボックスの背景の色 */
--color-wh: #fff;
--color-grey: rgba(0, 0, 0, 0.5);
--color-mgrey: rgba(0, 0, 0, 0.1);
--color-lgrey: rgba(0, 0, 0, 0.05);
}root.cssについてはこちら。また、root.cssを使用せずに従来通り直接カラーコードなどをstyle.cssに書き込んでいただいても構いません。
※style.css内での値の適用箇所はダウンロード時点のものです。
ダウンロードファイルの内容
| skin-cover.html | 外側(ページ全体の生成用)のスキン |
| skin-onelog.html | 内側(個別投稿の表示用)のスキン |
「_css」フォルダ内
| root.css | テキストの色や背景色の設定 |
| style.css | デザイン用のスタイルシート |
「_img」フォルダ内
継続して利用をする場合は配布元の規約をご確認ください。
| icn_pin.png | アイコン 配布元：MingCute Icon |
外部ファイルの読み込み
| jQuery CDN | https://releases.jquery.com/ |
| Google Fonts | Zen Kaku Gothic New Tenor Sans |
ダウンロードファイルの更新履歴
| Version: 1.0.0 | リリース | 2026.1.3 |