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

素人がhtml/cssの勉強用に、てがろぐ用スキンを作りました。なんか短文を呟きたくなる感じを目指したつもり。

Archived project!

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

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

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

短文を呟きたくなる…ような？今なにしてる？　なんかそんな感じのスキンを目指しました。

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

Note

安定版より新しいバージョン（β）は、てがろぐ最新β版から入手してください。

デモサイト

https://dev.nememori.info/tan/

ダウンロード

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

特徴

シングルカラム
右上ハンバーガーメニューをクリックすると右から左にシュッと出てくるサイドバー（カテゴリーメニュー）
レスポンシブ対応（を目指した）
記事内にある外部リンクにはアイコンを付与（参考：外部リンクに自動的にアイコンを付けて表示する (External link icons) - まくまくHTML/CSSノート）
ダークモード／ライトモード
記事本文中の絵文字は「Twemoji」で表示（※使用する場合、CC-BY 4.0ライセンス表示が必須）
シングルページとして使えるスキン(skin-wn-about)も同梱 (ver2.0.0~)　※必要なければ削除可
ギャラリーモードスキン同梱 (ver2.1.0~)

ダウンロード方法

（ver2.1.0 から GitLab での公開に移行したので、zip配布はありません）

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

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

使い方

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

root/
　├ tegalog.cgi
　├ assets/
　│　│├ css/
　│　│├ favicon/
　│　│├ js/
　│　│└ src/
　│　├ extra_footer.html
　│　├ extra_head.html
　│　├ extra_onelog_footer.html
　│　├ favicon.html
　│　├ menu_item.html
　│　├ newiine_btn.html
　│　├ powered.html
　│　├ userid.html
　│　└ username.html
　├ skin-wn-about/
　│　├ skin-cover.html
　│　└ skin-onelog.html
　├ skin-gallery/
　│　├ skin-cover.html
　│　└ skin-onelog.html
　└ skin-wn-tan2/
　 　├ skin-cover.html
　 　└ skin-onelog.html

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

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

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

管理画面へのリンクはページ最下部で表示
右下に表示される青色のアイコンをクリック/タップでクイックポスト画面が開く
記事ごとに編集ボタンを表示

……上記のようにしていますが、ログインしていない閲覧者に管理画面へのリンク以外は非表示にしておく方が良いと思いますので、てがろぐ側でログインされている場合にだけ表示されるようにしたい場合の設定をお勧めします。

ヘッダーに表示されるユーザー名、ユーザーIDの変更方法

skin-wn-tan2/skin-cover.html, skin-gallery/skin-cover.html

<div class="information ph2">
    <h1 class="f4 pa0 ma0">[[INCLUDE:assets/username.html]]</h1>
    <div class="f5 text-80">@[[INCLUDE:assets/userid.html]]</div>
</div>

skin-wn-about/skin-cover.html

<div class="dtc v-mid pl2">
    <div class="f5 fw6 lh-title ma0 same-text-color">[[INCLUDE:assets/username.html]]</div>
    <div class="f7 fw4 ma0 text-50">@[[INCLUDE:assets/userid.html]]</div>
</div>

上の箇所にて、assets フォルダ内にある、username.html, userid.html （テキスト一行のみで改行もなしのファイル）を、てがろぐ標準機能の [[INCLUDE:ファイル名]] にて読み込んでいます。

それぞれのファイルの中身をそれっぽい文字列に修正してアップロードしてください。

※編集しないとhtrkwnが表示されてしまいます。絶対に編集して下さい。

これとは別の、投稿の記事ごとに表示されるユーザー名、ユーザーIDはその記事を投稿（または再編集）したユーザーのものです。

参考：ユーザ設定　てがろぐ使い方・設定方法 - にししふぁくとりー

skin-onelog.htmlの中の[[USERICON]], [[USERNAME]]で表示されます。

すべての投稿のユーザーを変更する場合tegalog.xmlを直接編集するか、反映させたいIDでログインして再投稿する等の手順が必要かと思います。

データファイルを直接編集した後は、「投稿を再カウント」の実行が必要です。

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

（ver2.1.0 から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/meun_item.html で外部読み込みしています。ご自分のサイトに合わせてリストを修正・削除してください。

assets/meun_item.html

<li class="dropdown__item pv2">
    <a href="[[HOME:URL]]skin=skin-wn-about">このサイトについて</a>
</li>
<li class="dropdown__item pv2">
    <a href="[[RSS:URL:PURE:FULL]]">RSS Feed</a>
</li>

そもそもメニューが必要ない方は次の箇所を削除してください。

skin-wn-tan2/skin-cover.html, skin-gallery/skin-cover.html

<div class="social-area absolute tr">
    <div class="dropdown relative">
        <button class="dropdown__btn button-reset same-text-color pointer bg-transparent pa0 ma0 border-box ba b--color-50 br-100 h2-quarter w2-quarter flex items-center justify-center" id="dropdown__btn" aria-label="Dropdown Menu Button">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal fill-none stroke-cc stroke-2 h1-half w1-half"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
        </button>
        <div class="dropdown__body absolute overflow-hidden w5 right-1 top-1 pv2 ph3 br2">
            <ul class="list ma0 pa0 dropdown__list tl">
                [[INCLUDE:assets/menu_item.html]]
            </ul>
        </div>
    </div>
</div>

シングルページスキンの使用方法

skin-wn-about で使用している方法の紹介です。

skin-onelog.html に直書きする場合

skin-onelog.html 内で [[COMMENT]] の記述は必須ではないため、シングルページとして出力したい内容をskin-onelog.htmlにhtmlで直書きし、 skin-cover.htmlに[[TEGALOG:1]]とでも記入すれば、直書きしたhtmlだけが表示され、記事本文は出力されないため固定ページのように振舞います。

skin-onelog.html内に記述する際は、設定「ページの表示／全体」で、1ページあたりの表示投稿の箇所の スキン側に指定されている表示数を優先採用する のチェックをONにしてください。

Note

スキン付属の skin-wn-about を使用する方は、skin-wn-about/skin-onelog.html を編集して下さい。

skin-onelog.html を空にする場合

skin-onelog.html内を空にしてskin-cover.htmlを作成すれば、表示の上では記事本文が出力されないのでカテゴリーだけのページとか、ハッシュタグだけのページなどを作ることもできます。（カテゴリーツリーや、ハッシュタグリストのhref=""の中に現在のスキンでの出力リンクが含まれてしまう場合はjavascript等での置換処理が必要になると思います）

以下は assets/js/skin-wn-single.js で使用~~している~~ していた記述例です（jsは勉強中なのでもっとスマートな方法があるかもしれません）

Note

現在はver3.8.4β以降使えるようになった[[NO-LINKADJUSTMENT]]をskin-cover.htmlの先頭に記入しているので、javascriptによる置換は必要ありません

カテゴリーツリーの置換例

document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('.cattree a');
    let linkcount = links.length

    for (let i = 0; i < linkcount; ++i) {
        const link = links[i];
        let linkattr = link.getAttribute('href');
        linkattr = linkattr.replace( /\?skin=(.)*&/ ,'\?')
        link.setAttribute('href', linkattr)
    }
});

ハッシュタグリストの場合は .cattree a の部分を .hashtaglist a のように変えれば動くと思います（動かなかったらすみません）。

シングルページが必要ない場合

このようにして作成したシングルページもどきスキン[[HOME:URL]]skin=skin-wn-aboutに、メニューからリンクしていますが、スキンが必要のない方は削除して下さい。

assets/meun_item.html から次の記述を削除してください。

<li class="dropdown__item pv2">
    <a href="[[HOME:URL]]skin=skin-wn-about">このサイトについて</a>
</li>

併せて、skin-wn-about も削除してください（もし、assets/js/skin-wn-single.js が同梱されている場合はこれも削除してください）。

いいねボタンの設定方法

do | 創作・同人サイト制作支援サイト様で配布されている個人サイト向けいいねボタン・改を設置し、次の作業を行ってください。

Note

いいねボタン改に同梱のCSSはスキン側のCSSと競合するので読み込まないでください
現在お礼メッセージのポップアップ表示部は実装していません

assets/newiine_btn.html の編集

assets/newiine_btn.html のファイルの中身は次のようになっていますので

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/newiine_app/newiine.js"></script><!-- いいねボタン・改を設置したURLを http(s):// or // から始まるものに変更して下さい -->

/newiine_app/newiine.jsを、ご自分のサイトに合わせたパスに書き換えてください。

skin-cover.html の編集

Target File

skin-wn-tan/skin-cover.html
skin-gallery/skin-cover.html

いいねボタン改に必要なJavascriptファイル（jQuery + newiine.js）は skin-cover.html の下部での読み込みが必要です。

必要なファイルは、skin-cover.html 下部の </body> よりも手前で [[INCLUDE:assets/newiine_btn.html]] と記述するとスキン内に読み込むことができます。

具体的には、187行目あたりの[[INCLUDE:assets/extra_footer.html]] という記述より前に、[[INCLUDE:assets/newiine_btn.html]]を追加してください。

skin-onelog.html の編集

Target File

skin-wn-tan/skin-onelog.html
skin-gallery/skin-onelog.html

skin-onelog.html の次の部分を編集してください。

<div class="onelogbody mt2">
    <div class="comment lh-content f5">
        [[COMMENT]]
    </div>
    <div class="oneloginfo mt3 f6 flex items-center column-gap-q">
        <span class="postdate dib"><a href="[[PERMAURL]]" title="[[DATE:Y年G月N日(b) hⓜ️s]]" class="same-text-color">[[DATE:Y年G月N日(b) hⓜ️s]]</a></span>
        <span class="editlink Login-Required dib"><a href="[[EDITURL]]" title="No.[[POSTID]]を編集" class="same-text-color dib flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit fill-none stroke-cc stroke-1-half w1 h1 mr1"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>: No.[[POSTID]]を編集</a></span>
    </div>
    <!-- この位置に↓を追加してファイルを読み込みます -->
    [[INCLUDE:assets/extra_onelog_footer.html]]
</div>

skin-onelog.html内に[[INCLUDE:assets/extra_onelog_footer.html]]を追加して、いいねボタン改用のボタンとTwitter共有リンクのパーツを読み込みます。

assets/extra_onelog_footer.html の中身は次のようなhtmlです。

<div class="onelogfoot">
    <ul class="list pa0 ma0 flex justify-between items-center">
        <li>
            <button type="submit" data-iinename="Good_No.[[POSTID]] [[DATE:YGNhms]]" data-iineurl="[[PARMAURL:PURE:FULL]]" class="newiine_btn f6 pa0 bn flex items-center justify-center pointer button-reset">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>
                <span class="newiine_count ml1"></span>
            </button>
        </li>
        <li>
            <button type="submit" data-iinename="Heart_No.[[POSTID]] [[DATE:YGNhms]]" data-iineurl="[[PARMAURL:PURE:FULL]]" class="newiine_btn f6 bn pa0 flex items-center justify-center pointer button-reset">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
                <span class="newiine_count ml1"></span>
            </button>
        </li>
        <li>
            <a href="https://twitter.com/intent/tweet?url=[[PARMAURL:PURE:FULL]]" title="Twitterで共有" class="no-exicon br-100 f6 bn pa0 flex items-center justify-center pointer">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="15"></line></svg>
                <span class="ml1">Share</span>
            </a>
        </li>
    </ul>
</div>

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>

Note

Glightbox以外のlightboxスクリプトを使用する場合、const lightbox = GLightbox(); の記述はスキンの以下のファイルから削除してください。

skin-wn-tan/skin-cover.html
skin-gallery/skin-cover.html

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

ヘッダーカバーとアイコンを差し替えたい場合

assets/src 内にある

cover.png
icon.png

を上書きしてください。

cover画像は16:9のような横長のもので、icon画像は1:1の正方形がいいと思います。

拡張子がpng以外のファイルを使用する場合は、assets/css/skin-wn-tan.css の 460～477行目にある

.hero {
    background-image: url("../src/cover.png");
}

.covericon {
    background-image: url("../src/icon.png");
}

の部分のパスを書き換えてください。

Twemoji の利用に関しての注意

Twitterが提供するオープンソースの絵文字 Twemoji は、個人/商用にかかわらず無料で利用でき、ソースコードはMIT License、グラフィックはCC BY 4.0でライセンスされています。

Creative Commons — 表示 4.0 国際 — CC BY 4.0 では適切なクレジットを表示し、ライセンスへのリンクを合理的な方法により提供することが利用のための条件になります。

Twemojiの利用を継続する限りクレジットの表示を削除しないで下さい。

参考：絵文字には著作権がありますか？誰がそれを所有していますか？ | EmojiAll

Twemoji を使用しない場合

スキンの次のファイルからライブラリの読み込み部分と、コードを削除してください。

Target File

skin-wn-tan/skin-cover.html
skin-gallery/skin-cover.html
assets/extra_footer.html

assets/extra_footer.html の中から

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>

を削除し、各skin-cover.htmlから、</body> 手前にある <script>~</script> の中の、

twemoji.parse(document.querySelector('.classname'));

のような記述を削除してください。

Special Thanks

Remix Icon (under the Apache License Version 2.0.) https://github.com/Remix-Design/RemixIcon/blob/master/License

Twemoji Copyright 2020 Twitter, Inc and other contributors Code licensed under the MIT License: http://opensource.org/licenses/MIT Graphics licensed under CC-BY 4.0: https://creativecommons.org/licenses/by/4.0/

ライセンス

スキン使用報告等は不要ですが、フッター下部のライセンス表示は削除しないようお願いいたします。（Twemojiを利用する場合、ライセンス表示は必須です）

免責事項

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

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

デモサイト#

ダウンロード#

特徴#

ダウンロード方法#

使い方#

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

ヘッダーに表示されるユーザー名、ユーザーIDの変更方法#

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

site.webmanifest について#

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

シングルページスキンの使用方法#

skin-onelog.html に直書きする場合#

skin-onelog.html を空にする場合#

カテゴリーツリーの置換例#

シングルページが必要ない場合#

いいねボタンの設定方法#

assets/newiine_btn.html の編集#

skin-cover.html の編集#

skin-onelog.html の編集#

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

ヘッダーカバーとアイコンを差し替えたい場合#

Twemoji の利用に関しての注意#

Twemoji を使用しない場合#

Special Thanks#

ライセンス#

免責事項#

変更履歴#

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

デモサイト

ダウンロード

特徴

ダウンロード方法

使い方

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

ヘッダーに表示されるユーザー名、ユーザーIDの変更方法

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

site.webmanifest について

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

シングルページスキンの使用方法

skin-onelog.html に直書きする場合

skin-onelog.html を空にする場合

カテゴリーツリーの置換例

シングルページが必要ない場合

いいねボタンの設定方法

assets/newiine_btn.html の編集

skin-cover.html の編集

skin-onelog.html の編集

GLightbox のてがろぐ側での設定

ヘッダーカバーとアイコンを差し替えたい場合

Twemoji の利用に関しての注意

Twemoji を使用しない場合

Special Thanks

ライセンス

免責事項

変更履歴