Settings
style.css/* @import "../破線で下線なリンクデザイン/style.css"; */
@import "../箇条書きのバレットをFontAwesomeにするUserCSS/style.css";
@import "../箇条書きの深さをリセットするUserCSS/style.css";
@import "../../work4ai/外部リンクをファビコンに置き換える記法/style.css";フォント
style.css@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500&display=swap');
html, body, #editor, .grid li{font-family:'Zen Kaku Gothic New',"YuGothic",'Yu Gothic',"Font Awesome 5 Free","Font Awesome 5 Brands","Roboto","メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";}色
🔧は
が追加した変数です
style.css:root{
--body-bg: #3A434C; /* 全体背景 */
--navbar-bg: #25292c; /* ヘッダー背景 */
--tool-text-color: #b7bdc5; /* タイトル */
--new-button-vertical-color: #f5b901; /* +ボタン */
--new-button-horizontal-color: #f5b901; /* +ボタン */
--new-button-bg: transparent; /* +ボタン背景 */
--new-button-hover-bg: #45494b; /* +ボタン背景ホバー */
--new-button-active-bg: #45494b; /* +ボタン背景クリック */
--card-bg: #F5B901; /* サムネ背景 */
--card-title-bg: #22272B; /* 🔧サムネヘッダー背景 */
--card-title-color: #e3e3e3; /* サムネタイトル */
--card-description-color: #22272b; /* description */
--card-header-bg-pinned: #f5b901; /* 🔧ピンヘッダー背景 */
--card-content-bg: #22272b; /* 🔧ピンコンテンツ背景 */
--card-title-color-pinned: #22272b; /* 🔧ピンタイトル */
--card-description-color-pinned: #858d93; /* 🔧ピンdescription */
--icon-shadow-pinned: #000000; /* 🔧ピンアイコン_ロングシャドウ */
--icon-shadow: #c0940e; /* 🔧アイコン_ロングシャドウ */
} style.css/* 関連ページ ラベルデザイン */
:root{
--relation-label-bg: #fefefe;
--relation-label-empty-bg: #fefefe;
--relation-label-links-bg: #fefefe;
--relation-label-text:#304ea2;
--relation-label-empty-text: #b10e0e;
--relation-label-links-text: #304ea2;
} ホーム
ピンした頁を単独で上部に固定
style.css .page-list-item.pin + .page-list-item:not(.pin) {clear: both}ピン
style.css.app{padding-top: 55px;}
.grid li.page-list-item a .pin{display:none;}
.page-list .grid li.pin{margin-bottom: 2.5em;}
.page-list .grid li.pin:after{
content: "...";
letter-spacing: 1em;
text-indent: 1em;
color: #a9a9a9;
font-size: 1em;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -1.3em;
}
.container .grid li.pin a .content{
flex-direction: column;
background: var(--card-content-bg);
}
.grid li.page-list-item a .header.pinned {background-color: var(--card-header-bg-pinned);}
.grid li.page-list-item a .header.pinned .title{color: var(--card-title-color-pinned);}
.container .grid li.pin a .description{color: var(--card-description-color-pinned);}
サムネのデザイン
style.css.grid li.page-list-item a{
border-radius: 5px;
}
.grid li.page-list-item a .content{
height: 100%;
flex-direction: column-reverse;
}
.grid li.page-list-item a .header{
background-color: var(--card-title-bg);
padding: 8px 10px;
border-top: none;
}
.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 .title{
font-size: 0.9em;
text-align: center;
font-family: 'Zen Kaku Gothic New';
font-weight: 500;
letter-spacing: 0.05em;
text-indent: 0.05em;
} ロングシャドウ
style.css/* 影が飛び出るのでレイヤ―指定して被せる */
.grid li.page-list-item a .header{
z-index: 2;
}
.grid li.page-list-item a .icon img{
filter:
drop-shadow(1px 1px 0 var(--icon-shadow))
drop-shadow(2px 2px 0 var(--icon-shadow))
drop-shadow(4px 4px 0 var(--icon-shadow))
drop-shadow(8px 8px 0 var(--icon-shadow))
drop-shadow(16px 16px 0 var(--icon-shadow))
drop-shadow(32px 32px 0 var(--icon-shadow));
}
/* ピンされたページ */
.container .grid li.pin a .icon img{
filter:
drop-shadow(1px 1px 0 var(--icon-shadow-pinned))
drop-shadow(2px 2px 0 var(--icon-shadow-pinned))
drop-shadow(4px 4px 0 var(--icon-shadow-pinned))
drop-shadow(8px 8px 0 var(--icon-shadow-pinned))
drop-shadow(16px 16px 0 var(--icon-shadow-pinned))
drop-shadow(32px 32px 0 var(--icon-shadow-pinned));
}タイトル & ドロップダウンメニュー
style.css.quick-launch{margin: 0;}
.quick-launch .project-home, .quick-launch .project-home .title{
font-size: 1.6em;
font-family: 'Zen Kaku Gothic New';
font-weight: 300;
}
.quick-launch .flex-box{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
.quick-launch .left-box{
display: flex;
justify-content: space-around;
}
.quick-launch .right-box{
display: flex;
justify-content: space-around;
margin-bottom: 1em;
}
.dropdown-menu{
box-shadow: none;
border: none;
min-width: 270px;
}
.dropdown-menu-right{
left: 50%;
transform: translate(-50%, 0);
}ページ
デザイン
style.css.page{box-shadow:none;}
.line.line-title .text{
text-align: center;
font-weight: 500;
letter-spacing: 0.06em;
text-indent: 0.06em;
}動画
style.css.video-player video{
max-height: 360px;
}画像 中央揃え/角丸/シャドウ
style.css.line img.image {
display : block;
position: relative;
margin : 0 auto 0.7em;
border-radius: 0.5em;
filter: drop-shadow(0px 8px 24px rgba(149,157,165,0.22));
top: 1em;
} 画像を並べる
[| [画像URL][画像URL][画像URL]…] style.css/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| {
display: flex;
justify-content: center;
align-items: center ;
filter: drop-shadow(0px 8px 24px rgba(149,157,165,0.22));
margin: -1em 0 -3em;
}
.line .deco-\| img.image {
object-fit: contain;
margin: 0;
filter: drop-shadow(0px 0px 0px ) !important;
top: 0;
}
/* 太字記法と組み合わせて列数を変える */
.line [class^="level"] .deco-\| { flex-wrap: wrap }
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line [class^="level"] .deco-\| img.image { object-fit: cover; width: 100%; height: 100% }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line [class^="level"] .deco-\| > span { overflow: hidden }
.line .deco-\| img.image, .line [class^="level"] .deco-\| img.image { margin: .2em }
/* .line .text .modal-image + span{
display: none;
} */関連ページ
デザイン
style.css.grid li.relation-label a {border-radius: 5px;}ポップアップ
style.css/* ポップアップメニューのボタン周りの線を消す */
.selections .popup-menu .button-container .button:not(:first-of-type) { border: 0 }