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のサービスや何らかの挿入で狂うこともある。