settings (copy)
色設定
code:style.css
.navbar-default {
background-color: #ffffff;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
}
.navbar-default .navbar-nav>li>a {
color: #637282;
}
.navbar .navbar-menu>li>a {
color: #000;
}
.quick-launch .project-home .title {
font-size: 30px;
color: #555;
font-weight: bold;
}
.list li.page-list-item a .title-with-description {
font-weight: bold;
}
body {
background-color: #ffffff;
}
ul.grid li.page-list-item a {
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);
}
ul.grid.grid li.page-list-item.pin a .title {
color: #006192;
font-weight: bold;
}
.page {
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
background-color: #ffffff;
color: #000;
}
.editor {
color: #000;
}
.line.line-title {
font-weight: bold;
font-size: 2.1em;
line-height: 1.5;
}
.line strong.level-2 {
line-height: 2.1;
}
.line strong.level-3 {
line-height: 2.1;
}
.line .meta {
border-color: #ffffff;
}
.line .quote {
font-style: normal;
background: #ffffff;
}
.col-page-side {
width: 0px;
}
.page-list-item .description img.inline-icon {
height: 100%;
width: 100%
}
.search-form .form-group input {
background-color: rgba(255, 255, 255, 1.0);
border: 1px solid #dfe1e5;
border-color: rgba(223,225,229,0);
border-radius: 24px;
box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
color: #555;
padding: 0 15px;
}
.search-form .form-group button .kamon{
fill: #222;
color: #555;
margin-right: 8px;
}
.search-form .form-group input:focus {
border: 1px solid #dfe1e5;
}
スマホ
code:style.css
@media (max-width: 767px) {
.line.line-title {
font-size: 1.7em;
line-height: 1.5;
}
.quick-launch .project-home .title {
font-size: 18px;
}
}
settings
code:style.css
.navbar .row .project-home {
font-size: 17px;
font-weight: bold;
}
code:style.css
.editor {
color: #000;
}
.line.line-title {
font-weight : bold;
}
フォントを指定しない
code:style.css
html, body,
#editor,
.grid li {
font-family: sans-serif;
}
トップページのページリスト
code:style.css
ul.grid li.page-list-item a {
/*box-shadow: 0px 0.2px 1px 1px rgba(0,0,0,0.2);*/
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);
}
ul.grid li.page-list-item a .header{
border-top: solid 0px #000 !important;
height: 50%;
padding: 7% 7% !important;
}
ul.grid li.page-list-item a .content {
height: 100%;
}
ul.grid li.page-list-item a .icon{
padding: 10px 10px 10px 10px;
height: 60%;
}
.grid li.page-list-item a .icon img {
width: 60%;
}
ul.grid li.page-list-item a .description {
color: #666;
height: 50%;
}
ul.grid.grid li.page-list-item a .title {
color: #000;
font-weight: bold;
font-size: 14px;
}
/* ピンしたページと普通のページを同じ感じにする */
.grid li.page-list-item a .pin {
background-color: transparent;
background-image: none;
}
検索結果のページタイトルをボールドに
code:style.css
.list li.page-list-item a .title-with-description {
font-weight: bold;
}
文字色
青文字
赤文字
見出し緑飾り
見出し薄緑飾り
黄色マーカー
中項目飾り緑
code:style.css
/**** 文章構造化 ****/
/* 大項目 */
.deco-\~ { color: #3b943b; display:inline-block; width:100%; margin-bottom: .4em; border-bottom: 2px dashed #57BC57; font-weight:700;
}
/* 中項目 背景あり囲み*/
.deco-\% { padding: 0.4rem 1.5rem; display:inline-block; max-width:100%; background: #e2f7e0; margin:.4em 0; font-weight:700;}
/* 小項目 緑色下線 */
.deco-\+ { display:inline-block; max-width:100%; margin-bottom: .4em; border-bottom: 3px solid #a0d9a0; font-weight:700;
}
/* 灰色囲み飾り */
.deco-\" { padding: 0.2rem 1.3rem; display:inline-block; max-width:100%; background: #EEEEEE; margin-bottom: .4em 0; border-radius: 25px;
}
/**** 書式 ****/
/* 右寄せ */
.deco-\<:not(.deco-\<.deco-\/.deco-\>) {
position: absolute;
width: 100%;
text-align: right;
}
/**** ハイライト ****/
/* 黄色マーカー */
.deco-\' { background: linear-gradient(#FFF59D 0%, #FFF59D 100%); /*黄色マーカー*/ }
/* 赤文字 */
.deco-\! { color: #F21905;}
/* <過去の互換性のために残している> */
.deco-\# { color: #0455BF; /* 青文字 */ } /* helpfeelでは使えない */
画像を並べて表示する
ref: /scrasobox/画像を並べて表示
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 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 }
画像を拡大表示
code:style.css
.line .image { max-height: 320px; }
.level-1 img { width: 75%; max-height: none !important; }
.level-2 img { width: 100%; max-height: none !important; }
.deco-\# img { border: solid 1px #bbb; }
.deco-\= img { border: solid 1px #bbb; }
.deco-\& img { width: 240px; max-height: none !important; }
タグをラベル風に
code:style.css
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #fff;
color: #f27e48;
font-size: 1.0em;
border: 1px solid #f27e48;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
トップページのピン留で改行
code:style.css
.page-list-item.grid-style-item.pin + .page-list-item.grid-style-item:not(.pin) {
grid-column-start: 1; /* このアイテムから新しい行を始める */
}
未読のテロメアを強烈に
code:style.css
/* ↓新着以外のテロメアの色 */
.line .telomere .telomere-border { border-color: #57BC57; }
/* ↓新着のテロメアの色 */
.line .telomere .telomere-border.unread { border-color: #F23D5E; }
code:style.css
/* 全体のカラーパレットをMaterial Design風に */
:root {
--primary-color: #1976d2;
--primary-light: #63a4ff;
--primary-dark: #004ba0;
--surface-color: #ffffff;
--background-color: #f5f5f5;
--text-primary: rgba(0, 0, 0, 0.87);
--text-secondary: rgba(0, 0, 0, 0.6);
}
/* ハンバーガーメニューアイコン - 開閉の三角形も完全に削除 */
.navbar-brand .brand-icon,
.navbar-brand .kamon-caret-down,
.global-menu-button .kamon-caret-down {
display: none !important;
}
.navbar-brand:before {
content: "☰";
font-size: 24px;
color: white;
padding: 0 8px;
}
/* ナビゲーションバー */
.navbar-default {
background-color: #1976d2;
box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
}
/* ナビゲーションバータイトル色 */
.navbar-default .navbar-brand span,
#KOJI.SUGIYAMA {
color: #ffffff;
}
.navbar-default .navbar-brand,
.navbar .navbar-menu>li>a,
.navbar-default .navbar-nav>li>a {
color: rgba(255, 255, 255, 0.95);
}
/* 検索ボックス */
.search-form .form-group input {
background-color: rgba(255, 255, 255, 0.15);
border-radius: 4px;
border: none;
color: white;
padding: 8px 16px;
transition: background-color 0.3s;
}
.search-form .form-group input:focus {
background-color: rgba(255, 255, 255, 0.25);
}
.search-form .form-group input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
/* グリッドレイアウト */
.page-list ul.grid {
gap: 24px;
padding: 24px;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* カードの基本レイアウト */
ul.grid li.page-list-item a {
display: flex;
flex-direction: column;
background: var(--surface-color);
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
overflow: hidden;
position: relative;
}
/* カードの装飾 */
ul.grid li.page-list-item a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #2196f3, #64b5f6);
opacity: 0;
transition: opacity 0.3s ease;
}
ul.grid li.page-list-item a:hover:before {
opacity: 1;
}
/* カードホバー効果 */
ul.grid li.page-list-item a:hover {
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
transform: translateY(-3px);
}
/* カード画像を上部に */
ul.grid li.page-list-item a .icon {
padding: 0;
margin: 0;
height: 165px;
width: 100%;
overflow: hidden;
flex: 0 0 auto;
order: 0;
background-color: #f5f5f5;
}
/* プレースホルダー画像 */
ul.grid li.page-list-item a .icon:empty::after {
content: "No Image";
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #999;
font-size: 14px;
background-color: #f5f5f5;
}
ul.grid li.page-list-item a .icon img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
ul.grid li.page-list-item a:hover .icon img {
transform: scale(1.05);
}
/* カードヘッダー（タイトル部分） */
ul.grid li.page-list-item a .header {
padding: 12px 16px !important;
background: var(--surface-color);
order: 1;
flex: 1;
}
/* カードタイトル */
ul.grid li.page-list-item a .title {
color: var(--text-primary);
font-size: 15px;
font-weight: 500;
line-height: 1.4;
margin-bottom: 4px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* カード説明文 */
ul.grid li.page-list-item a .description {
color: var(--text-secondary);
font-size: 13px;
line-height: 1.4;
padding: 0;
margin-top: 4px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
visibility: hidden;
height: 55%;
}
/* ピン留めカードのスタイル */
ul.grid li.page-list-item.pin a {
background: #ffffff;
border: 2px solid #1976d2;
box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}
ul.grid li.page-list-item.pin a:hover {
border-color: #1976d2;
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
transform: translateY(-3px);
}
/* 最初のピン留めカードを2倍幅に */
ul.grid li.page-list-item.pin:first-child {
grid-column: span 2;
grid-row: span 2;
margin-bottom: 0px;
}
ul.grid li.page-list-item.pin:first-child .icon {
height: 330px;
}
ul.grid li.page-list-item.pin:first-child .title {
font-size: 18px;
}
.navbar .navbar-menu .user-name {
color: white;
}
.project-home, .project-home .title {
color: white;
}
/* レスポンシブ対応 */
@media (max-width: 767px) {
.page-list ul.grid {
gap: 16px;
padding: 16px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
ul.grid li.page-list-item.pin:first-child {
grid-column: span 1;
}
ul.grid li.page-list-item a .icon {
height: 150px;
}
ul.grid li.page-list-item.pin:first-child .icon {
height: 150px;
}
ul.grid li.page-list-item.pin:first-child .title {
font-size: 15px;
}
}