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

2025年8月18日(月) 19:56:34〔10時間前〕更新

■No.3429 （ 1 件）

■フリースペース：編集

ここは、CGIの設定画面から自由に文章を入力して掲載できるスペースです。スキンを編集しなくてもCGI上から手軽に内容を変更できます(HTML使用可)。
動作サンプルです。◆他のスキン：標準スキン, 昔のツイッターっぽいスキン(ピンク版), 付箋型スキン, シンプル日記スキン, ジャーナル(日誌)スキン, ブログタイプスキン, チャットタイプスキン, 黒板スキン《てがろぐCGIの配布ページに戻る》

■日付検索：

新しい順(降順)時系列順(昇順)

■全文検索：

回答/返信〔1143文字〕編集

2023/01/29 (Sun) 13:43:28 No.3429 by にしし〔2年以上前〕

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

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