ブックマークのuserCSS
#UserCSS
栞を作成するための機能
.で表記
あいうえお
かきくえこ
さしすえそ
FontAwesome：https://waramo.co.jp/fa/
使用方法 [. 使用方法]
[. xxx]でブックマークが作成できるよ
右側のブックマークタブから飛べるよkame.icon
code:style.css
/* 下線を引く */
.app:not(.presentation) .line .deco-\. {
font-weight: bold;
width: 100%;
display: inline-block; /* おまじない */
padding: 0.2em 0.5em; /* 文字の上下 左右の余白 */
color: #494949; /* 文字色 */
border-left: solid 5px #38AEC1; /* 左線 */
border-bottom: solid 3px #d7d7d7; /* 下線 */
margin-bottom: 0.5em;
margin-top: 0.0em;
}
@media screen and (max-width: 990px) {
.app:not(.presentation) .line .deco-\.::after {
position: static;
padding-left: 0.3em;
}
}
/* ブックマークボタンのアイコン */
button#Bookmarks.tool-btn::before {
position: absolute;
content: '';
background-image: url('https://scrapbox.io/files/6629f6817393d100238acf00.png'); /* 画像のURLを設定 */
background-size: cover; /* 画像が要素のサイズに合わせて表示されるようにします */
width: 26px;
height: 26px;
}
button#Bookmarks.tool-btn img {
opacity: 0;
}
code:not-use.css
.app:not(.presentation) .line .deco-\. {
font-weight: bold;
text-decoration: underline;
text-decoration-color: #ABE5D2;
text-decoration-thickness: 2px;
background-color: transparent; /* 背景色を無効化 */
}
/* アイコン */
.app:not(.presentation) .line .deco-\.::after {
position: absolute;
top: 6px; /* 少し下に下げています */
left: -1.4em;
content: '\f02e';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 1.7rem;
line-height: 1;
color: #38AEC1; /* 任意の色に変更 */
}
/* ページメニューボタンのスタイル */
/* button#Bookmarks.tool-btn:hover { text-decoration: none; }
/* button#Bookmarks.tool-btn::before {
/* position: absolute; content: '\f02e'; font: 400 20px/46px 'Font Awesome 5 Free';
/* }
/* button#Bookmarks.tool-btn img { opacity: 0; }
/* button#Bookmarks.tool-btn:hover {
/* text-decoration: none;
/* }
/* button#Pinned.tool-btn:hover { text-decoration: none }
/* button#Pinned.tool-btn::before {
/* position: absolute; content: '';
/* }
/* button#Pinned.tool-btn img { opacity: 0 }
*/