てがろぐ
- Fumy Otegaru Memo Logger -
No.3430, No.3429, No.3428, No.3427, No.3426, No.3425, No.3424［7件］
3426です。3427さん、にししさん、早速ありがとうございます！
投稿本文の方は➊キャプションに半角スペースなどを登録した上でキャプションなしで貼り付ける方法と、にししさんの➋の方法ともに試してはみ出さなくなりました！ありがとうございました。
新着画像リストの方は➌を試してみたらはみ出さなくはなりましたが、正方形の画像が横方向に3個以上並ぶウィンドウサイズの時にNSFWフラグ画像だけ少し上にずれます(下のスクリーンショット)。
.imagelistbox .oneimageのvertical-alignをtopに変更してみたら上方向へのズレは大分軽減されましたが、middleにすることで「画像下部に余計な空白ができるのを防ぐ」役割だったので画像下部に僅かに余白が出ます。この辺なら自力でも調整出来そうなので引き続き試行錯誤してみます。
有名メーカーのものと見た目がほぼ同じだけど別メーカーのお菓子あるあるですね。私も100均のお菓子コーナーで、ロッテのチョコパイみたいな見た目の別メーカーの商品を買ったら、チョコの味が全然違ってコレジャナイ…となった思い出があります😂 見た目は同じに出来ても、チョコの味もやっぱり重要ですね。
投稿本文の方は➊キャプションに半角スペースなどを登録した上でキャプションなしで貼り付ける方法と、にししさんの➋の方法ともに試してはみ出さなくなりました！ありがとうございました。
新着画像リストの方は➌を試してみたらはみ出さなくはなりましたが、正方形の画像が横方向に3個以上並ぶウィンドウサイズの時にNSFWフラグ画像だけ少し上にずれます(下のスクリーンショット)。
.imagelistbox .oneimageのvertical-alignをtopに変更してみたら上方向へのズレは大分軽減されましたが、middleにすることで「画像下部に余計な空白ができるのを防ぐ」役割だったので画像下部に僅かに余白が出ます。この辺なら自力でも調整出来そうなので引き続き試行錯誤してみます。
有名メーカーのものと見た目がほぼ同じだけど別メーカーのお菓子あるあるですね。私も100均のお菓子コーナーで、ロッテのチョコパイみたいな見た目の別メーカーの商品を買ったら、チョコの味が全然違ってコレジャナイ…となった思い出があります😂 見た目は同じに出来ても、チョコの味もやっぱり重要ですね。
キットカットっぽい見た目だけどキットカットではないチョコを食べてみたところ、チョコの味がキットカットとはずいぶん違った……。
🍵Re:3425◆楽しいスキンをありがとうございます！ QUICKPOSTのウインドウの重なり方がまさしくそれっぽいな、と思いました。^^
🍵Re:3426◆公式ドキュメントがお役に立っているようで嬉しいです。(╹◡╹) さて、ぼかされた画像が、本来の描画領域からはみ出さないようにする方法については、いろんな方法があると思いますが、以下に紹介します。
➊ まずは、No.3427さんがおっしゃるように、キャプション付きの記法を使ってキャプションなしで表示する方法だと、何もカスタマイズすることなく標準スキンのままで実現できます。
画像管理画面でキャプションを登録していないなら、単に [PICT:FIG:画像パス] のように書けば良いだけですが、キャプションを登録しているなら [PICT:FIG( ):画像パス] のように、臨時のキャプションとして半角空白文字を1つ入れると良いです。すると、figure要素で囲まれるので、ぼかされた画像が元の範囲からはみ出なくなります。（No.3428で比較実験しました。）
➋ 何らかの事情で上記のようにはしたくない場合は、例えば、
.imagelink.nsfw {
overflow: hidden;
display: inline-block;
}
というようなCSSを追記するのでも良いかもしれません。これは、標準スキンではfigure要素に対して付加されているスタイルです。画像がリンクになっているなら、画像は <a class="imagelink" ～>～</a> で囲まれますので、これに「中身がはみ出ないようにするスタイル」を加えれば良さそうに思います。
➌ 新着画像リストでぼかされた範囲が外に出ないようにするには、例えば、
.imagesearch {
overflow: hidden;
display: inline-block;
width: 100px;
height: 100px;
}
というCSSを追加した上で、既存の .imagelistbox .oneimage { ～ } の中にある width: 30%; という行を削除すると良さそうな気がします。
上記でご紹介したコードはどれも、いま思いついただけのものなので、もっと良い書き方があるかもしれません。（何か思いつかれた方がいらっしゃったらぜひ教えて下さい。）
🍵Re:3427◆サポートありがとうございます！
🍵Re:3425◆楽しいスキンをありがとうございます！ QUICKPOSTのウインドウの重なり方がまさしくそれっぽいな、と思いました。^^
🍵Re:3426◆公式ドキュメントがお役に立っているようで嬉しいです。(╹◡╹) さて、ぼかされた画像が、本来の描画領域からはみ出さないようにする方法については、いろんな方法があると思いますが、以下に紹介します。
➊ まずは、No.3427さんがおっしゃるように、キャプション付きの記法を使ってキャプションなしで表示する方法だと、何もカスタマイズすることなく標準スキンのままで実現できます。
画像管理画面でキャプションを登録していないなら、単に [PICT:FIG:画像パス] のように書けば良いだけですが、キャプションを登録しているなら [PICT:FIG( ):画像パス] のように、臨時のキャプションとして半角空白文字を1つ入れると良いです。すると、figure要素で囲まれるので、ぼかされた画像が元の範囲からはみ出なくなります。（No.3428で比較実験しました。）
➋ 何らかの事情で上記のようにはしたくない場合は、例えば、
.imagelink.nsfw {
overflow: hidden;
display: inline-block;
}
というようなCSSを追記するのでも良いかもしれません。これは、標準スキンではfigure要素に対して付加されているスタイルです。画像がリンクになっているなら、画像は <a class="imagelink" ～>～</a> で囲まれますので、これに「中身がはみ出ないようにするスタイル」を加えれば良さそうに思います。
➌ 新着画像リストでぼかされた範囲が外に出ないようにするには、例えば、
.imagesearch {
overflow: hidden;
display: inline-block;
width: 100px;
height: 100px;
}
というCSSを追加した上で、既存の .imagelistbox .oneimage { ～ } の中にある width: 30%; という行を削除すると良さそうな気がします。
上記でご紹介したコードはどれも、いま思いついただけのものなので、もっと良い書き方があるかもしれません。（何か思いつかれた方がいらっしゃったらぜひ教えて下さい。）
🍵Re:3427◆サポートありがとうございます！
実験
➊キャプションあり → ➋キャプションなし → ➌キャプションに空白文字を臨時指定
▼NSFWフラグ画像：
①
NSFWフラグ付与の例
▼ノーマル画像：
①
キャプションだぜ！
➊キャプションあり → ➋キャプションなし → ➌キャプションに空白文字を臨時指定
▼NSFWフラグ画像：
①
③▼ノーマル画像：
①
③
>>3246
にししさんじゃないですが、キャプション付きを指定して投稿すると本文のほうははみ出さないですよ。キャプション付きでもキャプションを空にして大丈夫です。
にししさんじゃないですが、キャプション付きを指定して投稿すると本文のほうははみ出さないですよ。キャプション付きでもキャプションを空にして大丈夫です。
てがろぐVer3.9.0アップデートおよびドキュメント作成お疲れ様です。いつもてがろぐには大変お世話になっております、ありがとうございます！丁寧に詳細が書かれたドキュメントは「あの機能ってどうやって使うんだっけ？」「こういうことって実現できないかな？」と思った時にとても役立ってます。公式且つ日本語で詳しい解説が用意されているというのはユーザーとしてとてもありがたいです。
画像にNSFWフラグをつけた時のぼかし加工についての質問です。ぼかし度合いについてはこのままで良いのですが、隣接した部分にまでぼかした画像の色が被ってしまうのが気になるので(下のスクリーンショットの赤枠部分)画像外周の四辺はぼかさないようにしたいです。CSSで背景画像だけにブラー(ぼかし)エフェクトを加える方法 の「画像を大きめに引き伸ばし、端のぼやけた部分をカット」の項目を参考に読んでみたのですが、てがろぐのスキンをカスタマイズする場合はどこを変えたら良いのかがいまいちよくわからず…。標準スキンの場合、スキンをどのようにすれば画像外周の四辺はぼかさないように出来るかご教示頂けますと幸いです。
画像にNSFWフラグをつけた時のぼかし加工についての質問です。ぼかし度合いについてはこのままで良いのですが、隣接した部分にまでぼかした画像の色が被ってしまうのが気になるので(下のスクリーンショットの赤枠部分)画像外周の四辺はぼかさないようにしたいです。CSSで背景画像だけにブラー(ぼかし)エフェクトを加える方法 の「画像を大きめに引き伸ばし、端のぼやけた部分をカット」の項目を参考に読んでみたのですが、てがろぐのスキンをカスタマイズする場合はどこを変えたら良いのかがいまいちよくわからず…。標準スキンの場合、スキンをどのようにすれば画像外周の四辺はぼかさないように出来るかご教示頂けますと幸いです。
Twitterで見る デモモードで動作しています。ここでは、作者であるnishishiアカウント以外のツイートの埋め込みはできません。テキストリンクとして掲載は可能ですが、ツイート主が拡散を希望していない可能性がある点にもご配慮下さい。
葛根湯を数年ぶりに飲んで、そういえばこんな味だったな、と思い出しました。
🍔Re:3422◆リリースノートを読んで下さってありがとうございます。あれ、果たして読む人は居るのか……？ と思いながら毎回書いていますので。^^; [[COMMENT:TAGS]] の不具合もなかなか気付きにくい不具合でした。パラメータの前に別の文字列があるときにだけ反応しないとか、なかなか実験で遭遇しませんので。(^_^;;;
🍔Re:3422◆リリースノートを読んで下さってありがとうございます。あれ、果たして読む人は居るのか……？ と思いながら毎回書いていますので。^^; [[COMMENT:TAGS]] の不具合もなかなか気付きにくい不具合でした。パラメータの前に別の文字列があるときにだけ反応しないとか、なかなか実験で遭遇しませんので。(^_^;;;
