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

作品置き場に使えそうな感じのてがろぐスキンを作りた……かった。

デモサイト

https://dev.nememori.info/paperlike/tegalog.cgi

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

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

テキスト主体のサイト向き。

見た目がとてもシンプルなスキンです。

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

β version

現在このスキンはまだベータ版です。今後のアップデートでマークアップの改善と機能追加に努めます。

ダウンロード

https://dev.nememori.info/paperlike/skin-paperlike.zip

特徴

シングルカラム
ダークモード／ライトモード
リストページ用・シングルページ用・検索ページ用のスキンを分離
ギャラリーモードスキン同梱（skin-gallery）
青空文庫・カクヨム（＋一応Pixiv）等の記法で書いたものはjavascriptでルビに変換される

ダウンロード方法

https://dev.nememori.info/paperlike/skin-paperlike.zip

上記URLにアクセスし、zipファイルをダウンロードしてください
tegalog.cgiのあるディレクトリにpaperlike, skin-gallery をアップロードしてください
てがろぐ側でスキンpaperlikeを適用してください

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

【設定】ページの表示

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

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

【鍵付き(パスワード保護)投稿の表示】n枚目の画像を `[[ONEPICT:n]]` 記法等で表示する

（鍵付き投稿を使用する場合は）ONにしてください。ギャラリーモードで使用しているためです……。

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

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

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

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

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

使い方

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

/
│  tegalog.cgi
│  (other file...)
│
├─paperlike
│  │  skin-cover.html
│  │  skin-onelog.html
│  ├─search
│  ├─single
│  ├─_astro
│  └─_partial
│          dropdown_menu.html
└─skin-gallery

デフォルトスキンとして使用する場合は、paperlike フォルダの中にあるskin-cover.html 及び skin-onelog.html を tegalog.cgi と同じ階層にアップロードして使用することもできますが、<head>内での外部ファイルパスを編集することになるので、ファイル構成を変更しない方がシンプルに使えておすすめです。

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

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

管理画面へのリンクは右上ドロップダウンメニュー内

本文の書き方について

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

スキン`paperlike/single/skin-onelog.html` 内にあるTwitterシェアリンクについて

Issue

スキンを導入しただけでは、デモサイトのURLで共有されます。これについては作業レスになるようにアップデートを考えていますが、導入するさいにはご注意ください。

カスタム要素<twitter-share>で今表示しているURLを取得してツイートできるように対応しました(2023/03/08)

?skin=hoge/fugaのようなパラメータが含まれる場合に[[PERMAURL:PURE:FULL]]のような記法をうまく利用できなかったためです。暫定的ですが、URLをjavascriptで取得しエンコードしたものを設定して対応しています。

詳しくは Web Intent | Docs | Twitter Developer Platform をご覧ください。

url
A fully-qualified URL with a HTTP or HTTPS scheme, URL-encoded. The provided URL will be shortened by Twitter’s t.co to the number of characters specified by short_url_length.

以下の部分です。

<twitter-share>
<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 512 512"
    fill="#1DA1F2"
    class="ionicons w-8 h-8 min-w-[32px] min-h-[32px]"
>
    <title>Twitter</title><path
    d="M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z"
    ></path>
</svg>
Tweet
</twitter-share>

ごり押しで<a>要素のhref属性に次のような形で設定することでも共有できると思います。

https://twitter.com/intent/tweet?url=https%3A%2F%2F【サイトドメイン】%2F【ディレクトリ】%2F【てがろぐCGI】%3Fskin%3Dpaperlike%2Fsingle%26postid%3D[[POSTID]]

httpsかhttpかはご自分の対応状況に合わせて変更してください。

参考：Percent-encoding (パーセントエンコーディング) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

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

スキン側では標準設定していませんが、DIYするなり、ジェネレーターなどもありますので、必要な場合は自分で設定してください。

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

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

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

ライトモード/ダークモードの切り替え部分もこのファイル内に記述しています。

ご自分のサイトに合わせて編集してください。

ルビ変換（javascript）について

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

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

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

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

GLightbox のてがろぐ側での設定

画像表示には、Lightbox系ライブラリで軽量高機能でMITライセンスで使用できる GLightbox を使用しています。次の設定を行ってください。

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

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

// head 内

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">

// </body>近く

<script type="module">
    import "https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js";
    const lightbox = GLightbox();
</script>

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

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

記事ベースのリスト表示になっています。一枚目の画像を表示します。

NSFWフラグのついた画像についてはopacity:0;をcssで設定して表示されないようにしています。ついでに通常画像が表示される部分の背景色がランダムで変更になります。

Special Thanks

ライセンス

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

免責事項

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

変更履歴

2023/03/08: Add Custom Elements <twitter-share>
2023/03/07: β版配布開始

デモサイト#

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

ダウンロード#

特徴#

ダウンロード方法#

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

【設定】ページの表示#

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

【鍵付き(パスワード保護)投稿の表示】n枚目の画像を [[ONEPICT:n]] 記法等で表示する#

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

使い方#

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

本文の書き方について#

スキンpaperlike/single/skin-onelog.html 内にあるTwitterシェアリンクについて#

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

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

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

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

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

Special Thanks#

daisyUI#

GLightbox#

Heroicons#

Ionicons#

TailwindCSS#

Theme-Change#

ライセンス#

免責事項#

変更履歴#