CSSカールセル
{$img1}
{$img2}
{$img3}
{$img4}
{$img5}
{$img6}
{$text1}
{$text2}
{$text3}
{$text4}
{$text5}
{$text6}
評価: 0+–x
blank.png

クレジット

タイトル: Croqstyle CSS
作者: ©︎CroquemboucheCroquembouche
作成年: 2021
訳者: nebula2700nebula2700

評価: 0+–x

これは何

ページの機能を改良するCSSを集めたものであり、非常に便利なため、CroquemboucheCroquembouche自身が多くのページで使用しています。

このコンポーネントは本当に軽微な変更を行うもので、執筆や、(私1がよくしている)コンポーネント/テーマの記述をしやすくします。これはあくまで文章を書きやすくするものであり、ページの見た目などを変えるものではありません。

私は、翻訳者がこのコンポーネントを気に入っていて、尚且つ使いたいわけでもなければ、このコンポーネントを使った記事において、その翻訳版でもこのコンポーネントが使われているとは思っていません。

このコンポーネントが他のコンポーネントやテーマと被ることはおそらくないだろうし、もし被ってしまってもそこまで問題ではないだろうと思っています。

使い方

どんなウィキでも:

[[include :scp-jp:component:croqstyle]]

このコンポーネントは、他のコンポーネントで使用されることを想定して設計されています。他のコンポーネントで使用する場合は、必ずそのコンポーネントの[[iftags]]ブロックの中に上記のコードを追加してください。これは、そのコンポーネントの使用者がCroqstyleの使用を強制されないようにするために重要なことです。

関連しているコンポーネント

スタイリングユーザーコンポーネント(数箇所を変更します):

スタイリングテーマ(見た目を細かく変更します):

CSS変更

適度なサイズの脚注

脚注の幅が100万マイルになるのを防ぎ2、実際に読みやすくします。

.hovertip { max-width: 400px; }

等幅編集/コード

編集テキストボックスを等幅にし、全ての等幅テキストのフォントを通常よりも明らかに優れたFira Codeに変更します。

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

テレタイプのバックグラウンド

<tt>要素({{text}})に薄い灰色の背景を追加し、コードスニペットをより目立たせます。

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

もうでかい顔には困らない

誰かのアバター画像にカーソルを合わせたときに、アバターの画像が大きく表示されないようにしました。あれは本当にくだらなくて、何より邪魔でした。大きなバージョンを見たいなら、クリックすれば良い話ですよね？

.avatar-hover { display: none !important; }

いくらでも改行すればいい

nobreakクラスを待つdiv内のテキストはどんな文字の間でも改行されます。3

.nobreak { word-break: break-all; }

コードの色

自分のターミナルのコードの色分けを変数として追加します。Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.

また、[[div class="code terminal"]]として偽のコードブロックに.terminalクラスを追加することで、黒い背景の擬似ターミナルとして使うことができます。Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.

Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

デバッグモード

Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.

You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.

…like this!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
revive.png
banner.jpg
banner202301b.png
2023年1月强化月
2023情人节竞赛
半月刊 - 2023年1月下

評価: 0+–x

这是什么？

这是由 hoah2333hoah2333 原为首页横幅轮播制作的轮播框 CSS 动画组件。与图像轮播框组件不同的是，该组件完全使用 CSS 动画制作，因此其加载速度极快。缺点是无法手动翻阅正在轮播的图片。此问题已使用一个位于左上角的导航菜单替代解决，可利用该菜单快捷进入轮播图片对应的链接。

使用方法

若需使用本组件，请在你所需的地方黏贴下方代码：

[[include :backrooms-wiki-cn:component:carousel-css
|navigator=none
|number=2/3/4/5/6
|img1=URL
|link1=URL
|text1=文字
|img2=URL
|link2=URL
|text2=文字
]]

你需要填写所有未标记为“（可选）”的参数。缺少参数将会导致组件无法正常运作。

navigator
（可选）		 导航栏
控制左上角的导航栏是否显示。
填写 none 即可去除导航栏。填写其它参数无效。
number 总图片数
轮播框中需要轮播的图片数。
仅能填写 2/3/4/5/6 中的任意一个数字。
单张图片无需轮播，填写 1 将使该组件变得无意义。
imgN 第 N 张图片链接
被轮播的第 N 张图片链接。
第 1 张图片使用 img1，第 2 张图片使用 img2，以此类推。
linkN 第 N 张图片跳转链接
被轮播的第 N 张图片被点击后所跳转的链接。
第 1 张图片使用 link1，第 2 张图片使用 link2，以此类推。
特别地，如果你不希望图片被点击后进行跳转，请在此处填写 #
textN 第 N 张图片在导航栏中的描述。
被轮播的第 N 张照片在导航栏中所显示的描述。
第 1 张图片使用 text1，第 2 张图片使用 text2，以此类推。

由于 CSS 动画本身的限制，动画顺序无法使用变量进行灵活修改。若需使用 7 张或以上的图片进行轮播，请考虑将轮播内容拆分，或直接联系 hoah2333hoah2333 添加 7 项轮播功能。

自定义时间

本组件默认设置每一张图片停留 5s，轮播动画持续 0.5s。你可以使用下方的代码调整这两个时间的长度：

[[module CSS]]
:root {
--base-wait-time: 5s;
--base-roll-time: 0.5s;
}
[[/module]]

扩展用法

revive.png
banner.jpg
banner202301b.png
2023年1月强化月
2023情人节竞赛
半月刊 - 2023年1月下

这是一个轮播示例


你可以将该组件放入图片框（或其它图片组件）内，以此来给此些图片添加注释。

下面是上方轮播示例的代码：

[[div class="scp-image-block"]]
[[include :backrooms-wiki-cn:component:carousel-css
|number=2/3/4/5/6
|img1=URL
|link1=URL
|text1=文字
|img2=URL
|link2=URL
|text2=文字
]]
[[div class="scp-image-caption"]]
描述性文字
[[/div]]
[[/div]]

组件样式代码

+ 展开组件样式代码
脚注
cnコンポーネント
ページリビジョン: 2, 最終更新: 14 Aug 2026 06:25
編集 評価 (0) タグ ディスカッション 履歴 ファイル 印刷 サイトツール + オプション
特に明記しない限り、このページのコンテンツは次のライセンスの下にあります: Creative Commons Attribution-ShareAlike 3.0 License