ユーザースタイルシートを使って、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は以下の通りです。コピペしてお使いください。
変更箇所は以下の通りです。
・タイトル・タグ・キャプション・シリーズなどを上に表示した
・タグに背景色をつけた
・キャプションの幅を広くた
・シリーズ表記をボタンにした
・複数枚投稿の作品は、 ページ数の表示を大きくした
・キャプションの「続きを読む」を常に開いておくようにした
・イラストのサイズが小さいときの上下の余白を消した
・イラストのサイズが大きいとき角が丸くなるのを解除した
・関連作品を非表示にした
実際に使ってみるとレイアウトは下のようになります。
(なお、下で使っているイラストは説明用に私が投稿したものです)
私の好みに合わせて色々いじってしまったので、不要な部分はcssから削ってお使いください。
投稿日時などを上部に表示する
投稿日時や閲覧数などをタイトルの上に表示するcssはこちらです。
上のcssのあとに続けてお使いください。
実際に使ってみると下の画像のようになります。「いいね!」などは文字表記も足しました。
投稿日時のみを上部に表示する(いいね数やブクマ数などは下に置いたまま)のcssはこちら。
実際に使ってみると下の画像のようになります。
画像には写っていませんが、こちらは「いいね!」とかの文字表記はありません。
- 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を追加しました。