10plogてがろぐ実験場＋スキン作成

スライダーを#CSS アニメーションでなく
スクロールスナップにしようとしたけど適当にスタイル書いただけではスマホでうまくいかず失敗
また落ち着いたら何か考える…
参考：表示領域にピタッと移動！CSSでスクロールスナップを実装しよう | Webクリエイターボックス
https://www.webcreatorbox.com/tech/scrol...

#HTMLで改行コードが空白として表示されるのいまだにCSSでコレ！っていう解決方法ないのかな～
コメントで改行挟んだり閉じかっこ前で改行したりすればいいっていうのは知ってるけどソースの可読性的に悩ましい…

表示領域幅が1000pxを超える場合は2カラムになるようにしてみました
元のHTMLは触ってなくて#CSS のみでできたのうれしいね…😙

先頭固定にしている記事が長いと新着を見失い？がちなので
先頭固定記事が長い場合は表示を短くして続きを展開するボタンをつける#カスタマイズ をしてみました。
これはてがろぐデフォの機能の「隠す」を使ったものとは違い、先頭固定記事の内容が一定の高さを超えていたら勝手にそれ以上は隠し続きを展開するボタンが現れます。#jQuery を使っています。現時点では「一定の高さを超えたら隠す」は#CSS でやっているのでjsオフの環境だと困るかもしれません、あとあとCSSもjsで適用するようにしたほうがいいかも。→しました
先頭固定記事が一つの場合は自力で簡単にできたけど複数だとどうすればいいかちょっとよくわからなくて思ってたより時間がかかってしまった…😅

#てがろぐ バージョンアップ
Ver3.3.8 βになりました。画像情報編集機能の強化が目玉かな？以下キャプション付きやフラグ付き画像の#サンプル 。

　

NSFWフラグ付き画像キャプションつけない場合

独自装飾・ウォーターマークつき

　


現在ほかの自作スキン上ではキャプション付きやNSFWフラグ付きのスタイルを適用していません。この辺の#CSS は共通化させてもいいと思うんであとでなんかいい方法を考えようと思います。→しました。
ギャラリーモードの表示はこんな感じ。
https://10prs.com/tegalog/?mode=gallery
スマホで見たときにちょっと意図通りじゃないのでそれは何とか出来たらしたい

記事単体表示時の前後移動リンクを
記事ナンバーではなくタイトルで表示するようにしてみました。あとは#CSS でスタイル整えたらいい感じになるのでは？#てがろぐ 、出力されるソースに丁寧にIDやclassがつけられているのでjsやCSSでいじりやすいの助かる🙏
需要がありそうなら解説書きます

#てがろぐ にレスポップアップ機能をつけてみるテスト
60 … 数字にマウスオーバーでポップアップ
57 … 画像も込みでぽぷあっぷできる
50 … 同ページ内にない記事はポップアップできません
ので記事単体表示ページでもできないよ

スマホからはhoverが使えずタップしたらポップアップはするもののリンク踏んだと同じになってページ遷移もしちゃう、#CSS で pointer-events: none;とかしたほうがいいかも（記事単体以外、スマホのみ適用とか考慮必要そ

絵のテスト

#CSS でウォーターマーク、的な

スマホから見たときに背景がアドレスバーの高さ分途切れてしまう
ことへの対処はbodyではなくhtmlに背景を指定することで解決…iOSは知らん、高さ指定を100svhにしたらいいとかもみたけどどうなんだろう#CSS

クイックポストの投稿するボタン
以外を非表示にする #CSS こういうときに一般兄弟結合子(~)を使えばいいのか…

.line-control input ~ * { display:none; }


#てがろぐ
（でもこれ管理画面の設定で表示非表示選べるんですよね…あとから気づい

#てがろぐ ギャラリーで
特定のタグが付いている記事の画像にぼかしをかけます。
#CSS でかなり力技です。
例として#-R18 というタグが付いているときにぼかしがかかります。（※ワンクッション用のハッシュタグを一覧に載らない記法に変えました）
また、画像…というか全体クリックしたら記事単体に飛ぶようにしてます。


https://10prs.com/tegalog/?mode=gallery