No.24

スキン「sirason」配布

sirason_r_ss01.pngsirason_r_ss02.pngsirason_r_ss03.pngsirason_r_ss04.png

ダウンロード (24/06/22更新)

>>デモ用サンプル記事

>>ギャラリーモードデモ
※リンクがほとんど元スキン行きになってるけど本番適用すればちゃんと遷移するはず 多分


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


使用フォント
アイコン:Google Material Symbols(Sharp)  
タイトルなどのフォント:Google Fonts さわらびゴシック

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



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

※ヘッダーロゴ画像の差し替え方
管理画面から「tega_headlogo.png」という名前の画像をアップする、もしくは「images」フォルダ内にそのまま入れる
「設定」→「システム設定」→「画像投稿機能」で「元のファイル名をできるだけ維持する」になっているか確認してください
元画像の大きさに関わらず、縦幅40pxくらいで表示されます。あんまり横が長いと画面幅狭いときはみ出るかも

※ユーザーアイコン設定のしかた
管理画面から画像をアップ→「自分のIDを設定」から画像URLを入れる(「images/画像の名前.拡張子」とかでいけます)(四角い画像でも勝手に丸くなります)
アイコンの大きさを変えたい場合は「設定」→「ページの表示」→「ユーザ情報の表示」
四角や角丸にしたい場合はcssの423行目あたりの「border-radius」の値をいじってみてください

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

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

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

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


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

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

#スキンsirason
 
更新履歴
2024/06/22 色々改造してリニューアル
2023/11/04
  • クレジットというかここの名前とURLをソース内に追加
  • 諸々の隙間の細かい調整
  • テキストエリアの色とか文字の大きさとか

2023/10/10 配布開始

配布物

back