えむおか@moka

Icon of moka

No.123

スライダーを#CSS アニメーションでなく

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

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

えむおか@moka

Icon of moka

No.75

表示領域幅が1000pxを超える場合は2カラムになるようにしてみました

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

えむおか@moka

Icon of moka

No.74

先頭固定にしている記事が長いと新着を見失い?がちなので

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

えむおか@moka

Icon of moka

No.72

#てがろぐ バージョンアップ

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


NSFWフラグ付き画像キャプションつけない場合
NSFWフラグ付きの例
独自装飾・ウォーターマークつき
オリジナルの女の子
オリジナルの女の子
 オリジナルの女の子


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

えむおか@moka

Icon of moka

No.65

記事単体表示時の前後移動リンクを

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

えむおか@moka

Icon of moka

No.61

#てがろぐ にレスポップアップ機能をつけてみるテスト

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

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

えむおか@moka

Icon of moka

No.57

絵のテスト

絵のテスト
オリジナルの女の子
#CSS でウォーターマーク、的な

えむおか@moka

Icon of moka

No.52

スマホから見たときに背景がアドレスバーの高さ分途切れてしまう

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

えむおか@moka

Icon of moka

No.25

クイックポストの投稿するボタン

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

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

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

えむおか@moka

Icon of moka

No.13

#てがろぐ ギャラリーで

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

20221113191946-moka.jpg
https://10prs.com/tegalog/?mode=gallery

🔝