スキン「kozin」配布



ダウンロード (25/05/04更新)

>>デモ用サンプル記事


説明

• にししふぁくとりー様で配布されているマイクロブログツール「てがろぐ」用のスキンです(Ver 4.6.0で動作確認)。
• 画像管理もできるひとりごとツールとして使うことを想定しています。
• てがろぐ公式の標準スキンを改造して作っています。
• 配布はゆるゆる適当ですが一応利用規約的なものをさらっと読んでおいてください。

使用フォント
アイコン：Google Fonts Icons (Material Icons Rounded)

できること

• cssファイルを少し編集するだけで全体の色カスタマイズができます。
• 特定のファイル名画像をアップするだけでヘッダー画像の差し替えができます。
• メタタグによる簡単な検索避け付。
• デフォルト機能：カテゴリ、ハッシュタグ、全年月リスト、フリースペース等
• ギャラリーモード、NSFW画像ぼかし機能

使い方
※全体の色カスタマイズ方法
「tegalog-kozin.css」「tegalog-kozin-gallery.css」ファイル11行目くらいからの「カスタム用色変更欄」のカラーコードを書き換えてください。

※ヘッダー画像の差し替え方
管理画面→画像の管理 から「tega_header.png」という名前の画像をアップする、もしくは「images」フォルダ内にそのまま入れる
「設定」→「システム設定」→「画像投稿機能」で「元のファイル名をできるだけ維持する」になっているか確認してください。
元画像の大きさに関わらず、PCで150px四方、スマホで100px四方の円型になります。調整したい場合は「tegalog-kozin.css」198行目より。
透過ロゴ画像やバナー等、丸くない画像を表示したい場合は「skin-cover.html」28行目あたり<img src="images/tega_header.png" class="headimg maru">のclass="headimg maru"の「 maru」を消してclass="headimg"にしてください。


↑日付境界バーの右端にあるアイコンはそれぞれ「この範囲を時系列順で読む」「この範囲をファイルに出力する」リンクです。「設定」→【ページの表示／全体】→「▼日付境界バーの挿入位置」から非表示の設定ができます。

※ギャラリーモードスキンの使い方
「skin-kozin-gallery」フォルダをtegalog.cgiと同じディレクトリに置いて、「設定」→「補助出力」→【ギャラリーモードの出力】→スキン格納ディレクトリ名 を「skin-kozin-gallery」に変える。
もしくは
「skin-kozin-gallery」フォルダを「skin-gallery」という名前に変更してtegalog.cgiと同じディレクトリに置く。
公式ページ「ギャラリーモード」
公式ページ「ギャラリー用スキンの作り方・使い方」

つぶやき用スキンとギャラリーモードスキンはそれぞれ独立した作りのため、つぶやき用スキンを改造した場合はギャラリーモードスキンの方も同じく編集してください。

※ギャラリーモードの仕様

• ギャラリーモードでは、カテゴリとタグの後ろの記事数は非表示にしています(全体の記事数が出ちゃうため)。
• てがろぐ標準の画像拡大スクリプトLightboxなら、ギャラリーモード時に記事を飛び越えて全ての画像を拡大閲覧できます。ただしNSFW画像もそのまま閲覧できてしまうため、他のスクリプトを使って記述を工夫したり、カテゴリやタグを使ってなんかうまいことやってください。
• 「(鍵付き投稿の)n枚目の画像を [[ONEPICT:n]] 記法等で表示する」設定のチェックを外しておくことを推奨します。(Lightboxの移動で全画像見えちゃうため)

※ギャラリーモードで画像1枚目のみ見られるようにする(てがろぐ標準スキンの仕様と同じにする)
①ギャラリースキンの「skin-onelog.html」10行目あたり[[COMMENT:PICTS]]を[[ONEPICT:1]]に書き換える
②「tegalog-kozin-gallery.css」の771行目あたり.imagebox :nth-child(n+2) { display: none;}の部分を消す
この標準仕様なら、「(鍵投稿でも)n枚目の画像を [[ONEPICT:n]] 記法等で表示する」設定で1枚目の画像がワンクッションになるはずです。

※ギャラリーモードで画像をクリックで拡大ではなく単独記事に飛ぶようにする
①ギャラリースキンの「skin-onelog.html」10行目あたり[[COMMENT:PICTS]]を[[ONEPICT:1]]に書き換える
②「tegalog-kozin-gallery.css」823行目あたりの.gallogbox:not(.logstatus-lock) .imgpermalink { display: none;}を消す

・同デザインの配布物
>>kozinデザインのhtmlテンプレート配布
>>kozinデザインの画像一覧モード用スキン配布

#スキンkozin
　
更新履歴
2025/05/04　リンクカード用CSS追加
2024/11/23

• テンプレートの方とすり合わせしてちょっと調整
• カテゴリの第二階層までに対応 等

2024/05/26　色々改造してリニューアル
2023/11/04

• クレジットというかここの名前とURLをソース内に追加
• 諸々の隙間の細かい調整
• テキストエリアの色とか文字の大きさとか
• ギャラリーモード時鍵投稿にも画像が表示されるように

2023/09/22　配布開始