[Archived]てがろぐ用スキン「Less」を作った

長文や画像の倉庫サイトにできそうなスキンが欲しかったので作りました。

Archived project!

2023年1月1日からリポジトリをアーカイブしています（メンテナンスしていません）

2023年01月30日: デモサイトを削除しました

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

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

テキスト主体のサイト向きかもしれない。

見た目がとても簡素なスキンです。スキン名は"Less"だけどフォルダ名がskin-wn-resなのは元々メッセージ返信用として作ったからなんですが、面倒くさかったのでそのままにしてます。

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

ダウンロード

https://gitlab.com/nememori27/tegalog-themes

特徴

シングルカラム
ダークモード／ライトモード
リストページ用のスキン（skin-wn-res）とシングルページ用のスキン(skin-wn-res-single)を分離
ギャラリーモードスキン同梱
タクソノミー（カテゴリー・タグ）一覧用スキン同梱
javascriptで青空文庫・カクヨム（＋一応Pixiv）等の記法で書いたものはルビに変換される

ダウンロード方法

https://gitlab.com/nememori27/tegalog-themes

上記URLにアクセスし、skin-wn-res をクリックしてサブディレクトリに移動
ファイルリストの上にある　　アイコン（Cloneの左横）をクリック
Download this directory から zip, tar, tar.gz, tar.bz2 のいずれかを選択するとダウンロードが開始されます

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

【設定】ページの表示

【鍵付き(パスワード保護)投稿の表示】本文の1行目だけは常に見せる（全1行の場合は除く）

（鍵付き投稿を使用する場合は）ONにしてください。リストページでタイトルが表示されるようにするためです。

参考：鍵付き投稿（パスワード保護）機能の使い方 (Ver 3.8.0以降)

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

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

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

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

使い方

tegalog.cgi と同じ階層に assets , skin-wn-res, skin-wn-res-single, skin-gallery フォルダをアップロードしてください。（次の図のようになります）

root/
　├ tegalog.cgi
　├ assets/
　│　│├ css/
　│　│├ favicon/
　│　│└ js/
　│　├ favicon.html
　│　└ navmenu.html
　├ skin-gallery/
　│　├ skin-cover.html
　│　└ skin-onelog.html
　├ skin-wn-res-single/
　│　├ skin-cover.html
　│　└ skin-onelog.html
　├ skin-wn-res/
　│　├ skin-cover.html
　│　└ skin-onelog.html
　└ taxonomy/
　 　├ skin-cover.html
　 　└ skin-onelog.html

デフォルトスキンとして使用する場合は、skin-wn-res フォルダの中にあるファイルを tegalog.cgi と同じ階層にアップロードしてご使用ください。

また、てがろぐスキン適用方法については公式サイトのドキュメントをご覧ください。

記事の投稿・編集について

管理画面へのリンクはページ最下部の歯車アイコン

本文の書き方について

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

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

ヘッダーで読み込むのは assets/favicon.html 、Faviconとして使用されるファイルは 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

site.webmanifest について

site.webmanifest というファイルの中身はjson形式になっていて、iconsキーだけ相対パスで設定しています。

{"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 とかご自分でどうぞ。

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

メニューリストは assets/navmenu.html から読み込んでいます。

<ul class="list nav pa0 ma0">
    <li><a href="?skin=taxonomy" class="same-text-color">Category</a></li>
    <li><a href="[[GALLERY:URL]]" class="same-text-color">Gallery</a></li>
</ul>

Category, Tag（Taxonomy）の一覧用ページとギャラリーモードへのリンクをあらかじめ記入していますが、ご自分のサイトに合わせて編集してください。

ルビ変換（javascript）について

各種小説投稿サイトのルビ記法をJavaScriptで実現する - Qiita

↑の記事でやってることとほぼ同じですが、jQuery不要なように書き換えています。

assets/js/ruby.js のファイルの中身は以下。

// ruby replace

document.addEventListener('DOMContentLoaded', function() {
	const commentBody = document.getElementById('comment-body');
	let commentHtml = commentBody.innerHTML;

	let replaceHtml = commentHtml
	.replace(/[\|｜](.+?)《(.+?)》/g, '<ruby>$1<rt>$2</rt></ruby>')
	.replace(/[\|｜](.+?)（(.+?)）/g, '<ruby>$1<rt>$2</rt></ruby>')
	.replace(/[\|｜](.+?)\((.+?)\)/g, '<ruby>$1<rt>$2</rt></ruby>')
	.replace(/\[\[rb:(.+?) &gt; (.+?)\]\]/g, '<ruby>$1<rt>$2</rt></ruby>')
	.replace(/([一-龠]+)《(.+?)》/g, '<ruby>$1<rt>$2</rt></ruby>')
	.replace(/([一-龠]+)（([ぁ-んァ-ヶ]+?)）/g, '<ruby>$1<rt>$2</rt></ruby>')
	.replace(/([一-龠]+)\(([ぁ-んァ-ヶ]+?)\)/g, '<ruby>$1<rt>$2</rt></ruby>')
	.replace(/[\|｜]《(.+?)》/g, '《$1》')
	.replace(/[\|｜]（(.+?)）/g, '（$1）')
	.replace(/[\|｜]\((.+?)\)/g, '($1)')
	;

	commentBody.innerHTML = replaceHtml ;

});

シングルページ用スキンskin-wn-res-singleの本文（#comment-body）のinnerHTMLを取得して String.prototype.replace()で置換する。

青空文庫
小説家になろう
カクヨム
Pixiv （対応できてるか微妙……）

のルビ記法で本文に書いたものが変換されて表示されるはず。出来なかったら申し訳ない。

（一応動くかもしれない）Pixivルビ記法の正規表現について

Pixivのルビは[[rb:ルビを振りたい文字 > ルビ]]のように書くのですが、真ん中の>が出力されたソースだと特殊文字の文字実体参照>になる。

そして、[]の角括弧(半角)は数値文字参照の[と]になっていたけれど、こっちは元の記号のままでないと変換されなかった（Chrome 106で確認）。

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();
});
</script>

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

ギャラリーモードスキン(skin-gellery)について

てがろぐver3.8.2βで実装された記法[[COMMENT:PICTS]]で記事内の画像だけが抽出されて表示されるようなスキンにしています。表示されるのは管理画面で設定したorスキン側で指定した件数分の記事に含まれる画像全てです。

~~なお、（ver3.8.2β では）鍵付きポスト内の画像も抽出されて一覧に表示されます。~~ ver3.8.3βで修正予定のようです。

記事の表示件数を調整したい場合

ギャラリーモードで閲覧している際の表示件数をスキン側で制御したい場合は、設定「ページの表示／全体」で、1ページあたりの表示投稿の箇所の スキン側に指定されている表示数を優先採用する のチェックをONにしてください。

その上で、skin-gallery/skin-cover.html内の[[TEGALOG]]と書いてある部分を[[TEGALOG:n]]（nに入るのは1以上の整数）に修正して調整してください。

表示される画像サイズの変更について

スキンのレイアウトに使用しているのは CSS Grid の機能のみ。画像そのもののリサイズはされないため、オリジナル画像をCSSで縮小して表示しているだけです。

表示される画像のサイズを調整したい人はassets/skin-wn-res-gallery.cssの:rootにある

--column-width: 150px; (横幅)
--row-height: 150px; (縦幅)

……の数値部分を変えてください（二つを同じにすると正方形になります）。

--gap-length: 20px; は画像と画像の隙間です。数値を小さくすれば隙間は狭くなるし、大きくすると隙間が広がります。

:root {
    --column-width: 150px;
    --gap-length: 20px;
    --row-height: 150px;
}

.gallery__container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--column-width), 1fr));
    grid-gap: var(--gap-length);
}

.gallery__container > a {
    display: grid;
    grid-template-columns: 1fr;
}

.gallery__container > a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
}

.gallery__container > a:hover {
    cursor: zoom-in;
}

.gallery__container > a:hover img {
    opacity: 0.8;
}

なお、このCSSは【設定】ページの表示→【投稿本文の表示／画像】画像を(原寸画像への)リンクにする　が有効だと効くはずです（そうでない場合は表示が崩れます）。

Special Thanks

ライセンス

スキン使用報告等は不要です。

免責事項

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

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

ダウンロード#

特徴#

ダウンロード方法#

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

【設定】ページの表示#

【鍵付き(パスワード保護)投稿の表示】本文の1行目だけは常に見せる（全1行の場合は除く）#

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

使い方#

記事の投稿・編集について#

本文の書き方について#

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

site.webmanifest について#

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

ルビ変換（javascript）について#

（一応動くかもしれない）Pixivルビ記法の正規表現について#

GLightbox のてがろぐ側での設定#

ギャラリーモードスキン(skin-gellery)について#

記事の表示件数を調整したい場合#

表示される画像サイズの変更について#

Special Thanks#

ライセンス#

免責事項#

変更履歴#