No.75

スキン「aien」配布

aien_r_ss01.pngaien_r_ss02.pngaien_r_ss03.pngaien_r_ss04.png

ダウンロード(24/09/30更新)

>>デモ用サンプル記事

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


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

使用素材等
アイコン:Remix Icon
タイトルなどのフォント:Google Fonts Raleway/Noto Sans Japanese
ヘッダー画像:素材屋 flower&clover  
デモ用画像など:Unsplash / FLAT ICON DESIGN
(※素材等はこのサイトのデモからではなく、元の素材サイト様からDLしてください)


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

※右上のホームボタンは「設定」→「フリースペース」→「フッタ用フリースペース」の「サイトのHOMEへ戻る」リンクです

※ヘッダー画像の差し替え方
管理画面から「tega_head_a.png」という名前の画像をアップする、もしくは「images」フォルダ内にそのまま入れる
「設定」→「システム設定」→「画像投稿機能」で「元のファイル名をできるだけ維持する」になっているか確認してください
元画像の大きさに関わらず、横幅180pxで表示されます。設定はcssファイル247行目あたり 画像の種類や名前を変えたい場合は「skin-cover.html」の31行目あたり

※タイトルの改行位置を調整したいとき
主タイトル部分の幅が狭くて思った通りに改行できないときは、半角スペースやピリオドなどを入れればそこで改行してくれるはずです
「tegalog-aien.css」ファイルの261行目あたりに設定があるので、フォントサイズを変更したりとかもしてみてください

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

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

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

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


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

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

#スキンaien
 
更新履歴
2024/09/30 諸々修正
2024/02/03 配布開始

配布物

back