てがろぐ用スキン「Noir」を作った

htrkwn

てがろぐ用スキン「Noir」について

にししふぁくとりー様にて配布されている、お手軽マイクロブログCGI「てがろぐ」用のスキンを作成。

シングルカラムのシンプルブログ風になっています。それ以外特に特徴ない。

てがろぐ ver3.8.4β 以上が必要。

リポジトリ

スキン使用のためのてがろぐ設定

💡 【設定】ページの表示 から設定してください。

【ナビゲーションリンクの表示】総ページ数が多い場合に途中のページ番号リンクを省略する

有効にする。ページ番号リンクを全部出力すると記事数が増えた場合にレイアウトが崩れる。

参考：投稿一覧画面のページ番号設定・表示件数設定

参考：ページ番号リンクの装飾方法

📄使い方

`tegalog.cgi`と同じ階層にDLした中身アップロード。

root/
　├ tegalog.cgi
　├ .htaccess
　├ assets/
　│　└ js/
　├ skin-cover.html
　├ skin-onelog.html
　└ tegalog.css

デフォルトスキンとしての使用を例に解説。サブディレクトリに入れる場合は、head内にあるファイルパスを修正。

cssやjsの読み込み先が間違っていると表示が崩れる。

まてがろぐスキン適用は管理画面のスキンの切替メニューから行う。詳しくは公式サイトのドキュメントを参照。

本文の書き方について

最低限、記事タイトルを一行目、本文を二行目から書き始めるというルールで運用しないと割とマジでレイアウトが悲しいことになる。

検索避け（meta robots）について

`skin-cover.html`の`meta`タグでrobots検索避けをしている。

<meta name="robots" content="noindex, nofollow, noarchive">

.htaccess について

tegalog.cgiを抜いたURLでアクセスできるよう`.htaccess`に`DirectoryIndex`を記入している。

DirectoryIndex tegalog.cgi

参考：ファイル名をわざわざ index.cgi に変更しなくても、「tegalog.cgi」を省略して「/」で終わるURLでアクセスできるようにする方法

不要な場合は各々で削除。

ファビコン（Favicon）の設定方法

`skin-cover.html`の`head`内でファビコンの設定を入れている。

<link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png">
<link rel="manifest" href="./assets/favicon/site.webmanifest">

`assets/favicon`フォルダの中に以下のファイルを入れている。

  • android-chrome-192x192.png

  • android-chrome-512x512.png

  • apple-touch-icon.png

  • favicon-16x16.png

  • favicon-32x32.png

  • favicon.ico

  • site.webmanifest

DIYするなり、ジェネレーターなどもあるので、好きに作成して設置。

The best Favicon Generator (completely free) - favicon.io

Favicon.io - The Ultimate Favicon Generator (Free)

site.webmanifest について

site.webmanifest というファイルの中身はjson形式で記入する。

{"icons":[{"src":"android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"android-chrome-512x512.png","sizes":"512x512","type":"image/png"}]}

参考：icons - ウェブアプリマニフェスト | MDN

他に必須のname、short_name は各々で設定。

メニューリストの変更方法

メニューリストは`skin-cover.html`の次の部分。

<div class="hero-foot">
    <nav class="tabs is-boxed is-fullwidth">
        <div class="container">
        <ul>
            <li>
            <a href="?cat=rkgk">らくがき</a>
            </li>
            <li>
            <a href="?cat=txt">おはなし</a>
            </li>
            <li>
            <a href="">つぶやき</a>
            </li>
        </ul>
        </div>
    </nav>
</div>

カテゴリー「rkgk」や「txt」等のリンクを例として記入している。自分のサイトに応じて編集。

GLightbox のてがろぐ側での設定

画像表示には、Lightbox系ライブラリで軽量高機能でMITライセンスで使用できるGLightboxを前提に書く。

  1. 「設定」→「ページの表示」タブ→「投稿本文の表示／画像」から、「画像リンクに独自のclass属性値を追加する」に`glightbox`を設定。

  2. 「設定」→「システム設定」タブ→「画像拡大スクリプトの選択」から、他のスクリプトを使う にチェックし、

JavaScriptのURL：

https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js

CSSのURL：

https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css

を設定します。

そして、`skin-cover.html`の下部でGlightboxを使用するために次を書いています。公式サイトにある説明を読んで好みに設定してください。

[[JS:LIGHTBOX]]
<script>
	document.addEventListener('DOMContentLoaded', function () {
		const lightbox = GLightbox({
			openEffect: 'fade',
			closeEffect: 'fade'
		});
	});
</script>

参考：Lightbox以外の画像拡大スクリプトを読み込んで使う方法

GLightbox | A touchable pure Javascript lightbox

✨Special Thanks

Bulma (under the MIT License)
Copyright (c) 2022 Jeremy Thomas.
https://github.com/jgthms/bulma/blob/master/LICENSE

Feather (under the MIT License)
Copyright (c) 2013-2017 Cole Bemis
https://github.com/feathericons/feather/blob/master/LICENSE

GLightbox (under the MIT License)
Copyright (c) 2018 Biati Digital
https://www.biati.digitalhttps://github.com/biati-digital/glightbox/blob/master/LICENSE.md

ライセンス

Copyright (c) 2022 htrkwn
Released under the MIT License
スキン使用報告等は不要です。

免責事項

このスキンを使用した上で被ったいかなる損害について、一切責任を負うものではございませんのであらかじめご了承ください。

変更履歴

2023/07/06: 再公開
2022/11/02: 公開

この記事が気に入ったらサポートをしてみませんか？