_CSS_Title2
UserCSS設定のための管理者用ページです。
ページタイトルでカードの見た目を変える系のコードまとめ。
/icons/水平線.icon
共通部分
background設定
code:style.css
.grid li.page-list-item a {
background-size: contain;
background-repeat: no-repeat;
background-blend-mode: lighten;
}
https://gyazo.com/2507754e7805a6f3f62fc666dcef6a20
FontAwesome設定
code:style.css
.grid li.page-list-item .title::before,
.list li.page-list-item .title-with-description::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
padding-right: 0.2rem;
display: inline-block;
top: 0.9rem;
}
.grid li.page-list-item .title::before {font-size: 11px;}
.grid.grid-md li.page-list-item a .title::before {font-size: 13px;}
.grid.grid-lg li.page-list-item a .title::before {font-size: 17px;}
.list li.page-list-item .title-with-description::before {font-size: 16px;}
文字列表示設定
code:style.css
.page-list .grid li.page-list-item .header::after {
white-space: pre; /* "\A"で改行可能にする */
display: block;
width: 100%;
padding: 1rem;
text-align: center;
position: absolute;
/* 以下中央寄せ設定 */
top: 60%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
/icons/水平線.icon
案内表示
code:style.css
content: '管理者の情報はこちら';
}
content: '記事はここに\A整理されています';
}
content: 'Blog';
font-family: Gruppo;
text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
}
content: 'Twitter';
font-family: Gruppo;
text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
}
/icons/水平線.icon
code:style.css
/* アイコン */
content: ' \f007';
}
/icons/水平線.icon
ブログ記事関連
code:style.css
/* 影を濃くして強調する */
box-shadow: 3px 3px 3px rgba(0,0,0,0.7);
}
/* アイコン */
content: ' \f5ad';
}
/* 背景画像 */
background-position: 50%;
background-color: rgba(255,255,255,0.8);
}
background-position: bottom;
background-color: rgba(255,255,255,0.7);
}
https://gyazo.com/57f5da416fed69ca4f8621766aab12f0https://gyazo.com/53cd23261dc2e6a95cb5390b24e5c480
/icons/水平線.icon
ツイートまとめ関連
code:style.css
/* アイコン */
content: ' \f4ba';
}
/* 背景画像 */
background-position: 50%;
background-color: rgba(255,255,255,0.85);
}
https://gyazo.com/c6f9ef45d7c4b64fe31909485b8a9222
/icons/水平線.icon
構造ノート
code:style.css
/* アイコン */
content: ' \f0e8';
}
/* 背景画像 */
background-position: bottom;
background-color: rgba(255,255,255,0.7);
}
https://gyazo.com/972af6334f1d2a9859e6a655034b0564
/icons/水平線.icon
研究所ガイド記事
code:x.css
/* アイコン */
content: ' \f0a1';
}
code:style.css
/* 背景画像 */
background-position: 50%;
background-color: rgba(255,255,255,0.8);
}
https://gyazo.com/5f93e65a3b979ae5333aca4f32600611
/icons/水平線.icon
Thinking out loud
code:style.css
/* アイコン */
content: ' \f4ad';
}
/icons/水平線.icon
末尾が「、」の記事
code:style.css
opacity: .5;
}
height: 95%;
width: 95%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
padding: 8px 8px;
position: absolute;
left: 0;
margin: auto;
}
/icons/水平線.icon
設定用ページ関連
設定用ページ群にレンチアイコン設定
code:style.css
content: ' \f0ad';
}
/icons/水平線.icon
code:style.css
display: none;
}
display: block;
}
Streamの履歴にページタイトルだけ表示する
code:x.css
display: none;
}
margin-bottom: 0;
}