settings
外部リンクを自動判別・無料webフォントを引っ張り出してくる
code:style.css
/* 外部リンクにiconをつける */
.line span:not(.modal-image) > a.link:not(.icon)::before {
font-family: 'Font Awesome 5 Free';
content: ' \f35d';
font-weight: 600;
display: inline-block;
padding: 0 0.5em 0 0;
}
ツイートテスト
雛形 [& [https://twitter.com/share?text=「 」&url=短縮URL 🕊]]
code:style.css
.line .deco-\& {
background-size: cover;
z-index : 300 ;
display: block;
position: fixed;
bottom: 10px;
right: 10px;
height: 1em;
width: 1em;
padding: 0 ;
text-decoration: none;
font-size: 2em;
border-radius: 4px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
.line .deco-\&:hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
background-size: cover;
}
.line .deco-\& a{
opacity : 0 ;
}
ドット非表示
code:style.css
.line .dot {
display: none !important;
}
画像クリック時のURL非表示
code:style.css
.full-content-modal .modal-dialog .modal-content .modal-body a.link .text {
display: none;
}
引用
code:style.css
.line .quote {
display: inline-block;
border-left: solid 4px rgba(0,0,0,0.05);
padding-right: 1em;
font-size: 0.9em;
}
[** [画像URL]] で77%中央配置
code:style.css
.level-2 img.image {
width: 77%;
display: block;
margin: 0 auto;
}
.level-3 img.image {
max-height: 300px;
}
.level-4 img.image {
display: none;
}
span.deco .empty-char-index{
display: none;
}
[[画像URL]] で中央配置
code:style.css
.line img.strong-image {
display: block;
margin: 0 auto;
}
[! [画像URL][画像URL][画像URL]] で均等配置
code:style.css
span.deco-\! {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
span.deco-\! img {
padding: 0 .2em;
}
/* カーソル乗ってるところでは無効 */
.cursor-line .deco-\! { display: block }
[+ [画像URL]] で縦連結配置
code:style.css
span.deco-\+ img.image{
display: block;
margin: 0 auto;
}
span.deco-\+ .empty-char-index{
display: none;
}
/* カーソル乗ってるところでは無効 */
.cursor-line .deco-\+ { display: block }
画像の高さ制限OFF
code:style.css
.line .image {
max-height: none;
}
選択範囲の色
code:style.css
.selection{
}
ロゴ非表示
code:style.css
.brand-icon {
display: none;
}
検索窓
code:style.css
.search-form .form-group input {
}
色
code:style.css
html {
--new-button-bg: rgba(0,0,0,0);
/* --new-button-horizontal-color: #ff8080; */ /* --new-button-vertical-color: #ff80ff; */ --relation-label-bg: rgba(155,171,193,0.5);
/* link のラベルカラー*/
--relation-label-links-bg: rgba(155,171,193,1) ;
/* link のリンクカラー */
--page-link-color:#5e8af7 ;
--line-permalink-color: rgba(240, 243, 247,0.75);
/* new link のラベルカラー*/
/* new link のリンクカラー */
--search-form-bg: rgba(255,255,255,0);
}
ヘッダー
code:style.css
.navbar-default {
/*background-color: var(--navbar-bg, rgba(53,59,72,0.1));*/
background-color: var(--navbar-bg, rgba(255,255,255,0.1));
backdrop-filter: blur(5px);
box-shadow: 0 1px 2px rgb(0 0 50 / 5%);
}
.navbar-default:hover {
}
新規ページボタン
code:style.css
background-color: var(--new-button-bg);
}
background-color: var(--new-button-bg);
}
テロメア
code:style.css
.telomere {
display: none;
}
ページメニュー
code:style.css
.page-menu {
opacity: 0.1;
transition: opacity 0.3s;
}
.page-menu:hover {
opacity: 1;}
.page-sort-menu {
opacity: 0.1;
transition: opacity 0.3s;
}
.page-sort-menu:hover {
opacity: 1;
}
下部new link 非表示
code:style.css
.empy-links{
display:none;
}
リストアイテムのサムネイル埋め尽くし
code:style.css
.page-list.clearfix .grid li.page-list-item a .icon {
border-top: var(--card-title-bg) solid 10px;
padding: 0;
position: absolute;
display: block;
height: 100%;
width: auto;
}
.page-list.clearfix .grid li.page-list-item a .icon img {
/* position: relative; */
/* display: block; */
/* height: 100%; */
width: 100%;
min-height: 100%;
object-fit: cover;
/* max-width: 100%; */
/* margin: auto auto; */
}
.page-list.clearfix .grid li.page-list-item a {
border-radius: 7px;
}
/* ページ下部 */
.grid li.page-list-item a .icon {
height: 100%;
}
.grid li.page-list-item a .icon img {
display: block;
min-height: 100%;
object-fit: cover;
/* display: block; */
width: 100%;
/* margin: 0 auto; */
}
ボックスシャドウ変更
code:style.css
.grid li.page-list-item a {
box-shadow: 0rem 1.6rem 3.7rem -2rem hsl(200deg 50% 20% / 11%);
}
box-shadow: 0rem 1.6rem 3.7rem -2rem hsl(200deg 50% 20% / 11%);
}
pinのドッグイヤー非表示
code:style.css
.grid li.page-list-item a .pin {
display: none;
}
ページリストで内容を非表示
code:style.css
.page-list.clearfix .grid li.page-list-item a .description {
display: none;
}
pinのページを高さ変更
code:style.css
li.grid-style-item.pin{
height:100% ;
}
code:style.css
.page-list-item.grid-style-item.pin:nth-child(6) {
max-width: 1200px;
min-width: calc(100% - 40px);
height: 0px !important;
border-top: 1px solid #000; margin-top: 10px;
margin-bottom: 50px;
margin-right: 3%;
opacity: 0.1;
}
タイトルのスタイル変更
code:style.css
a.btn.project-home{
padding: 0;
transition: 0.3s;
}
a.btn.project-home:hover{
background: rgba(0, 0, 0, 0)!important;
transform: scale(1.05);
}
.project-home span.title {
display: inline-block;
padding: 4px 11px;
font-size: 0.95em;
border: 1px solid;
border-radius: 3px;
}
右下のページ数非表示
code:style.css
.status-bar {
display: none;
}
右上のソート・表示サイズのやつ
code:style.css
.right-box {
opacity: 0.1;
transition: opacity 0.5s;
}
.right-box:hover {
opacity: 1;
}
本文ボックスシャドウ非表示
code:style.css
.page {
box-shadow: 0 0px 0 rgb(0 0 0 / 0%);
}
ハッシュタグの見た目
code:style.css
opacity:0.7;
padding: 4px 6px;
font-size: 0.9em;
border: 1px solid;
border-radius: 2px;
}
opacity:1;
}
pin の icon を非表示
code:style.css
li.page-list-item.grid-style-item.pin a .content .icon {
display: none;
}
code:style.css