キットカットっぽい見た目だけどキットカットではないチョコを食…

No.3429

1143文字編集

にしし (nishishi) 2023年1月29日日曜日 13:43:28〔2年以上前〕回答/返信 Post No.3429

キットカットっぽい見た目だけどキットカットではないチョコを食べてみたところ、チョコの味がキットカットとはずいぶん違った……。

🍵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◆サポートありがとうございます！