キャプションは重要なんですよ
お久しぶりです。管理人は生きてます。最近めっちゃ放置してて申し訳ありません……!
pixivさんが順次対象ユーザーを拡大していくとアナウンスしていた新しい作品画面、ついに私のアカウントにも適応されてしまいまして。
感想としては、キャプションとタグ下に置くとかバカなの?って感じでした。いや、最初にアナウンスされたときからバカなの?って思ってたけど。実物見たらマジでバカなの????って感じだった。
今までなら、作品を開いてパッとタグが目に入ったので、そこで苦手な要素があれば即ブラバできましたが、新しいのだといちいちスクロールしなければならない。キャプションに「〇〇な要素があります」って書いてくれる投稿者さんも多いですが、その配慮を運営が無視している。タグがついていればマイナス検索で避けられますが、キャプションの注意書きは作品画面開かないと読めないんですよ。自分のサイトなのに運営は知らないのか。
別に地雷避けとかじゃなくても、キャプションとタグってその作品の説明じゃん。「〇〇が□□する話です」って書いてあるキャプションを、その話を閲覧したあとで読むことに何の意味があるのでしょう。本当にバカじゃないの?????
(もちろん、上記をオブラートに包んだフィードバックを送りましたが、おそらく無視されるでしょうね……)
ってことで、とりあえずスタイルシートでキャプションを作品の上に表示することにしました。
とりあえずのcssなので表示確認はGoogleChromeでしかしてないです、ごめんなさい。
figure{
display: flex !important;
flex-direction: column-reverse !important;
}
figcaption{padding: 20px 0 0 !important;}
figcaption h1{padding: 0 0 10px !important;}
figcaption > footer{
background-color: #F2F4F6 !important;
padding:10px !important;
}
figcaption div:first-child > div{width:568px !important}
figcaption div:first-child ul li{
display:inline-block !important;
max-width:33% !important;
overflow:hidden !important;
white-space:nowrap !important;
}
タグの背景色も以前のデザインと同じ色にして分かりやすく。
シリーズは横並びにして場所とらないようにしけど、タイトルが長いと全文表示されなくなってます。
追記:無駄にシリーズ表記をシンプルボタンっぽくしてみた版はこちら。
figure{
display: flex !important;
flex-direction: column-reverse !important;
}
figcaption{padding: 20px 0 0 !important;}
figcaption h1{padding: 0 0 10px !important;}
figcaption > footer{
background-color: #F2F4F6 !important;
padding:10px !important;
}
/* シリーズ表記ここから */
figcaption div:first-child ul li{
display:inline-block;
margin-right:3px;
white-space:nowrap;
overflow:hidden;
}
figcaption div:first-child ul li:first-child a:before, figcaption div:first-child ul li:first-child div:before{
content:"<<";
font-size: 15px;
padding: 0 10px 0 0;
}
figcaption div:first-child ul li:nth-child(2) a:before {
content:">>";
font-size: 15px;
padding: 0 10px 0 0;
}
figcaption div:first-child ul li:first-child, figcaption div:first-child ul li:nth-child(2){width:39px;}
figcaption div:first-child ul{display: flex;}
figcaption div:first-child ul li:nth-child(2){order:1;}
こんな感じで表示されます↓
最近のコメント