settings
nunnnu.iconいろんな方を参考にしています...!!
配色参考
code:style.css
左上のロゴ変更
code:style.css
.brand-icon {
width: 25px;
height: 25px;
background-size:cover;
background-image:var(--logo-url);
background-repeat:no-repeat;
border-radius: 20%;
svg {display: none;}
}
/* これ意味ない*/
code:style.css
/* --------------------------------------------
1. カラーテーマ・基本設定
-------------------------------------------- */
:root {
/* カラーパレット */
--overlay-bg: rgba(0, 0, 0, 0.6);
}
/* フォント設定 */
html,
body,
code,
kbd,
pre,
samp,
.tooltip,
.editor,
.grid li,
.list li.page-list-item,
.popup-menu,
.stream {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 700;
font-style: normal;
}
/* 背景色 */
body {
background-color: var(--basecolor);
}
/* スクロールバー非表示 */
html {
scrollbar-width: none;
}
html::-webkit-scrollbar {
display: none;
}
/* --------------------------------------------
2. ナビゲーションバー
-------------------------------------------- */
.navbar-default {
background-color: var(--basecolor) !important;
border-bottom: none !important;
box-shadow: none !important;
}
/* ヘッダーの高さ調整 */
nav.navbar {
padding: 20px 0;
height: auto;
}
/* ヘッダーコンテナを中央寄せ */
.header-container {
display: flex;
justify-content: center;
}
/* 左側メニューを非表示 */
.navbar-left {
visibility: hidden;
pointer-events: none;
}
/* プロジェクトタイトルを中央配置 */
.navbar .row .project-home {
color: var(--text) !important;
position: absolute;
left: 50%;
transform: translateX(-50%);
margin: 0;
padding: 0;
}
/* 不要な要素を非表示 */
.navbar .navbar-menu,
.navbar .navbar-brand,
.navbar .row .navbar-form {
display: none;
}
/* 右上のクイックランチボタン類を非表示 */
.quick-launch .flex-box {
display: none;
}
/* --------------------------------------------
3. ページ本文
-------------------------------------------- */
/* ページ幅の設定 */
.page-column {
grid-template-columns: 70vw;
}
/* ページ背景を透明化 */
.page {
box-shadow: none !important;
border: none !important;
background-color: transparent !important;
}
/* 履歴表示を非表示 */
.telomere {
display: none !important;
}
/* 本文の文字色・サイズ */
.line .text {
color: var(--text) !important;
}
.line {
font-size: 20px;
}
/* ページタイトル */
.line.line-title .text {
color: var(--text) !important;
text-align: center;
letter-spacing: 0.06em;
text-indent: 0.06em;
}
.line-title {
font-size: 36px !important;
box-shadow: 0px 1px 0px 0px var(--text) !important;
padding-bottom: 20px !important;
display: block !important;
background-color: transparent !important;
}
/* タイトルと本文の間隔 */
.line-title + .line {
margin-top: 20px !important;
}
/* --------------------------------------------
4. リンク
-------------------------------------------- */
/* ページ内リンク */
.line a.page-link {
color: var(--accentcolor) !important;
}
/* 外部リンク */
.line a.link {
color: var(--accentcolor) !important;
}
/* リンクホバー時 */
.line a.page-link:hover,
.line a.link:hover {
color: var(--accentcolor) !important;
text-decoration: none;
}
/* 通常リンクのホバーアニメーション */
a.link:hover:not(:has(> img.image)) {
animation: blink 0.5s linear infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* ハッシュタグ */
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: inherit;
font-size: 0.8em;
border-radius: 3px;
transition: 0.3s;
transform: scale(1);
color: var(--accentcolor);
border: 2px solid var(--accentcolor);
}
color: var(--empty-tag-color);
border: 1px solid var(--empty-tag-color);
}
transform: scale(1.1);
}
/* リンクリスト関連 */
.related-page-list .toolbar,
.related-page-list .grid li.relation-label {
display: none !important;
}
.grid li.page-list-item a{
background-color: var(--basecolor);
}
/* --------------------------------------------
5. 画像・メディア
-------------------------------------------- */
/* 画像を最大表示 */
.line {
width: 100%;
}
.line .image {
width: 50%;
max-width: 100%;
max-height: none;
height: auto;
}
/* 画像リンクの設定 */
a.link:has(> img.image) {
position: relative;
display: inline-block;
max-width: 100% !important;
width: 100% !important;
}
a.link:has(> img.image) > img.image {
display: block;
width: 100% !important;
max-width: 100% !important;
height: auto;
object-fit: contain;
}
/* 画像リンクに再生ボタン表示 */
a.link:has(> img.image)::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 72px;
height: 72px;
background-color: var(--overlay-bg);
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='35,25 75,50 35,75' fill='white'/></svg>"); background-repeat: no-repeat;
background-position: center;
background-size: 60% 60%;
pointer-events: none;
z-index: 10;
opacity: 1;
}
a.link:has(> img.image):hover {
animation: none !important;
text-decoration: none !important;
background: none !important;
filter: none !important;
}
a.link:has(> img.image):hover > img.image {
opacity: 0.5;
transition: opacity 0.2s ease;
}
/* モーダル表示 */
.full-content-modal .modal-body .full-content {
display: inline-block;
pointer-events: none;
height: 80vh;
width: auto;
object-fit: contain;
}
@media (max-width: 650px) {
.full-content-modal .modal-body .full-content {
height: auto;
width: auto;
}
}
.full-content-modal .modal-body img.full-content,
.full-content-modal .modal-body svg.full-content {
background: none !important;
}
button.btn.btn-primary.draw-button {
display: none;
}
/* 動画プレーヤー */
.line .iframe-video-player,
.line iframe {
max-width: 100% !important;
width: auto !important;
height: auto !important;
aspect-ratio: 16 / 9;
}
.line:has(iframe) {
position: relative;
max-width: 100%;
}
.iframe-video-player-container {
position: relative;
width: 100%;
max-width: 800px;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.iframe-video-player-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
/* --------------------------------------------
6. 特殊記法
-------------------------------------------- */
/* --- によるセパレーター */
display: flex;
align-items: center;
text-align: center;
}
flex-grow: 1;
content: "";
border-top: 1px solid var(--text);
}
height: 28px;
}
display: none;
}
/* 二重括弧によるマーカー強調 */
.line strong:not(class) { background: linear-gradient(transparent 10%, var(--marker-color) 25%, var(--marker-color) 70%, transparent 90%);
}
/* --------------------------------------------
7. ページリスト
-------------------------------------------- */
/* ページリスト上部の余白 */
.page-list {
padding-top: 10vh !important;
}
/* コンテナ幅 */
.container {
max-width: 85% !important;
padding: 0 16px;
}
/* グリッド設定 */
.page-list ul.grid {
grid-auto-flow: row !important;
gap: 12px !important;
grid-template-columns: repeat(2, 1fr) !important;
align-items: start !important;
align-content: start !important;
}
@media screen and (min-width: 768px) {
.page-list ul.grid {
grid-template-columns: repeat(4, 1fr) !important;
}
}
@media screen and (min-width: 1200px) {
.page-list ul.grid {
grid-template-columns: repeat(6, 1fr) !important;
}
}
@media screen and (min-width: 1600px) {
.page-list ul.grid {
grid-template-columns: repeat(8, 1fr) !important;
}
}
/* 画像がある場合のみタイトルを非表示 */
.grid li.page-list-item:not(.pin) a:has(.icon img) .header .title {
opacity: 0;
transition: opacity 0.3s ease;
}
/* 画像がない場合はタイトルを表示 */
.grid li.page-list-item:not(.pin) a:not(:has(.icon img)) .header .title {
opacity: 1;
background-color: var(--card-title-bg);
}
/* 画像がない場合のカード背景 */
.grid li.page-list-item:not(.pin) a:not(:has(.icon img)) {
background-color: var(--basecolor);
}
/* ページリストのタイトル色 */
.grid li.page-list-item a .title {
color: var(--text) ;
}
/* hideタグで記事をページリストでは非表示(検索時は表示) */
display: none !important;
}
/* カード外枠の基本設定 */
.grid li.page-list-item:not(.pin) {
grid-column: auto / span 2 !important;
aspect-ratio: 16 / 9 !important;
height: auto !important;
width: auto !important;
align-self: start !important;
vertical-align: top !important;
margin: 0 !important;
contain: layout paint !important;
overflow: hidden !important;
}
/* カードの影・枠線を削除 */
.grid li.page-list-item a,
.grid li.page-list-item a:hover,
.grid-style-item {
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
outline: none !important;
transform: none !important;
}
.grid li.page-list-item a .icon,
.grid li.page-list-item a .content {
border-radius: 0 !important;
}
.grid li.page-list-item a .header {
border-top: none;
}
/* ピン留め直後のカードを左端に配置 */
.grid li.page-list-item.pin + li.page-list-item:not(.pin) {
grid-column-start: 1 !important;
margin-top: 0 !important;
}
grid-column-start: 1 !important;
}
grid-column-start: 1 !important;
}
/* Newリボンの位置調整 */
.grid li.page-list-item .ribbon {
margin: 0 !important;
position: absolute !important;
top: -5px !important;
left: -5px !important;
}
/* タイトルの高さを揃える */
.grid li.page-list-item a .header .title {
height: 50px;
}
/* --------------------------------------------
8. ピン留めカード
-------------------------------------------- */
/* ピン留めをタブ状に表示 */
.grid li.pin {
height: 32px;
width: 100%;
margin-bottom: 5px;
}
@media (hover: none) {
.page-list ul.grid {
grid-template-columns: repeat(6, 1fr);
}
.grid li.pin {
grid-column: 2 span;
}
.grid li:not(.pin):nth-child(odd) {
grid-column: 1 / 4;
}
.grid li:not(.pin):nth-child(even) {
grid-column: 4 / 7;
}
}
/* ピン留めカードの背景を透明化 */
.grid li.page-list-item.pin a {
background-color: transparent !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
margin: 0;
box-shadow: none !important;
}
.grid li.page-list-item a .header.pinned {
border: none !important;
background: none !important;
padding: 6px 5px;
}
/* ピン留めカードのタイトル */
.grid li.page-list-item.pin a .title {
font-size: 12px;
color: var(--accentcolor);
max-height: 20px;
text-align: center;
background: none !important;
}
/* Infoの色*/
color: var(--accentcolor) !important;
}
/* ピン留めカードのタイトルを中央配置 */
.grid li.page-list-item.pin a .header {
width: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
/* ピン留めカードの不要要素を非表示 */
.grid li.page-list-item.pin a .content :is(.description, .icon) {
display: none;
}
.grid li.page-list-item a .pin {
background: none;
display: none;
}
.grid li.page-list-item.pin::after {
background: transparent;
background-image: none;
display: none;
}
/* --------------------------------------------
9. 通常カード(ピン留め以外)
-------------------------------------------- */
/* カード全体のスタイル */
.grid li.page-list-item:not(.pin) a {
position: relative;
overflow: hidden;
border: none;
border-radius: 10px;
z-index: 0;
}
/* 画像がある場合のみタイトルを非表示 */
.grid li.page-list-item:not(.pin) a:has(.icon img) .header .title {
opacity: 0;
transition: opacity 0.3s ease;
}
/* 画像がない場合はタイトルを表示 */
.grid li.page-list-item:not(.pin) a:not(:has(.icon img)) .header .title {
opacity: 1;
background-color: var(--card-title-bg);
/* サムネ全体を覆うように拡大 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0px;
padding: 10px;
text-align: center;
}
/* 画像がない場合のヘッダー */
.grid li.page-list-item:not(.pin) a:not(:has(.icon img)) .header {
position: static;
width: 100%;
height: 100%;
}
/* 画像がない場合のカード背景 */
.grid li.page-list-item:not(.pin) a:not(:has(.icon img)) {
background-color: var(--basecolor);
}
.grid li.page-list-item:not(.pin) a .description {
opacity: 0;
transition: opacity 0.3s ease;
}
/* ヘッダー(タイトル)を左上に絶対配置 */
.grid li.page-list-item a .header {
position: absolute;
top: 0;
left: 0;
padding: 0;
max-width: 100%;
z-index: 10;
}
.grid li.page-list-item a .header .title {
font-size: 13px;
letter-spacing: 0.02em;
line-height: 22px;
background-color: var(--card-title-bg);
display: inline-block;
padding: 2px 2px;
border-bottom-right-radius: 0px;
}
/* 説明文 */
.grid li.page-list-item a .description {
padding: 0 10px;
margin-top: 40px;
display: none;
}
/* 画像を背景として表示 */
.grid li.page-list-item a .icon img {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover;
z-index: -1;
}
/* 正方形表示設定(オプション) */
.grid li {
aspect-ratio: 1 / 1 !important;
}
/* --------------------------------------------
10. 新規ページ作成ボタン
-------------------------------------------- */
.new-button {
position: fixed;
left: 0;
}
/* ランダムに記事を開くボタンを非表示 */
.tool-btn.random-jump-button {
display: none !important;
}
;){kind=link}