pixivの新しい作品画面でキャプション等を作品の上に表示する - 地雷持ちが快適にpixivを楽しむための備忘録。

ユーザースタイルシートを使って、pixivの新しい作品画面のデザインを変更する

2018/06/12
2018/12/16

pixivが対象ユーザーを順次拡大していくとアナウンスしていた新しい作品画面ですが、先日管理人のアカウントにも適用されました。新しい作品画面は、ページを開くとまず作品がドーンと表示されて、タイトル・キャプション・タグなどの作品情報はその下に配置されています。
pixiv公式からのお知らせはこちらになります→[pixiv] お知らせ - 作品画面のデザインが新しくなります

作品を見るより先に情報を確認できないのは不便なので、ユーザースタイルシートでキャプションなどを作品の上に表示されるようにしてみました。
ユーザースタイルシートの設定方法に関しては、【Chrome拡張およびFirefoxアドオン「Stylus」の使い方】をご覧ください。

※このページで紹介しているcssを作品画面以外で使うと、レイアウトが崩れることがあります。
Stylusをお使いの際は、適用先を「次で始まるURL」にして「https://www.pixiv.net/member_illust.php?mode」を指定してください。

設定方法

cssは以下の通りです。コピペしてお使いください。

/* タイトル・タグ・キャプションなどを上に表示する */
figure{
display: flex !important;
flex-direction: column-reverse !important;
}
figure > div{
position: relative !important;
margin: 0 !important;
}
figure > div > div > a:nth-child(2), button.sc-ijnzTp{
display: none !important;
}
figcaption h1{
margin: 0 !important;
padding: 0 0 20px !important;
}
figcaption > div{
margin-top: 0 !important;
}
figcaption > div:first-child{
margin-top: 40px !important;
}
figcaption > div:last-child{
margin-bottom: 0 !important;
}

/* タグに背景色を付ける */
figcaption footer{
background-color: #F2F4F6 !important;
padding: 10px !important;
margin:25px 0 0 !important;
}

/* キャプションの幅を広くする */
figcaption > div:last-child > div{
width: 700px !important;
}

/* シリーズ表記をボタンにする */
figcaption > div:first-child{
max-width: 700px !important;
}
figcaption > div{
flex-flow: row nowrap !important;
}
figcaption > div:first-child div > a{
height: 1.2rem !important;
overflow: hidden !important;
flex:initial !important;
}
figcaption > div:first-child div:nth-child(2){
flex-direction: row-reverse;
}
figcaption > div:first-child div > a[title]{
width: 139px !important;
text-overflow: ellipsis;
}

/* ページ数の表示を大きくする */
figure > div:first-child div{
font-size: 15px !important;
letter-spacing: 0.3em !important;
}

/* 続きを読むを無効化 */
#expandable-paragraph-0{max-height: initial !important;}
div._4A2uxPW{display: none !important;}

/* イラスト領域の高さ指定と角丸の解除 */
figure > div div {
min-height: initial !important;
border-radius:0 !important;
}

/* 関連作品を非表示にする */
#root > div > div > aside:last-child{display: none !important;}

変更箇所は以下の通りです。
・タイトル・タグ・キャプション・シリーズなどを上に表示した
・タグに背景色をつけた
・キャプションの幅を広くた
・シリーズ表記をボタンにした
・複数枚投稿の作品は、ページ数の表示を大きくした
・キャプションの「続きを読む」を常に開いておくようにした
・イラストのサイズが小さいときの上下の余白を消した
・イラストのサイズが大きいとき角が丸くなるのを解除した
・関連作品を非表示にした

実際に使ってみるとレイアウトは下のようになります。
（なお、下で使っているイラストは説明用に私が投稿したものです）

私の好みに合わせて色々いじってしまったので、不要な部分はcssから削ってお使いください。

投稿日時などを上部に表示する

投稿日時や閲覧数などをタイトルの上に表示するcssはこちらです。
上のcssのあとに続けてお使いください。

/* 投稿日時・いいね！・ブックマーク・閲覧数を上部に表示する */
div[title="投稿日時"]{
position: absolute !important;
right:10px !important;
top:10px !important;
}
div[title="投稿日時"]:before{content:"｜";}
div.e1k4bvmn0{margin: 40px 0 0 !important;}
article{position: relative !important;}
figcaption footer + ul{
position: absolute !important;
right:140px !important;
top:10px !important;
margin: 0 !important;
}
dd[title="いいね！"]:before{content:"いいね！";}
dd[title="ブックマーク"]:before{content:"ブックマーク ";}
dd[title="閲覧数"]:before{content:"閲覧数 ";}

実際に使ってみると下の画像のようになります。「いいね！」などは文字表記も足しました。

投稿日時のみを上部に表示する（いいね数やブクマ数などは下に置いたまま）のcssはこちら。

/* 投稿日時のみ上部に表示 */
article{position: relative !important;}
div[title="投稿日時"]{
position: absolute !important;
right:10px !important;
top:10px !important;
}

実際に使ってみると下の画像のようになります。

画像には写っていませんが、こちらは「いいね！」とかの文字表記はありません。

＜Sponsored Links＞

2018/12/16
pixivの仕様変更に伴い、cssを修正しました。
2018/11/14
pixivの仕様変更に伴い、cssを修正しました。
2018/11/13
pixivの仕様変更に伴い、cssを修正しました。
2018/08/08
pixivの仕様変更に伴い、cssを修正しました。
2018/07/02
pixivの仕様変更に伴い、関連作品非表示のcssを修正しました。
2018/06/23
投稿日時と閲覧数を上部に表示するcssですが、「ベースになった作品」（以前のイメージレスポンス）まで上部に表示されるという不具合があったので、cssを修正しました。また、「続きを読む」を無効化するcssを、クラス名を使わないものに修正しました。
2018/06/18
投稿日時や閲覧数などを上部に表示するcssを追加しました。

▲　ページの先頭に戻る　▲

対応ブラウザ

サイト内検索