settings
code:style.css
.navbar .row .project-home {
font-size: 17px;
font-weight: bold;
}
code:style.css
.editor {
font-size: 16px;
line-height: 1.82;
}
.line img.icon {
top: -0.15em;
}
.line .indent-mark .dot {
top: 12.5px;
}
.line.line-title {
font-weight : bold;
}
.page-column {
grid-template-columns: minmax(200px, 960px) min-content;
}
.page {
padding: 55px 70px 42px;
}
.line .telomere .telomere-border {
left: -70px;
}
@media (max-width: 767px)
{
.page {
padding: 28px 16px 42px;
}
.line .telomere .telomere-border {
left: -16px;
}
}
/*--------------------------------------------------
* コードブロックスタイル
*-------------------------------------------------- */
/* コードブロックの基本スタイル */
.line span.code-block {
font-size: 15px; /* PC向けは15px */
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
background-color: rgba(0, 0, 0, 0.03);
line-height: 1.6;
color: rgba(0, 0, 0, 0.75);
}
/* タブレット向けのコードブロック */
@media (max-width: 768px) {
.line span.code-block {
font-size: 14px;
}
}
/* スマホ向けのコードブロック */
@media (max-width: 576px) {
.line span.code-block {
font-size: 13px;
line-height: 1.5;
}
}
フォントを指定しない
code:style.css
html, body,
.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 {
height: 50%;
}
ul.grid.grid li.page-list-item a .title {
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: #0455BF; /* 青文字 */ } /* helpfeelでは使えない */ 画像を並べて表示する
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.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
/* ＃で始まるタグをラベル風にする */
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
font-size: 1.0em;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
-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
/* ピン止めされたカードのスタイリング */
.grid li.page-list-item.pin a {
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
border-radius: 8px;
transition: all 0.2s ease;
}
/* ピン止めされたカードのホバー効果 */
.grid li.page-list-item.pin a:hover {
transform: translateY(-2px);
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
/* ピン止めされたカードのヘッダー */
.grid li.page-list-item.pin a .header {
border-radius: 8px 8px 0 0;
padding: 16px !important;
}
/* ピン止めされたカードのタイトル */
.grid li.page-list-item.pin a .title {
font-size: 15px;
font-weight: 600;
line-height: 1.4;
}
/* ピンマーカー */
.grid li.page-list-item.pin .pin {
display: none;
}
/* ピン止めされたカードのアイコン */
.grid li.page-list-item.pin a .icon {
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.grid li.page-list-item.pin a .icon img {
max-height: 160px;
object-fit: contain;
}
/* ピン止めされたカードの説明文 */
.grid li.page-list-item.pin a .description {
padding: 16px;
font-size: 13px;
line-height: 1.6;
max-height: 120px;
overflow: hidden;
}
/* 非ピン止めカードとの間隔調整 */
.grid li.page-list-item.pin {
margin-bottom: 24px;
}
/* グリッドレイアウトの調整 */
.page-list ul.grid {
gap: 16px;
}