Skip to content

Qiita 和風スタイル-jp by sardonyx-sard

Screenshot of Qiita 和風スタイル-jp
Homepage Write a review Install Get Stylus

Details

Authorsardonyx-sard

LicenseDO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE

Categoryqiita

Created

Updated

Size31 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Qiita 和風スタイル

注意!

  • QiitaではおそらくCSS Modules化によりCSSクラス名のhash化がなされています。これはQiita公式がサイト修正などの更新を行うと値が変化します。
    そのため、当CSSのカスタマイズ方法のように厳密なハッシュ指定を使ったデザイン改変は公式の気まぐれな変更に非常に弱いです。(サイト運営の立場から考えるとCSSクラス名のハッシュ化は非常に有用ですが。)
    あなたがこのCSSスタイルをお使いの頃には既にいくつかのデザインが崩壊しているかもしれません。その点をご容赦頂ければ幸いです。

例： css_123 → Qiitaがサイトのデザイン更新を実施 → css_1234 (クラス名が変わってしまったため、指定した独自デザインが崩壊)

当CSSテーマの指針

  • 和を連想させるデザイン
  • 任意の背景が見えるように記事コンテンツ背景のほとんどを透過させる
  • 和を基調としてはいるものの、ユーザーにそのデザインを押し付けてはならない。(カスタマイズオプションを設ける)

完成部分:

  • Qiita 個々の記事

  • Qiita マイページ

  • Qiita serachページ

  • Qiita draftsページ

  • Qiita settingsページ

  • Qiita ストック記事

  • Qiita 編集リクエストページ

未完部分

  • 上記以外のその他(や質問ページ、「良い記事を書くためには」リンク)

その他

ライセンス

  • DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
    (改変、複製、何でもご自由にどうぞなライセンス)

Notes

  • Change Log

2021/11/22: v2.1.2
[Hotfix]
CSSのハッシュ変更による記事ページのデザイン崩壊を修正

2021/11/22: v2.1.1
[Add]
ホバーされたお知らせの色が見づらいのでスタイルを追加
2021/11/06: v2.0.1
[Hotfix]
CSSのハッシュ変更による記事ページのデザイン崩壊を修正
一部画像リンクが死んでいたのを修正

2021/10/20: v2.0.0
[Fix]
CSSのハッシュ変更による一部ページのデザイン崩壊を修正

               [Breaking Change] 
                 Atom-One-Darkに近いシンタックスハイライトオプションを追加
                 画像リンクの選択欄の追加と順序変更・削除

2021/09/09: v1.0.2
注意: Qiita.comのCSSのハッシュが書き換わった部分があるため、一部ページの表示に異常が発生
深刻なデザイン崩壊を急遽修繕

2021/08/01: v.1.0.1
色の選択項目を追加。軽微な修正等

2021/08/01: v.1.0.0リリース
編集リクエスト関連ページのスタイルを追加

2021/7/24: 検索ページのスタイルを追加

2021/7/23: 設定ページと記事編集ページのスタイルを追加

2021/7/21: リンクの文字色の未修正部分を改修

2021/7/14: root変数がグローバルなのを修正

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           Qiita 和風スタイル
@namespace  https://github.com/SARDONYX-sard/stylus-css
@version        2.1.2
@description  Qiita用の和風イメージスタイル - 2021/12/03 updated
@author         SARDONYX
@license        WTFPL(https://github.com/SARDONYX-sard/stylus-css/blob/main/LICENCE)

@advanced dropdown Atom-One-DarkStyle "Atom-One-Dark(like) Style" {
Yup "Yes*" <<<EOT 
    :root {
        --blue: #4ebbff;
        --aqua: #55d8e4;
        --orange: #e6a260;
        --violet: #be77ea;
        --white: #e3e3e3;
    }


    .it-MdContent .highlight .na {
        color: var(--white) !important;
    }


    .it-MdContent .highlight .se,

    .it-MdContent .highlight .mi,

    .it-MdContent .highlight .kc {
        color: var(--orange) !important;
    }

    .it-MdContent .highlight .sr {
        color: var(--aqua);
    }

    .it-MdContent .highlight .kr {
        color: var(--violet);
    }

    .it-MdContent .highlight .k,
    .it-MdContent .highlight .kd,
    .it-MdContent .highlight .kp,
    .it-MdContent .highlight .kt,
    .it-MdContent .highlight .no {
        color: var(--violet);
    }

    .it-MdContent .highlight .fm,
    .it-MdContent .highlight .gi,
    .it-MdContent .highlight .nc,
    .it-MdContent .highlight .nd,
    .it-MdContent .highlight .ne,
    .it-MdContent .highlight .nf,
    .it-MdContent .highlight .nx {
        color: var(--blue);
    }

    .it-MdContent .highlight .n,
    .it-MdContent .highlight .p,
    .it-MdContent .highlight .nb,
    .it-MdContent .highlight .ni,
    .it-MdContent .highlight .nl,
    .it-MdContent .highlight .nn,
    .it-MdContent .highlight .py,
    .it-MdContent .highlight .nv,
    .it-MdContent .highlight .w,
    .it-MdContent .highlight .bp,
    .it-MdContent .highlight .vc,
    .it-MdContent .highlight .vg,
    .it-MdContent .highlight .vi,
    .it-MdContent .highlight .vm {
        color: #e3e3e3;
    }

    .it-MdContent .highlight .ld,
    .it-MdContent .highlight .s,
    .it-MdContent .highlight .sa,
    .it-MdContent .highlight .sb,
    .it-MdContent .highlight .sc,
    .it-MdContent .highlight .dl,
    .it-MdContent .highlight .sd,
    .it-MdContent .highlight .s2,
    .it-MdContent .highlight .sh,
    .it-MdContent .highlight .si,
    .it-MdContent .highlight .sx,
    .it-MdContent .highlight .s1,
    .it-MdContent .highlight .ss {
        color: #a6ea61;
    }

    .it-MdContent .highlight .l,
    .it-MdContent .highlight .m,
    .it-MdContent .highlight .mb,
    .it-MdContent .highlight .mf,
    .it-MdContent .highlight .mh,

    .it-MdContent .highlight .mo,

    .it-MdContent .highlight .il {
        color: var(--violet);
    }

    .it-MdContent .highlight .o,
    .it-MdContent .highlight .gd,
    .it-MdContent .highlight .kn,
    .it-MdContent .highlight .nt,
    .it-MdContent .highlight .ow {
        color: var(--violet);
        color: #f77;
    }
EOT;
Nope "No" <<<EOT  EOT;
}


@advanced color custom-char-color "文字の色" #fff
@advanced color custom-bg-color "背景色" #505050c9
@advanced color custom-anchor-color "リンクの色" #e5f947
@advanced color custom-anchor-hover-color "リンク: (ホバー時)" #9ca83a
@advanced color custom-header-color "ヘッダーの色" #5d7452ab
@advanced color custom-toc-bg-color"メニューの背景" #9fa852
@advanced color custom-toc-active-color "目次の色: (アクティブ時)" #5d6f42b8
@advanced color custom-hover-bg-color "目次の色: (ホバー時)" #5a6e4aab
@advanced color custom-icon-br-color "アイコンの色" #94956c
@advanced color custom-icon-bg-color "アイコン: (ホバー時)" #98ad42

@advanced dropdown custom_wallpaper "背景" {
C1 "手水舎(Default)*"  <<<EOT https://www.pixelstalk.net/wp-content/uploads/2016/05/Japan-HD-Image.jpg EOT;
C2 "塔" <<<EOT https://images2.alphacoders.com/113/thumb-1920-1131058.jpg  EOT;
C3 "都会"  <<<EOT https://wallpaperaccess.com/full/1265.jpg EOT;
C4 "Wood" <<<EOT https://i.imgur.com/PtJ6fl7.jpg EOT;
C5 "Safari" <<<EOT https://cdn.wallpapersafari.com/63/66/bEVak3.jpg EOT;
C6 "fantasy" <<<EOT https://lilapila.com/wp-content/uploads/2021/02/HD-Desktop-Wallpaper-9.jpg EOT;
C7 "猫と蝶"  <<<EOT https://storge.pic2.me/cm/1920x1080/955/5f7f980c1b2194.21812251.jpg EOT;
C8 "桜"  <<<EOT https://images5.alphacoders.com/110/thumb-1920-1105001.jpg EOT;
C9 "紅葉"  <<<EOT https://cdn.wallpapersafari.com/72/79/4uV7vy.jpg EOT;

custom_wallpaper-custom-dropdown "カスタム" <<<EOT /*[[custom_wallpaper-custom]]*\/ EOT;
}
@advanced text custom_wallpaper-custom "背景(カスタム)" "https://cdn.wallpapersafari.com/48/32/YLptDi.jpg"
==/UserStyle== */
@-moz-document domain("qiita.com") {
    /* Qiita内全URI */
    /* ------------------------------------------------------------------- */
    /* 変数定義 */
    /* ------------------------------------------------------------------- */
    :root {
        --char-color: /*[[custom-char-color]]*/;
        --anchor-color: /*[[custom-anchor-color]]*/;
        --anchor-hover-color: /*[[custom-anchor-hover-color]]*/;
        --bg-color: /*[[custom-bg-color]]*/;
        --header-color: /*[[custom-header-color]]*/;
        --hover-bg-color: /*[[custom-hover-bg-color]]*/;
        --icon-br-color: /*[[custom-icon-br-color]]*/;
        --icon-bg-color: /*[[custom-icon-bg-color]]*/;

        --toc-active-color: /*[[custom-toc-active-color]]*/;
        --toc-bg-color: /*[[custom-toc-bg-color]]*/;
    }

    /*  Atom-One-Dark Styleの適用    */
    /*[[Atom-One-DarkStyle]]*/
    /* ------------------------------------------------------------------- */
    /* スクロールバー */
    /* ------------------------------------------------------------------- */
    ::-webkit-scrollbar {
        background-color: #262a2b;
        color: #cdc5b8;
    }

    ::-webkit-scrollbar {
        background-color: #262a2b;
        color: #cdc5b8;
    }

    ::-webkit-scrollbar-corner {
        background-color: #1d1f20;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #53595c;
    }


    /* ------------------------------------------------------------------- */
    /* 文字 */
    /* ------------------------------------------------------------------- */
    /* フォント& フォントサイズ------------- */
    h1,
    h2,
    h3,
    time,
    body,
    a,
    input,

    .st-Header_searchInput,
    .it-MdContent code,
    .co-Item_text,
    .p-home_menuHead,
    .p-home_menu a,
    .p-items_main,
    .css-helsa7 > p,
    .css-helsa7 > div,
    .css-helsa7 > span,
    .css-10ougpm,
    .css-1otty5d,
    .css-helsa7,
    .css-9bpbdu,
    .css-m19uds,
    .css-1uwmtsf,
    .css-1t1ffag,
    .it-MdContent,
    .css-18ojhlm,
    /* 左サイドバー */
    .css-5ch6y7,
    .css-1w23gl9,
    .css-115f4t,
    .css-1iupg5d,
    .css-1b8uj5v,
    .css-16hhh7b {
        font-family: Yu Mincho, Hiragino Mincho Pro, Sawarabi Mincho, serif !important;
        font-size: 1.67rem;
    }

    /*   アンカーリンク   */
    .css-1xh4v9b,
    .css-169mx63,
    .css-hiept0 {
        color: var(--anchor-color)
    }

    .css-1xh4v9b:hover,
    .css-169mx63:hover,
    .css-hiept0:hover {
        color: var(--anchor-hover-color)
    }


    /*  Qiitaお知らせ    */
    .an-Item_body > div > p,
    #HomeSidebar-react-component-e589ad8c-1b63-47c2-8237-51439d030fa7 > div.an-Item.p-2 > div.an-Item_title > p,
    .css-bibwyp,
    .css-u4p4ut/* 記事をフォローするボタン*/
    ,
    .css-cikcz {
        color: var(--char-color);
    }

    /*   フォーカスされているお知らせの色   */
    .css-1ckzadk {
        background-color: var(--hover-bg-color);
    }

    .css-u4p4ut:hover/* 記事をフォローするボタン*/
    ,
    .css-1ckzadk:hover {
        background-color: var(--hover-bg-color);
    }


    .css-s3gw6j,
    .wb-CampaignLink {
        display: none;
    }

    /*  ユーザーページの切り替えボタン    */
    .css-vzb2sn .css-1a5dffc {
        background-color: #fff0;
    }

    /*  アクティブ中のユーザーページの切り替えボタン    */
    .css-b2dqaf {
        background-color: #497301;
    }

    .css-b2dqaf:hover {
        background-color: #b0c54d;
    }


    .st-Header_searchInput,
    .qzf-ItemList_label,
    .p-home .qzf-ItemList,
    .p-home .ra-UserList,
    .p-home_main,
    .p-home .ra-TagList,
    .css-1laxd2k,
    .css-1hmn1pl,
    .css-y8q94p,
    .css-vvapww,
    .css-1j37wyh,
    .css-1qxtz39,
    .css-1dtnjt5,
    .css-1at84s3,
    /*ユーザーページの切り替えボタン */
    .css-b2dqaf,
    .css-1a5dffc,
    /* 文字色 */
    /* 左サイドバー */
    .css-1ncw05o,
    .css-1c9tso,
    .css-5ch6y7,
    .p-home_menuHead,
    .p-home_menu a,
    /* からリンク */
    .css-1w5fqid {
        color: var(--char-color) !important;
    }



    /*   ヘッダーサーチ   */
    .st-Header_search > ::-webkit-input-placeholder {
        color: #adadab;
    }

    .st-Header_searchInput {
        background-color: inherit;
    }



    .st-Header_start {
        background-color: #6f6f6f36;
    }


    /* ------------------------------------------------------------------- */
    /*UI */
    /* ------------------------------------------------------------------- */
    /* ドロップメニュー */
    .st-Header_dropdownItem,
    .st-RenewalHeader_dropdownItem {
        color: var(--char-color)t;
    }

    .st-Header_dropdownItem:hover,
    .st-Header_dropdownItem:hover {
        color: #e8e8e8;
    }

    .css-136ytem,
    .st-Header_dropdown.is-open,
    .st-RenewalHeader_dropdown.is-open {
        background-color: var(--toc-bg-color);
    }

    .css-154zy0m:hover,
    .st-Header_dropdownItem:hover,
    .st-Header_dropdownItem:hover,
    .st-RenewalHeader_dropdownItem:hover {
        background-color: var(--hover-bg-color);
    }



    /* ------------------------------------------------------------------- */
    /* 目次 */
    /* ------------------------------------------------------------------- */
    /* アクティブ状態の目次 */
    .css-1nlu9zn,
    .p-home_menuItem-active,
    .it-Toc a.focus {
        background-color: var(--toc-active-color) !important;
    }...

Reviews

No reviews yet.