何らかの配布場

てがろぐは前々から気にはなっていたのですが、まさか今年自分がスキン作って配布し始めるとは思ってもいませんでした　想像以上にたくさんの方にご利用いただいて、ビビりつつもありがたく思っております

てがろぐがなかったら多分趣味ライフが崩壊していたので、にししさんには足を向けて寝られませんね…感謝しかないです

令和のサイト運営も配布も色々なことが手探りですが、来年もなんとなく適当にやっていきます　よろしくお願いします

年明け暇そうなときにサイトメンテする予定なのでちょっと繋がりにくくなる時間があるかもしれません、やるときは事前にまた告知します　ではよいお年を～

画像で特定記事への括弧付き相対リンクの書き方やっとわかった

[[PICT:h_test01.png]](./tegalog.cgi?postid=1)
こうだ
　

[[PICT:h_test01.png]](./?postid=1)
待てよ、こうでもいいのか
　
いけたわ

02のいきなり一覧版zikken03追加してきました　そんなに変わんないけど、お手持ちのサイトに組み込む用にはいいかも
zikken01、02もちょっとだけ更新しました　右上固定ボタンにz-indexを指定し忘れてたとかいう

zikken03として最初から一覧表示になるやつも作ろうかな　サイトに作品ページとして組み込む用に　02のIF文ちょっと消すだけでいけそうだし…

zikken02放流しました

クイックポスト欄をトップ以外で非表示にするの最初はIF文でやってたんだけど、"Login-Required"クラスでログイン時のみ表示機能を使っている場合、ログイン判定はクイックポストがあるかどうかでやってるらしいので、クイックポストが出力自体されないページでは管理ボタンとか編集ボタンが見えちゃうんですね

ということをアップした直後に気付いて慌ててCSSで非表示に直しました

こことhokanのデモサイトのてがろぐ本体をVer 4.2.0にアプデしました　スキンの表示がおかしいとかなんかあったらお知らせください

hokan、サムネと一覧の並び方の挙動をちょっと変更　一つの項目が決められた幅以下になると折返し、均等幅もいい感じに調整してくれるようになりました　これでコンテンツ幅をいじっても対応できるようになったはず

hokanでサムネイルにする#自由装飾 (thumb)、今は80px四方で整列させるだけなんだけど(以下)
/* 画像サムネイル */
.deco-thumb {
   display: grid;
   grid-template-columns: repeat(auto-fit,80px);
   gap: 5px;
}
.deco-thumb :where(.embeddedimage,.imagelink) { aspect-ratio: 1; object-fit: cover; width: 100%;}

こっちのがいいかな(幅いっぱいに並べられるだけ並べて100px以下になると折り返す)
/* 画像サムネイル 2*/
.deco-thumb2 {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(100px,1fr));
   gap: 5px;
}
.deco-thumb2 :where(.embeddedimage,.imagelink) { aspect-ratio: 1; object-fit: cover; width: 100%;}

※画面幅いじってみると挙動がわかりやすいです

#スキンkozin #カスタマイズ

(2024/05/26追記：カテゴリ欄を横並び表示に更新しました)

解説リクエストいただいたので、kozinカテゴリ欄のカスタマイズを置いておきます　カテゴリ欄をタグリストと同じ感じの横並び表示にするよ
続きを読む
・カテゴリ一覧を横並びにして「・」を消す(タグ表示と同じにする)には
まず「skin-cover.html」の76行目あたり
<div class="categorylistarea">[[CATEGORY:TREE]]</div> <!-- カテゴリー -->
を、今ハッシュタグがあるサブ領域(div class="subarea-ue"のとこ)まで持ってきます　そして「tegalog-kozin.css」の末尾に以下のcssを追加してください

/* カテゴリーリスト区画 */
.cattree {
   margin: 1.5rem 0;
   padding: 15px;
   background-color: var(--hobo-siro);
   border-radius: 5px;
   list-style: none;
   position: relative;
}
.cattree li { display: inline-block; margin-right: 0.5rem; }

/* フォルダアイコンを重ねる */
.cattree::before{
   content:"\e2c7";
   font-family: "Material Icons Round";
   font-size: 25px;
   color: var(--koi-iro);
   position: absolute;
   top: -10px;
   left: 10px;
}

「display: inline-block;」で横並び、「list-style: none;」で黒点を消しています(本当は「display: inline-block;」で横並びにすると勝手に黒点も消える仕様なのですが一応指定しています)　後の記述は余白とか見た目の調整です
枠の左上に重なってるフォルダのアイコンがいらなければ「/* フォルダアイコンを重ねる */」から下の記述を消しておいてください

↓こんな感じになったでしょうか


ハッシュタグリストを移動したかったら、55行目あたりの
<div class="hashtaglistarea">[[HASHTAG:LIST]]</div> <!-- ハッシュタグ -->
を好きなところに移動させておいてください　今まであったカテゴリリストと同じ縦並び表記にしたかったら、「tegalog-kozin.css」の506～526行目あたりの
/* ▼ハッシュタグリスト区画 */
.hashtaglist {
   margin: 10px 0;
   padding: 15px;
   background-color: var(--hobo-siro);
   border-radius: 5px;
   position: relative;
}
/* タグアイコンを重ねる */
.hashtaglist::before{
   content:"\f05b";
   font-family: "Material Icons Round";
   font-size: 25px;
   color: var(--koi-iro);
   position: absolute;
   top: -10px;
   left: 10px;
}
.hashtaglist li { display: inline-block; margin-right: 5px; }
の記述をまるっと消してください
畳む

#スキンkozin #カスタマイズ

(2024/05/26追記：画像枚数を画像に重ねる形に更新しました)

解説リクエストいただいたので、kozinギャラリーモードのカスタマイズを置いておきます　カテゴリやタグの記述を消したり画像枚数を画像に重ねたりするよ
続きを読む
・kozinギャラリーモードでカテゴリ・タグの情報を消すには、「skin-onelog.html」の
18・19行目あたり
<span class="galcateg">[[CATEGORYLINKS:GALLERY]]</span>
<span class="galtags">[[COMMENT:TAGS:GALLERY]]</span>
を消すといいです

日付は元投稿へのリンクになっているのですが、特に必要なければ、20行目あたり
<span class="galpostdate"><a href="[[PERMAURL:PURE]]" class="datelink">»[[DATE:Y/G/N]]</a></span>
も一緒に消しちゃってください

全部消すなら、16～21行目あたりの
<!-- カテゴリ、タグ、投稿日時等 -->
<p class="galloginfo">～</p>ごと消しちゃってもいいかもです

・画像枚数を画像に重ねるには、まず「skin-onelog.html」の8行目あたりの<br>を消して、「tegalog-kozin-gallery.css」の末尾に以下のcssを追加してください

/* 画像枚数を画像に重ねる */
.gallogbox { position: relative;}
.pictcount {
   position: absolute;
   z-index: 1;
   display: block;
   padding: 3px 5px;
   top: 0px;
   left: 0px;
   background-color: var(--koi-iro);
   color: var(--hobo-siro);
}

※各記述の簡単な解説
padding: 3px 5px;→文字と背景の間の余白です　上下3px、左右5pxの余白を設定しています
top: 0px;とleft: 0px;→画像枚数の表示を、画像の上から0px、左から0pxのところ(左上ぴったり)に配置しています　「bottom:(数値);(下から)」「right:(数値);(右から)」の記述方法もありますので、お好きな場所に配置してみてください
background-color: var(--koi-iro);→画像枚数の背景色です　「var()」で指定しているのは「tegalog-kozin-gallery.css」16行目～あたりの「カスタム用色変更欄」に書いてある名前です　これを指定するとそこと同じ色になります　もちろん、色名や「#FFFFFF」とかのカラーコードなどで指定しても構いません　「rgb(0,0,0,0.6)」って指定すると半透明黒とかになります
color: var(--hobo-siro);→画像枚数の文字色です　これも背景色と同じ指定が可能です
(※おまけ　border-radius: 5px;を追加すると角丸になるよ)

よくわからなかったらこの辺のサイトさんが参考になると思います
→CSSでの色の指定方法について
→画像の上におしゃれに文字やボタンをのせる方法（CSS）
→CSS 画像の上に文字や画像を重ねる 左上/右上/左下/右下/中央

↓こんな感じになるはず(日付リンクは消さなかったver.)

畳む