てかさ~聞いて~!
ごめんなさい、↓の記事のパクリオマージュです。 m(_ _)m
未見の方はぜひオリジナルもご覧ください!
それで、この記事が面白かったのと、ちょうど自分が書いてた
という記事が応用できそうだったので、合わせ技でQiitaをかわいくしてあげました!
こんな感じでかわいいんだよ!🌟
Qiitaをかわいくしてやりました。アイデンティティの Qiita Gleen も Qiita Tomato にしてやりました。
このテーマのこだわりポイント🎀
本家をリスペククトしてミスティローズやトマトなどの同じ色を使わせてもらってます。
個人的に気に入っているのは文字選択の色も変えたところですかね。青じゃないのは新鮮。
簡単に使える方法教えるね!
スタイルシートの反映方法についてはこっちの記事で解説しているのでCSSだけ貼っておきます。
セレクタの指定が甘いのはご愛嬌ということで...
/* 全体の背景 */
div.allWrapper,
main {
background-color: pink !important;
}
/* 文字選択 */
::selection {
background-color: lightpink !important;
}
/* Qiitaアイコン */
a[aria-label="Qiita"] {
background-color: tomato !important;
}
/* 投稿するボタン */
header>div>div>div:last-child>button {
background-color: tomato !important;
}
/* いいねボタンのハートの色 */
div>svg[height="32"] {
fill: tomato !important;
}
/* いいねボタンのボーダーの色 */
div:has(svg[height="32"]) {
border-color: tomato !important;
}
/* 記事・広告・コメントとかのエリアの背景 */
article,
section,
aside,
aside+section>div {
background-color: mistyrose !important;
}
/* sectionのなかでも左側のボタンエリアと目次は除外 */
main>section,
section:has(nav) {
background-color: initial !important;
}
/* 目次のホバー・フォーカスの色 */
section>nav a:hover,
section>nav a.focus {
background-color: lightpink !important;
}
リスペクトをこめて、元記事だけピンクになるようにしてます。
{
"name": "js-css-apply",
"version": "1.0",
"manifest_version": 3,
"description": "JS CSS Apply",
"content_scripts": [
{
"matches": [
"https://qiita.com/moririn086/items/591c9de70368dc4c5333"
],
"css": [
"css/qiita-pink.css"
]
}
]
}