settings
code:style.css
/* --- フォント設定 --- */
body, .editor, .stream, .grid-style-item .title {
font-family: "Yu Gothic Medium", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif !important;
font-weight: 600 !important;
}
.line {
font-weight: 500 !important;
}
body {
background-color: rgba(230,205,210);
--card-bg: rgba(245,230,230);
--card-hover-bg: rgba(200, 100, 100, 0.15);
--card-title-color: rgba(80,60,60);
--card-description-color: rgba(100,80,80);
--tool-color: rgba(25,25,25, 0.6);
--tool-bg: rgba(210,120,120,0.3);
--tool-color: rgba(255,250,255);
--tool-text-color: rgba(255,250,255);
--search-form-icon-color: rgba(200,170,180);
}
.navbar-default {
--navbar-bg: rgba(230,205,210);
--navbar-icon-color: rgba(255,255,255);
--brand-icon-color: rgba(255,255,255);
--navbar-title-color: rgba(255,255,255);
}
.new-button {
--new-button-bg: rgba(255,255,255);
--new-button-hover-bg: rgba(255,240,245);
--new-button-active-bg: rgba(150, 100, 100, 0.6);
}
.search-form .form-group input {
--search-form-bg: rgba(260,250,255);
}
.grid li.page-list-item a .header {
border-top: unset
}
.grid li.page-list-item a .pin {
--card-backside: rgba(0,0,0,0);
--body-bg: rgba(0,0,0,0);
}
.grid li.page-list-item.grid-style-item.pin{
--card-bg: rgba(255,250,250);
}
/* グリッド内でのピン留め並び調整 */
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
/* 記事の非表示 ※最後に更新した記事が非表示にされてると段分けが無効化されるので注意※ */
/* ハッシュタグをボタンの見た目に */
color: var(--page-bg, #fff) !important; background-color: var(--page-link-color, rgba(210,120,120));
font-weight: bold;
padding: .2em;
border-radius: 2px;
}
background-color: var(--page-link-hover-color, rgba(200,100,100));
}
/* テロメアには消えてもらう */
.telomere {
display: none;
}
/* 行頭のドットを少し薄くする */
.line .indent-mark .dot {
top: 12px;
width: 6px;
height: 4px;
}
/* カード内画像 */
.page-list-item img {
width: 100%;
height: 100%;
border-radius: 8px;
object-fit: contain;
display: block;
}
code:style.css
/* --- ピン留め記事：ボタンデザイン --- */
.grid-style-item.pin {
/* 1. カード（ボタン）のサイズ設定 */
height: 50px !important;
width: 100% !important;
min-width: 140px !important;
/* 2. 背景・枠線・影のデザイン */
background-color: rgba(255, 255, 255, 0.4) !important;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08),
0 1px 3px rgba(0, 0, 0, 0.05);
/* 3. 余白・配置のリセット */
padding: 0 !important;
margin-top: 20px !important;
margin-bottom: 20px !important;
transition: all 0.2s ease;
}
/* 4. リンク領域のレイアウト */
.grid-style-item.pin > a {
display: flex !important;
align-items: center !important; /* 上下中央揃え（強制） */
justify-content: center !important; /* 左右中央揃え（強制） */
width: 100% !important;
height: 100% !important;
/* 元々のpaddingを消して、Flexboxの配置に従わせる */
padding: 3px 3px !important;
box-sizing: border-box !important;
}
/* 5. タイトル文字のデザイン（大きく・中央へ） */
.grid-style-item.pin .title {
/* 配置リセット */
margin: 0 !important;
padding: 0 !important;
/* 文字サイズを大きく */
font-size: 16px !important; /* 20pxに拡大 */
font-weight: bold;
/* 色 */
/* 行間を1.0にして、上下のズレをなくす */
line-height: 1.2 !important;
text-align: center;
/* 文字崩れ防止 */
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* 6. 不要な要素を消す */
.grid-style-item.pin .image,
.grid-style-item.pin .description,
.grid-style-item.pin .icon,
.grid-style-item.pin .info {
display: none !important;
}
/* 7. ホバー時の動き */
.grid-style-item.pin:hover {
background-color: rgba(255, 255, 255, 0.7) !important;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}
code:style.css
/* --- カード下部にぶら下がるラベル --- */
/* 1. ラベルを表示するカードの枠組み設定 */
/* 作品（🖊️） または 月報（📓） */
position: relative;
overflow: visible !important; /* カードの外へのはみ出しを許可 */
z-index: 10;
margin-bottom: 25px; /* 下の行と重ならないように余白を確保 */
}
/* 2. ラベルの共通デザイン（形・位置） */
/* 位置：カードの底辺からぶら下げる */
position: absolute;
top: 100%;
left: 0;
/* サイズと形状 */
width: 100%;
height: 24px;
border-radius: 0 0 6px 6px; /* ベロの形 */
/* 文字の配置 */
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: bold;
/* 影（立体感） */
box-shadow: 0 3px 3px rgba(0,0,0,0.15);
pointer-events: none;
}
/* --- 個別設定：作品ラベル --- */
content: "作品";
/* 色：紫に近い紅色（前回と同じ） */
}
/* --- 個別設定：月報ラベル --- */
content: "月報";
/* 色：作品より薄く白っぽい色（淡いピンク） */
/* 背景が薄いので、文字は濃い色に */
}