Settings

エリア1

UserCSS

code:style.css

@import "../Youtubeの埋め込みを小さくするUserCSS/style.css";

code: style.css

@import "../画像の表示サイズを［** ］で設定できるようにする/style.css";

code:style.css

@import "../好きな色CSS/style.css";

code:style.css

@import "../2023%2F07%2F25のナビゲーションバーのレイアウト変更を元に戻すUserCSS/style.css";

エリア2

code:style.css

@import "../箇条書きのバレットをFontAwesomeにするUserCSS/style.css";

@import "../scrapboxのtitleをnav barに固定するUserCSS/style.css";

@import "../のびのびドロップダウンUserCSS/style.css";

@import "../電光掲示板UserCSS/style.css";

@import "../💬雑談/style.css";

@import "../外部リンクをファビコンに置き換える記法/style.css";

@import "../インライン引用記法/style.css";

フォント

code:style.css

ホーム

サムネデザイン

code:style.css

body{

/*カードの下部影*/

--card-box-shadow:none;

--card-box-hover-shadow:none;

}

.page-list ul.grid{

display: flex;

flex-wrap: wrap;

justify-content: space-around;

margin-right: 0;

}

.page-list .grid li{

margin: 0 0 1.4em 0;

box-shadow: none;

}

.related-page-list {

padding: 0 3px;

}

.grid li.page-list-item a{

border-radius: 5px;

transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;

}

.grid li.page-list-item a:hover{

border-radius: 5px;

}

.grid li.page-list-item a .icon {

position: relative;

padding: 0;

margin: auto;

}

.grid li.page-list-item a .icon img{

width: auto;

max-height: 90px;

max-width: 90%;

border-radius: 5px;

}

.grid li.page-list-item a .header{

padding: 13px 10px 8px;

border-top: none;

}

.grid li.page-list-item a .title{

font-size: 0.9em;

text-align: center;

}

.grid li.page-list-item a .hover{background: transparent;}

ヘッダー

code:style.css

.brand-icon{display: none;}

ページ

デザイン

code:style.css

.page{box-shadow:none;}

.line.line-title .text{

text-align: center;

font-weight: bold;

letter-spacing: 0.06em;

text-indent: 0.06em;

}

画像、動画、youtube

code:style.css

.line img.image,.video-player video,.iframe-video-player iframe{

border-radius: 8px;

}

動画

code:style.css

.video-player video{

max-height: 360px;

}

アイコンデザイン

code:style.css

.line img.icon {

border-radius: 2px;

margin-left: 2px;

transform: translateY(2px);

}

外部リンクにホバーで注釈

code:style.css

.line:not(:has(.deco-\.)) a.link{position: relative;}

.line:not(:has(.deco-\.)) a.link:not(.icon)::after{

content: "新しいタブで開く";

position: absolute;

display: block;

width: 90px;

top: -31px;

left: 50%;

transform: translateX(-50%);

padding: 0 3px;

font-size: 5px;

font-weight: bold;

letter-spacing: -0.1em;

text-align: center;

pointer-events: none;

opacity: 0;

border-radius: 4px;

transition: all 300ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0.1s;

}

.line:not(:has(.deco-\.)) a.link:hover::after{

opacity: 1;

transition-delay: 0.5s;

}

.line:not(:has(.deco-\.)) a.link::before{

content: "";

position: absolute;

display: block;

width: 0;

height: 0;

top: -3px;

left: 50%;

transform: translateX(-50%);

border-right: 6px solid transparent;

border-left: 6px solid transparent;

opacity: 0;

transition: all 300ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0.1s;

}

.line:not(:has(.deco-\.)) a.link:hover::before{

opacity: 1;

transition-delay: 0.5s;

}

関連ページ

デザイン

code:style.css

.grid li.relation-label a {border-radius: 5px;}