Component Image Features
このページはコンポーネントページです
Wiki内で使用されているコンポーネントページです。このページを編集することはできません。
編集が必要だと思われる場合は、このページのディスカッションか、サイトスタッフまでご連絡ください。
詳しくはカテゴリ運用ポリシーを参照してください。

[フレーム]

[フレーム]

これは何?

代替[画像ブロック]のコレクションはあなたの記事、SCP、Tale、あるいはあなたが望むどんなものの画像にも、さらなる双方向性をもたらします!

使い方

ほとんどは一目瞭然ですが、いくつか共通の機能があります:

  • SIGMA-9とBLACK HIGHLIGHTERテーマの両方で使用可能です。
  • 全てのtrue/falseオプションが含まれる必要があります。
  • 画像はフロートさせることができます。 これは、テキストが画像の周辺で折り返されるということです。 |float=true を選んだ場合、 |align=left/rightも選択しなければいけません。このオプションによって、画像を画面のどちらでフロートさせるかを選ぶことができます。
  • Widthはmax-widthです。 モバイル版では、画像の幅は常に画面の50%になります。これを変更したければ、CSSの値を変更する必要があります。:

    .scp-image-block[data-feature="image-feature"] {
    max-width: [ここに幅を追加] !important;
    }

  • キャプションは任意です! |add-caption=falseを選んだ場合、|caption=textを含める必要はありません。
  • 代替テキストの設定が推奨されます! すべての画像は|alt=alt|alt-text=ここに画像の説明 オプションを持ちます。このオプションは省略可能ですが、アクセシビリティのために追加することをオススメします。代替テキストは、表示されている画像を説明するものでなければいけません。
  • Fractal Noise RevealとPixelate Revealはどちらもiframes内でHTMLを用いているため、これらは…Wikidot上では少し変則的です。動作する"はず"ですが、バグが発生する可能性も確かに存在します。
  • もし何か質問や要望がある場合、遠慮なく Woedenaz Woedenaz に連絡してください。すぐに返答できる保証はありませんが、善処します!

複数行キャプション

複数行キャプションの使用が可能です。
コードの書式を次のように整えるだけです:

|add-caption=true
|caption=これはとびきり長いキャプションで、最終的には改行されます。 _
キャプションの後にスペース"と"アンダースコアを追加するだけで機能します。 _
スペースがなければ動作しないことを覚えておいてください。 _
アンダースコアの後にスペースを追加しても機能しません。

IMAGE REVEALS

Hover Blur Reveal

Tap Blur Reveal on Mobile

平打ちパスタが入った金属製のボウルと青色の背景。
ぼかしすぎるとかなり奇妙に見えてしまうかもしれない
[[include :scp-jp:component:image-features-source |blur-reveal=--]
|blur-amount=数値 1.5 - 5 がおすすめです。大きな値=より大きなぼかし効果です!
|speed=数値 アニメーション速度(ミリ秒)
|float=true/false
|align=left/right
|width=px/rem/vw/% 全ての単位が機能します。
|url=url
|alt=alt|alt-text=ここに画像の説明
|add-caption=true/false
|caption=テキスト
]]

Hover Blur Change Image

Tap Blur Change Image on Mobile

平打ちパスタが入った金属製のボウルと青色の背景。
音声ファイルのスペクトログラフに隠されたパスタの塊の白黒写真。
両方の画像の高さと幅の比が同じであれば最も効果的です。
[[include :scp-jp:component:image-features-source |image-change=--]
|blur-amount=数値 1.5 - 5 がおすすめです。大きな値=より大きなぼかし効果です!
|speed=数値 アニメーション速度(ミリ秒)
|float=true/false
|align=left/right
|width=px/rem/vw/% 全ての単位が機能します。
|start-url=url ホバー前の画像のURLです。
|hover-url=url ホバー後の画像のURLです。
|alt1=alt|alt1-text=ここに1枚目の画像の説明
|alt2=alt|alt2-text=ここに2枚目の画像の説明
|add-caption=true/false
|caption=テキスト
]]

Hover Slide Blur Reveal

Tap Slide Blur Reveal on Mobile

Firefoxに対応したblur slideのコードはEstrellaYoshte EstrellaYoshte によって提供されました!

平打ちパスタが入った金属製のボウルと青色の背景。
平打ちパスタが入った金属製のボウルと青色の背景。
スライド方向はスライドがどの方向から離れるかを意味します。
[[include :scp-jp:component:image-features-source |slide-blur-reveal=--]
|blur-amount=数値 5 - 10 がおすすめです。大きな値=より大きなぼかし効果です!
|slide-direction=left/right/top/bottom スライドがどの方向から離れるかを指定します。
|float=true/false
|align=left/right
|speed=数値 アニメーション速度(ミリ秒)
|width=px/rem/vw/% 全ての単位が機能します。
|url=url
|alt=alt|alt-text=ここに画像の説明
|add-caption=true/false
|caption=テキスト
]]

Hover Slide Block Reveal

Tap Slide Block Reveal on Mobile

平打ちパスタが入った金属製のボウルと青色の背景。
スライド方向の意味はここでも同じです。
ここでも指定した方向からスライドが離れます。
[[include :scp-jp:component:image-features-source |slide-block-reveal=--]
|block-color=hex/rgb/hsl 全ての色の入力がここで機能します。
|slide-direction=left/right/top/bottom スライドがどの方向から離れるかを指定します。
|speed=Number アニメーション速度(ミリ秒)
|float=true/false
|align=left/right
|width=px/rem/vw/% 全ての単位が機能します。
|url=url
|alt=alt|alt-text=ここに画像の説明
|add-caption=true/false
|caption=テキスト
]]

Slide Image Revealer

[フレーム]
noodle.jpg
スライダーボタンの色は
slider-colorの値によって
白から黒まで変わります!
[[include :scp-jp:component:image-features-source |slide-revealer=--]
|block-color=hex/rgb/hsl 全ての色の入力がここで機能します。
|float=true/false
|align=left/right
|width=px/rem/vw/% 全ての単位が機能します。
|left-url=url これは左側の画像のURLです。
|right-url=url これは右側の画像のURLです。
|slider-start-percent=0-100 スライダーの開始位置を左から%で指定します
|slider-color=hex/rgb/hsl 全ての色の入力がここで機能します。
|slider-circle-size=px/rem/vw/% 全ての単位が機能します。
|alt1=alt|alt1-text=ここに左側の画像の説明
|alt2=alt|alt2-text=ここに右側の画像の説明
|add-caption=true/false
|caption=テキスト
]]

Hover Fractal Noise Reveal

Tap Fractal Noise Reveal on Mobile

平打ちパスタが入った金属製のボウルと青色の背景。[フレーム]
fractal sizesが小さいととてもきれいに見えます。
試してみてください!
[[include :scp-jp:component:image-features-source |noise-reveal=--]
|fractal-size=1-999 大きい数値はより小さなフラクタルを意味します。
|speed=Number アニメーション速度(ミリ秒)
|float=true/false
|align=left/right
|width=px/rem vwや% は機能しません。
|background=color/url("")/gradient あらゆる種類の背景の入力がここで機能します。
|url=url
|alt=alt|alt-text=ここに画像の説明
|add-caption=true/false
|caption=テキスト
]]

Hover Pixelate Reveal

Tap Pixelate Reveal on Mobile

平打ちパスタが入った金属製のボウルと青色の背景。[フレーム]
この動作は全てiframeによるものです。
可能であれば、1ページあたりに一度だけ用いるのがベストです。
[[include :scp-jp:component:image-features-source |pixel-reveal=--]
|pixel-res=数値 大きな数値はより大きなピクセルを意味します。 (4-32 の範囲がおすすめです)
|speed=数値 アニメーション速度(ミリ秒)
|float=true/false
|align=left/right
|width=px/rem vwや% は機能しません。
|url=url
|alt=alt|alt-text=ここに画像の説明
|add-caption=true/false
|caption=テキスト
]]

IMAGE ZOOMS

Hover Enlarge

Tap Enlarge on Mobile

平打ちパスタが入った金属製のボウルと青色の背景。
enlarge-amount=6 というのは画像が元のサイズの1.6倍まで大きくなるということを意味します。
enlarge-amount=20 は3.0倍の大きさを意味します。
[[include :scp-jp:component:image-features-source |hover-enlarge=--]
|enlarge-amount=数値 大きな値を設定すればその分大きく拡大されます. (5-20 の範囲がおすすめです。)
|speed=数値 アニメーション速度(ミリ秒)
|float=true/false
|align=left/right
|width=px/rem/vw/% 全ての単位が機能します。
|url=url
|alt=alt|alt-text=ここに画像の説明
|add-caption=true/false
|caption=テキスト
]]

Click & Hold Fullscreen

Tap Fullscreen on Mobile

平打ちパスタが入った金属製のボウルと青色の背景。
平打ちパスタが入った金属製のボウルと青色の背景。
ここで言うspeedとは
クリック/タップした際に画像が
画面中央にフェードインする速さのことです。
✖
[[include :scp-jp:component:image-features-source |click-fullscreen=--]
|speed=数値 アニメーション速度(ミリ秒)
|float=true/false
|align=left/right
|width=px/rem/vw/% 全ての単位が機能します。
|url=url
|alt=alt|alt-text=ここに画像の説明
|add-caption=true/false
|caption=テキスト
]]
Footnotes
. 訳注: 元記事のディスカッションページによると、この機能を用いるにはコンポーネントをincludeするページに画像ファイルがアップロードされる必要があります。
. 訳注: 元記事のディスカッションページによると、この機能を用いるにはコンポーネントをincludeするページに画像ファイルがアップロードされる必要があります。
ページリビジョン: 5, 最終更新: 01 Jun 2024 22:59
ディスカッション (4)
特に指定がない限り、このサイトのすべてのコンテンツはクリエイティブ・コモンズ 表示 - 継承3.0ライセンス の元で利用可能です。
ページを編集するにはこのボタンをクリックしてください。
セクションごとの編集を切り替えるにはこのボタンをクリックしてください(ページにセクションが設定されている必要があります)。有効になった場合はセクションに"編集"ボタンが設置されます。
ページのソース全体を編集せずに、コンテンツを追加します。
このページが過去にどのように変化したかを調べることができます。
このページについて話をしたいときは、これを使うのが一番簡単な方法です。
このページに添付されたファイルの閲覧や管理を行うことができます。
サイトの管理についての便利なツール。
このページの名前(それに伴いURLやページのカテゴリも)を変更します。
編集せずにこのページのソースコードを閲覧します。
親ページを設定/閲覧できます(パンくずリストの作成やサイトの構造化に用いられます)
管理者にページの違反を通知する。
何か思い通りにいかないことがありますか? 何ができるか調べましょう。
Wikidot.comのシステム概要とヘルプセクションです。
Wikidot 利用規約 ― 何ができるか、何をすべきでないか etc.
Wikidot.com プライバシーポリシー

AltStyle によって変換されたページ (->オリジナル) /