てがろぐ - Fumy Otegaru Memo Logger -

お手軽一言掲示板(この辺の文章は「管理画面」の「設定」内にある「フリースペース」タブから編集できます。)

■フリースペース: 編集

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

or 管理画面へ

No.3431, No.3430, No.3429, No.3428, No.3427, No.3426, No.34257件]

Icon of admin あどみ てがろぐを使おうとすると、パスワード・セッションID格納ファイルが開けませんでした。って表示されて進まない。どうすれば…
Icon of sakura さくら 3426です。3427さん、にししさん、早速ありがとうございます!
投稿本文の方は➊キャプションに半角スペースなどを登録した上でキャプションなしで貼り付ける方法と、にししさんの➋の方法ともに試してはみ出さなくなりました!ありがとうございました。

新着画像リストの方は➌を試してみたらはみ出さなくはなりましたが、正方形の画像が横方向に3個以上並ぶウィンドウサイズの時にNSFWフラグ画像だけ少し上にずれます(下のスクリーンショット)。
.imagelistbox .oneimageのvertical-alignをtopに変更してみたら上方向へのズレは大分軽減されましたが、middleにすることで「画像下部に余計な空白ができるのを防ぐ」役割だったので画像下部に僅かに余白が出ます。この辺なら自力でも調整出来そうなので引き続き試行錯誤してみます。

有名メーカーのものと見た目がほぼ同じだけど別メーカーのお菓子あるあるですね。私も100均のお菓子コーナーで、ロッテのチョコパイみたいな見た目の別メーカーの商品を買ったら、チョコの味が全然違ってコレジャナイ…となった思い出があります😂 見た目は同じに出来ても、チョコの味もやっぱり重要ですね。
nsfw_test2_new.jpg
NO IMAGE にしし キットカットっぽい見た目だけどキットカットではないチョコを食べてみたところ、チョコの味がキットカットとはずいぶん違った……。

🍵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◆サポートありがとうございます!
Icon of admin あどみ 実験
➊キャプションあり → ➋キャプションなし → ➌キャプションに空白文字を臨時指定
▼NSFWフラグ画像:
NSFWフラグ付与の例
NSFWフラグ付与の例
NSFWフラグ付与の例

▼ノーマル画像:
キャプションだぜ!
キャプションだぜ!
キャプションだぜ!

Icon of admin あどみ >>3246
にししさんじゃないですが、キャプション付きを指定して投稿すると本文のほうははみ出さないですよ。キャプション付きでもキャプションを空にして大丈夫です。
Icon of sakura さくら てがろぐVer3.9.0アップデートおよびドキュメント作成お疲れ様です。いつもてがろぐには大変お世話になっております、ありがとうございます!丁寧に詳細が書かれたドキュメントは「あの機能ってどうやって使うんだっけ?」「こういうことって実現できないかな?」と思った時にとても役立ってます。公式且つ日本語で詳しい解説が用意されているというのはユーザーとしてとてもありがたいです。

画像にNSFWフラグをつけた時のぼかし加工についての質問です。ぼかし度合いについてはこのままで良いのですが、隣接した部分にまでぼかした画像の色が被ってしまうのが気になるので(下のスクリーンショットの赤枠部分)画像外周の四辺はぼかさないようにしたいです。CSSで背景画像だけにブラー(ぼかし)エフェクトを加える方法 の「画像を大きめに引き伸ばし、端のぼやけた部分をカット」の項目を参考に読んでみたのですが、てがろぐのスキンをカスタマイズする場合はどこを変えたら良いのかがいまいちよくわからず…。標準スキンの場合、スキンをどのようにすれば画像外周の四辺はぼかさないように出来るかご教示頂けますと幸いです。

nsfw_test_css.jpg
Icon of tomoyo ともよ Twitterで見る デモモードで動作しています。ここでは、作者であるnishishiアカウント以外のツイートの埋め込みはできません。テキストリンクとして掲載は可能ですが、ツイート主が拡散を希望していない可能性がある点にもご配慮下さい。

動作サンプルです。 ご自由にお試し下さい。パスワードguest管理画面もお試し頂けます。
■いま見ているスキンは「チャットタイプスキン」です。他に、 標準スキン昔のツイッターっぽいスキン(ブルー)昔のツイッターっぽいスキン(ピンク)付箋型スキンシンプル日記スキンジャーナル(日誌)スキンブログタイプスキン(タイトル付きブログっぽくできるスキン)、 黒板スキンがあります。
てがろぐCGIの配布・解説ページに戻る