シンプルブログ風のてがろぐスキンを自分用に作ってた。

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

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

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

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

デモサイト

なし

ダウンロード

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

特徴

  • シングルカラム

ダウンロード方法

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

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

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

【設定】ページの表示

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

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

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

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

使い方

tegalog.cgi と同じ階層に assets , .htaccess, skin-cover.html, skin-onelog.html, tegalog.css をアップロードしてください。
(次の図のようになります)

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.htmlmetaタグでrobots検索避けをしています。

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

.htaccess について

tegalog.cgiを抜いたURL/でアクセスできるよう.htaccessDirectoryIndexを記入しています。

DirectoryIndex tegalog.cgi

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

それぞれ、不要な方はご自分で削除してください。

ファビコン(Favicon)の設定方法

skin-cover.htmlhead内でファビコンの設定を入れていますが、不要であれば削除してください。

<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

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

他に必須のnameshort_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以外の画像拡大スクリプトを読み込んで使う方法

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.digital
https://github.com/biati-digital/glightbox/blob/master/LICENSE.md

ライセンス

Copyright (c) 2022 htrkwn
Released under the MIT License

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

免責事項

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

変更履歴

See also Commits

2022/11/02
配布開始