てがろぐ - Fumy Otegaru Memo Logger -

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

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

or 管理画面へ

No.3216

▼いきなりは見せたくない画像にワンクッション置きたい場合の(たぶん)チョー簡単な方法 #🌱豆知識

ワンクッション用の画像を(画像ごとに用意するわけではなく)共通の1種類だけ用意して使い回したい場合には、サムネイル画像を用意するよりも、以下の方法で記述する方が楽で良さそうです。
長いので畳んでおきます。

---【前提説明というか事前説明というか背後の説明】---
てがろぐでは、画像を挿入する際に、以下のように書きますね。
[PICT:gazo.jpg]
これだけだと、実際には以下のような感じのHTMLで出力されます。(説明に不要な属性は省略)
<a class="imagelink" href="画像"><img class="embeddedimage" src="画像"></a>

---【ワンクッション置きたい際の記述例】---
先の画像挿入記法を、さらに自由装飾記法で囲んで、以下のように書きましょう。
[F:mask:[PICT:gazo.jpg]]
すると、以下のようなHTMLで出力されます。(説明に不要な属性は省略)
<span class="decorationF deco-mask"><a class="imagelink" href="画像"><img class="embeddedimage" src="画像"></a></span>

これを利用すれば、以下のようにCSSを書いておくことで、問答無用でクッション画像に差し替えられます。(リンク先は変わらないので拡大画像では本来の画像が見えます。)
.deco-mask .embeddedimage { display: none; }
.deco-mask .imagelink {
   display: inline-block;
   width: 200px;
   height: 200px;
   background-image: url("クッション画像のURL");
}


●まず、1行目で『本来表示されるハズだった画像』を消します。
●2~7行目で、『代わりのクッション画像』を表示しています。(画像は6行目にある background-image プロパティにURLを指定します。サイズは、4行目と5行目の width と height に指定します。クッション画像の原寸が表示サイズよりも大きいなら、さらに background-size:contain; とか background-repeat:no-repeat; とか加えると良いと思います。)

もしクッション用画像が複数種類あるなら、自由装飾記法で使うclass名を mask1、mask2、mask3……とか複数用意すれば良いでしょう。

※自由装飾記法で「mask」と指定すると、実際に出力されるclass名は「deco-mask」になる仕様に注意してCSSを書いて下さい。
自由装飾記法については、公式マニュアルの「class名を自由に指定できる装飾記法」をご覧下さい。

なお、画像1つずつで異なるクッション画像を用意したい場合は、今回の Ver 3.8.5β で実装したサムネイル画像機能が望ましいでしょう。
上記で紹介した方法でも、サムネイル画像を使う方法でも、OGP(og:image)では本来の画像が出ます。それを避けたい場合は1枚目の画像には無難な画像を指定するとかして下さい。^^;
また、本格的に容易には見せたくない画像の場合は、鍵付き機能を使うと良いと思います。鍵付き投稿の場合は、デフォルト設定ではOGPにも表示されません。

CSSは、もうちょっとなんかイイ書き方があるかも知れません。今ぱっと思いついたのを書いただけなので……。

※(標準添付スキンの)ギャラリーモード用スキンで同様の方法を使いたい場合は、No.3224をご覧下さい。
畳む

by nishishi. <1626文字> 編集

DASHBOARD

■複合検索:

  • 投稿者名:
  • 投稿年月:
  • #タグ:
  • カテゴリ:
  • 出力順序:

■新着画像リスト:

全201個 (総容量 17.81MB)

■日付検索:

■カレンダー:

2022年11月
12345
6789101112
13141516171819
20212223242526
27282930

■最近の投稿:

■フリースペース:

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

編集

▼現在の表示条件での投稿総数:

1件

▼最後に投稿または編集した日時:

2022年12月2日(金) 15:11:13〔7時間前〕

RSSフィード

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