2018年10月
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

スポンサード リンク


無料ブログはココログ

« 2017年12月 | トップページ | 2018年6月 »

2018年5月

2018年5月31日 (木)

キャプションは重要なんですよ

お久しぶりです。管理人は生きてます。最近めっちゃ放置してて申し訳ありません……!
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;}

こんな感じで表示されます↓
Sc0071

« 2017年12月 | トップページ | 2018年6月 »