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

てがろぐ用スキン「Noir」についてダウンロード方法スキン使用のためのてがろぐ設定【ナビゲーションリンクの表示】総ページ数が多い場合に途中のページ番号リンクを省略する 📄使い方本文の書き方について検索避け（meta robots）について .htaccess についてファビコン（Favicon）の設定方法 site.webmanifest についてメニューリストの変更方法 GLightbox のてがろぐ側での設定 ✨Special Thanks ライセンス免責事項変更履歴

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

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

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

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

ダウンロード方法

https://gitlab.com/nememori27/tegalog-skin-noir

上記URLにアクセスし、ファイルリストの上にあるDownloadをクリック
zip・tar・tar.gz・tar.bz2のいずれかを選択するとダウンロードが開始されます

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

💡

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

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

ONにしてください。ページ番号リンクを全部出力すると記事数が増えた場合にレイアウトが崩れます。

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

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

📄使い方

tegalog.cgiと同じ階層にDLした中身アップロードしてください。
（次の図のようになります）

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

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

skin-cover.htmlの一行目に[[NO-LINKADJUSTMENT]]を記入するなどの方法も利用できます。
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)

With Favicon.io you can quickly generate a favicon for your website for free!

https://favicon.io

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を前提に書きます。

「設定」→「ページの表示」タブ→「投稿本文の表示／画像」から、「画像リンクに独自のclass属性値を追加する」にglightboxを設定。
「設定」→「システム設定」タブ→「画像拡大スクリプトの選択」から、他のスクリプトを使う にチェックし、

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>