Pixivの閲覧ページを昔のスタイルにできるだけ近づけるスタイルシート

いつぞやから大きく変化したPixivのイラスト閲覧ページのレイアウトを頑張って昔のスタイルに近づけるスタイルシート。
ノードで辿っているので些細な変更には強いつもりなれど、たまにバグる。

#root,
body,#root > div:nth-child(2) > div:nth-child(1),
#root > div:nth-child(2),
#root > div:nth-of-type(2) >  div:nth-of-type(2) > div:nth-child(1)
{
    /*ページ全体の余白削り*/
    /*header下 .bcMPWx,*/
    
    margin: 0;

    max-width: 100% !important;
    min-width: 80% !important;
}


#root > div:nth-of-type(2) >  div:nth-of-type(2) > div:nth-of-type(1) >  div:nth-of-type(2) > div:nth-of-type(2)> div:nth-of-type(1) > div:nth-of-type(1),

#root > div:nth-of-type(2) >  div:nth-of-type(2) > div:nth-of-type(1) >  div:nth-of-type(1) > div:nth-of-type(1)> div:nth-of-type(2) > div:nth-of-type(1),

#root > div:nth-of-type(2) >  div:nth-of-type(2) > div:nth-of-type(1) >  div:nth-of-type(1) > div:nth-of-type(1)> div:nth-of-type(3),

#root > div:nth-of-type(2) >  div:nth-of-type(2) > div:nth-of-type(1) >  div:nth-of-type(2) > div:nth-of-type(3)> div:nth-of-type(1)> div:nth-of-type(1)

{
    /*一覧ページ全体の余白削り*/
    
    margin: 0;
    padding:10px;

}


/*header in*/
#root > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1){
    height:auto;
    
        min-width: 80% !important;
        max-width: 100% !important;
        grid-template-columns: 200px 1fr 1fr !important;
        grid-template-rows: 50px 50px !important;
    
        grid-template-areas:
            "logo   empty   findb "
            "logo   funcs   funcs ";
    
        grid-gap: 0px;
    
}


#root > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
grid-area:logo;
}


#root > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) {
    margin: 10px;
grid-area:findb;
}


#root > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) {
    margin: 10px;
grid-area:funcs;
}

/*ここまで*/










/* 画像下のプロフィールが冗長なので非表示に ,.jVJZHz*/

section.bLzALD> div:nth-child(2) > div:nth-child(1),
#root > div:nth-child(2)> div:nth-child(1)> div:nth-child(2)
{
    display: none !important;
}



/*仮設親*/
#root >  div:nth-of-type(2) >  div:nth-of-type(2) >  div:nth-of-type(1) > div:nth-of-type(1) > main > section >  div:nth-of-type(1) > div:nth-of-type(1){
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
    align-items: center;
}
/*

sc-LzNve#root >  div:nth-of-type(2) >  div:nth-of-type(2) >  div:nth-of-type(1) > div:nth-of-type(1) > main > section >  div:nth-of-type(1) > div:nth-of-type(1)
jFytZx


*/

/* キャプション位置 */
#root >  div:nth-of-type(2) >  div:nth-of-type(2) >  div:nth-of-type(1) > div:nth-of-type(1) > main > section >  div:nth-of-type(1) > div:nth-of-type(1)> figcaption {
    /*:not([class]) {*/
    order: 1;
    /*margin: 0px 0 -10px 18px;*/
    /*margin: 0px 80px -10px 98px;*/
    margin: auto;
    max-width: none;
    width: 90%;
}

/* キャプションと画像の上下を入れ替え */
#root >  div:nth-of-type(2) >  div:nth-of-type(2) >  div:nth-of-type(1) > div:nth-of-type(1) > main > section >  div:nth-of-type(1) > div:nth-of-type(1)> figure {
    order: 2;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}


/* 「すべて見る」+シェアボタン  なんか間に余計なdivが入ってずれてる*/
div#root >  div:nth-of-type(2) >  div:nth-of-type(2) >  div:nth-of-type(1) > div:nth-of-type(1) > main > section >  div:nth-of-type(1) > div:nth-of-type(1)> div:nth-child(5) {
    order: 3;
    margin: 0 auto;
    position:static;
    width: 90%;
}



/*すべて見る削除*/
div#root >  div:nth-of-type(2) >  div:nth-of-type(2) >  div:nth-of-type(1) > div:nth-of-type(1) > main > section >  div:nth-of-type(1) > div:nth-of-type(1)> div:nth-child(5) > div:nth-child(1) > div:nth-child(2) > button:nth-child(2) {
    display: none !important;
}


/* プロフィールと作品カラムの左右を入れ替え */
/*aside下main上*/
.dkdRNk {
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
    align-items: center;
}

/*サムネなど main部*/
.cJLgmH {
    order: 2;
    width:90%;
    
}

/*名前欄・前後作品 aside部*/
.hdvpLU {
    order: 1;
    width: 90%;
    display: flex;
    flex-direction: row;
    margin: auto;
}

/*ここまで*/
/* 名前欄 */

/*名前*/
aside.hdvpLU > section:first-child {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100px !important;
    margin-right: 50px;
}


aside.hdvpLU > section:nth-child(1) > h2:nth-child(1) > div:nth-child(1) {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 90px !important;
}

/*前後作品*/

aside.hdvpLU > section:nth-child(2) {
    margin: 0;
    order: 2;
    width: 50%;
    background-color: #ede6e6;
}



/*フォローボタン*/
aside.hdvpLU > section > div:nth-child(2) {
    width: 150px !important;
    display: none !important;
    /*フォローボタンは位置関係の整列が困難なため先送り
        トの字型配列はflexでは無理? */
}



/*色変え*/
/*.EG8MDwA,キャプ子*/
ul._1LEXQ_3/*タグ子*/
{
    background-color: #ede6e6;
}

/*ここまで*/

/*キャプション内*/
/*キャプション親*/
#root >  div:nth-of-type(2) >  div:nth-of-type(2) >  div:nth-of-type(1) > div:nth-of-type(1) > main > section >  div:nth-of-type(1) > div:nth-of-type(1)> figcaption > div:last-child > div:nth-child(1) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width :100% !important;
    
}

/*日付*/
#root >  div:nth-of-type(2) >  div:nth-of-type(2) >  div:nth-of-type(1) > div:nth-of-type(1) > main > section >  div:nth-of-type(1) > div:nth-of-type(1)> figcaption > div:last-child > div:nth-child(1) > div:nth-child(6) {
    order: 1 !important;
}

/*評価*/
#root >  div:nth-of-type(2) >  div:nth-of-type(2) >  div:nth-of-type(1) > div:nth-of-type(1) > main > section >  div:nth-of-type(1) > div:nth-of-type(1)> figcaption > div:last-child > div:nth-child(1) > ul {
    order: 2 !important;
    ;
}

/*タイトル*/
#root >  div:nth-of-type(2) >  div:nth-of-type(2) >  div:nth-of-type(1) > div:nth-of-type(1) > main > section >  div:nth-of-type(1) > div:nth-of-type(1)> figcaption > div:last-child > div:nth-child(1) > h1 {
    order: 3 !important;
}

/*キャプション*/
#root >  div:nth-of-type(2) >  div:nth-of-type(2) >  div:nth-of-type(1) > div:nth-of-type(1) > main > section >  div:nth-of-type(1) > div:nth-of-type(1)> figcaption > div:last-child > div:nth-child(1) > div:nth-child(4) {
    order: 4;
}
/* キャプション文章横幅 */
#expandable-paragraph-0 {
    width:100%;
}

/*タグ*/
#root >  div:nth-of-type(2) >  div:nth-of-type(2) >  div:nth-of-type(1) > div:nth-of-type(1) > main > section >  div:nth-of-type(1) > div:nth-of-type(1)> figcaption > div:last-child > div:nth-child(1) > footer {
    order: 5;
        background-color: #ede6e6;
}

/*ここまで*/




/*関連作品*/
/*.bAzGJI > aside:nth-child(4) {*/
div#root > div:nth-child(2) > div:first-child > aside:nth-child(4) {
    display: none !important;
}

/*FANbox 広告*/
aside > section:nth-child(3), aside > section:nth-of-type(3),
aside > section:nth-child(3), aside > section:nth-of-type(4),
aside > section:nth-child(3), aside > section:nth-of-type(5),
aside > section:nth-child(3), aside > div:nth-of-type(1)
{
    display:none !important;
   /* width:20% !important;
    height:10% !important;*/
}



/*参考:http://moyaci.tumblr.com/post/174630056048*/
/*http://pixadversaria.web.fc2.com/change/work-ui.htm*/
  • タイトルやキャプションが空白(存在しない)と序列が入れ替わるため、レイアウトが狂うこともある

  • Pixivのサービスや何らかの挿入で狂うこともある。

この記事が気に入ったらサポートをしてみませんか?