settings
usercssの機能でここにスタイルを書けばページに適用される
usercssのやり方→/shokai/UserCSS
赤くする →!、青くする →|、蛍光緑 →~、薄くする→<
!"#%&'()*+,-./{|}<>_~が使えるもよう
code:style.css
/* 赤背景に白文字 */
.deco-\! {
color: #fff;
background-color: #ee6666; /* 赤背景 */
padding: 0.3em;
border-radius: .4em;
border-bottom: none;
}
.deco-\| {
color: #fff; /* 白文字 */
background-color: #8888ee; /* 青背景 */
padding: 0.1em 0.2em 0.1em 0.2em;
}
.deco-\~ {
background: linear-gradient( transparent 55%, #bbffbb 0% )
}
.deco-\< {
color: #ccc; /* 白文字 */
}
.deco-\> {
text-align: left;
border-bottom: solid 3px #aaa;
padding: 0% 98% 0% 0%;
}
/scrasobox/ピンしたページのスタイルより
code:除外style.css
.grid li.page-list-item a .pin {
background-color: transparent;
background-image: none
}
li.pin {
aspect-ratio: 1;
}
.grid li.page-list-item a .pin::after {
content: '\f08d'; font-family: 'Font Awesome 5 Free';
font-size: 20px;
color: #22f;
bottom: 0;
display: inline-block;
font-weight: 900;
transform: rotate(35deg);
}
白系のテーマ時：color:#22f;
黒系のテーマ時：color:#ff2;
code:style.css
.grid li.page-list-item a .pin {
height: 20px;
width: 20px;
}
/scrasobox/のびのびドロップダウン
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 90%; max-height: calc(100vh - 130px) !important; overflow-y: auto }
/help-jp/UserCSSより
特定キーワードで始まるリンクの色を変える
/medianmoe/Median
/magememo/げたさんところは緑にしてみた
けど見づらい
code:使わないstyle.css
.line a.page-link:is(href^="/medianmoe/Median") { color: springgreen; }
.line a.page-link:is(href^="/magememo/") { color: #007F3D; }
/noratetsu/●別タブで開くリンクにアイコンを添える
/noratetsu/●特定のリンクにfaviconをつける
code:style.css
/* External links */
.line a.link {
color: #2020d0;
}
.line a.link:not(.icon)::after {
font-family:'Font Awesome 5 Free';
font-weight: 900;
content: ' \f360';
font-size: 1.0rem;
padding-right: 0.5rem;
display: inline-block
}
.line a.link:is([href^="https://x.com"])::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://x.com);
display: inline-block;
width: 16px;
height: 16px;
padding-right: 1px;
vertical-align: -3px;
background-size: contain;
margin-right: 5px;
}
.line a.link:is([href^="https://www.nicovideo.jp"])::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://www.nicovideo.jp);
display: inline-block;
width: 16px;
height: 16px;
padding-right: 1px;
vertical-align: -3px;
background-size: contain;
margin-right: 5px;
}
/Porin-Room/settings タイトル
code:style.css
.line.line-title {
font-weight: bold;
border-bottom: solid 3px #ccc;
line-height: 1.4;
}
.line.line-title .text {
font-size: 1.2em;
padding-bottom: .5em;
}
/* スマホ表示用に調整 */
@media screen and (max-width: 670px) {
.line.line-title .text {
font-size: 1.8rem;
}
}
/Porin-Room/settings フォントはGeorgia→セリフ付き
明朝好きだから仕方ないね
code:style.css
html, body, .editor, .grid li {
font-family: Georgia, serif ;
}
/* PC表示ではデフォルトより大きめに表示 */
.line { font-size: 110%; line-height: 1.7; }
/* スマホ表示ではより小さめに表示する */
@media screen and (max-width: 670px) {
.line { font-size: 100%; }
.line span.code-block { font-size: 80%; }
body:not(.presentation) .code-block code > span:not(class)::before {
left: -4em;
}
}
2021/04/07あたりからhashTagってtypeが削除されている
２日くらいで直った
参考
http://kaji-raku.net/lifehack/scrapbox/5144
code:style.css
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 1px 8px;
margin: 0 3px 6px 0;
background: #eee;
/*color: #e7e;*/
font-size: 0.9em;
border: 1px solid #77e;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
https://gist.github.com/nozma/8b52dbb935307c92f6c6fd560d52bff2
code:style.css
/* コードの外観をどうにかしたい */
code {
font-family: monospace;
font-size: 95% !important;
}
/* カードを別の行に表示 */
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
特定ハッシュタグで画像を召喚する
邪魔だったので使ってない
https://twitter.com/mtane0412/status/1523698163374333953
code:style.css
@media only screen and (min-width: 480px) {
atype="hashTag"href="/medianmoe/%E7%A5%9E%E7%A7%98%E3%82%B9%E3%82%AD%E3%83%AB%E5%8A%B9%E6%9E%9C%E5%A2%97%E5%8A%A0%E3%83%90%E3%83%95"::after_ {
content: "";
background-image: url('https://i.gyazo.com/cf618161f2284903f51aed3958023963.png');
background-size: 100px 100px;
display: block;
width: 100px;
height: 100px;
position: absolute;
right: 270px;
bottom: -50px;
}
}
/AyaExpTech/settings
カーソルに位置に下線
code:style.css
.cursor-line {
background-color: rgba(0, 0, 0, 0.01);
box-shadow: inset 0 -5px 5px -5px rgba(0, 100, 0, 0.50);
}
検索結果の画像が小さいのをなんとかしたいのをなんとかしてもらった
code:style.css
.search-result-list .list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
grid-column-gap: 1vw;
grid-row-gap: 1vw;
}
.search-result-list .list li.page-list-item a .icon {
width: 100%;
max-height: 10rem;
margin: 0;
position: static;
}
.search-result-list .list li.page-list-item a {
padding: 0;
margin: 10px;
min-height: auto;
max-height: 18rem;
overflow: hidden;
}
.search-result-list .list li.page-list-item a .content {
margin: .5rem 0 0 0;
}
.search-result-list .list li.page-list-item a .title-with-description {
font-size: 14px;
line-height: 1.0;
font-weight: bold;
}
/noratetsu/●横幅の長くなった表をスクロールできるようにする（仮）
_code:style.css
.lines{
overflow-x: scroll; /*スクロールバーをつける*/
}
テロメアが消えるので外す
サムネ画像一覧とか出したいよね
code:style.css
.deco-\+ img.icon {
height: 150px;
}
元のサイズ
[グラフィカル マジック ウイング.icon]
グラフィカル マジック ウイング.icon
[]使うと大きくなる
1回しか使えない
[[グラフィカル マジック ウイング.icon]]
グラフィカル マジック ウイング.icon
今回増やした記法
[+ [グラフィカル マジック ウイング.icon]]
グラフィカル マジック ウイング.icon
幅が足りれば並べられる
グラフィカル マジック ウイング.icon グラフィカル マジック ウイング.icon
スマホモードだと横幅足りないので縦に並ぶ