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

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

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

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

ダウンロード

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

Old Version

特徴

  • シングルカラム
  • 右上ハンバーガーメニューをクリックすると右から左にシュッと出てくるサイドバー(カテゴリーメニュー)
  • レスポンシブ対応(を目指した)
  • 記事内にある外部リンクにはアイコンを付与(参考:外部リンクに自動的にアイコンを付けて表示する (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

  1. 上記URLにアクセスし、skin-wn-tan をクリックしてサブディレクトリに移動
  2. ファイルリストの上にある  アイコン(Cloneの左横)をクリック
  3. 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/
 │ ├ favicon.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 64~67行目

<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 31~34行目

<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:ファイル名]] にて読み込んでいます。

それぞれにそれっぽい文字列を上書きしてアップロードしてください。

ファビコン(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

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

Tips的な使用方法になります。

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

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

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

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

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

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 のように変えれば動くと思います(動かなかったらすみません)。

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

このようにして作成したシングルページもどきスキン./tegalog.cgi?skin=skin-wn-aboutに、ヘッダーからリンクしていますが、スキンが必要のない方は削除して下さい。

skin-wn-tan2/skin-cover.html, skin-gallery/skin-cover.html43~59行目

<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">
                <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>
            </ul>
        </div>
    </div>
</div>

併せて、assets/js/skin-wn-single.js, skin-wn-about も削除してください。

いいねボタンの設定方法

do | 創作・同人サイト制作支援サイト 様で配布されている 個人サイト向けいいねボタン・改 を、設置してスキン内URLを適切に書き換えると使えます。

skin-cover.html 下部にある、

<script src="/newiine_app/newiine.js"></script>

の部分のパスを、ご自分のサイトに合わせて書き換えてください。

  • いいねボタン改に同梱のCSSはスキン側のCSSと競合するので読み込まないでください
  • 現在お礼メッセージのポップアップ表示部は実装していません(今後アプデしたい)
  • いいねボタン改に必要なJavascriptファイル(jQuery + newiine.js)は skin-cover.html の下部での読み込みが必要です

いいねボタンが不要な方は、newiine.js と同時に次のjQueryの読み込みも不要です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

GLightbox のてがろぐ側での設定

画像表示には、Lightbox系ライブラリで軽量高機能な GLightbox を使用しています。

「設定」→「ページの表示」タブ→「投稿本文の表示/画像」から、 「画像リンクに独自のclass属性値を追加する」に、glightbox を設定してください。

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

assets/src 内にある

  • cover.png
  • icon.png

を上書きしてください。

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

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

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

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

Special Thanks

TACHYONS (under the MIT License)
Copyright © 2020 Adam Morse & John Otander
https://github.com/tachyons-css/tachyons/blob/main/license

What Input (under the MIT License)
Copyright (c) 2021 Jeremy Fields
https://github.com/ten1seven/what-input/blob/main/LICENSE

Feather (under the MIT License)
Copyright (c) 2013-2017 Cole Bemis
https://github.com/feathericons/feather/blob/master/LICENSE

Material Symbols and Icons (under the Apache License Version 2.0.)
https://github.com/google/material-design-icons/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/

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

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

免責事項

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

変更履歴

2022/09/30
Release ver2.1.0
2022/09/01
Release ver2.0.0
2022/08/15
配布開始