_CSS_Title

UserCSS設定のための管理者用ページです。

ページタイトルでカードの見た目を変える系のコードまとめ。

/icons/水平線.icon

共通部分

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整理されています';

}

/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-size: contain;

background-repeat: no-repeat;

background-position: 50%;

background-color: rgba(255,255,255,0.8);

background-blend-mode: lighten;

}

background-size: contain;

background-repeat: no-repeat;

background-position: bottom;

background-color: rgba(255,255,255,0.7);

background-blend-mode: lighten;

}

/icons/水平線.icon

ツイートまとめ関連

code:style.css

/* アイコン */

content: ' \f4ba';

}

/* 背景画像 */

background-size: contain;

background-repeat: no-repeat;

background-position: 50%;

background-color: rgba(255,255,255,0.85);

background-blend-mode: lighten;

}

/icons/水平線.icon

構造ノート

code:style.css

/* アイコン */

content: ' \f0e8';

}

/* 背景画像 */

background-size: contain;

background-repeat: no-repeat;

background-position: bottom;

background-color: rgba(255,255,255,0.7);

background-blend-mode: lighten;

}

/icons/水平線.icon

研究所ガイド記事

code:x.css

/* アイコン */

content: ' \f0a1';

}

code:style.css

/* 背景画像 */

background-size: contain;

background-repeat: no-repeat;

background-position: 50%;

background-color: rgba(255,255,255,0.8);

background-blend-mode: lighten;

}

/icons/水平線.icon

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;

}

code:style.css

display: none;

}

margin-bottom: 0;

}