TOPICSトピックス

 小暮さん、お待たせしました。ようやくデザインのターンになりました。一新する勢いで改修したいと思っています。
とにかく自由度がないというか、入稿画面で作成しても思い通りに表示できず、かなりストレスフルな状態に陥っています。
WPのエディター画面の仕様かもしれませんが改善できたらと思っています。よろしくお願いします。

記事タイトルと周辺

※10/12のミーティングを経て
・修正いただいたタイトルのデザインは、フォントを大きくしてスマホで見た時に文章中の見出し3より大きく表示されるように修正。
・SNSボタンは、武藤さんがご対応いただいたページの右上に移動して、ページの下のボタンは削除。
・メールで送るのボタンをツイートボタンの左側に追加。✉メール　な感じで表示。色は白黒。
・パンくずは不要。日付の左側のカテゴリ名をクリッカブルにする。

コーポレートのカラーはオレンジですが、帯と白抜きの文字は見えづらいので、単純に背景白で黒色タイトルのほうがいいのかなと思っております。他の見せ方も含めていい方法はありますでしょうか。
日付の右のカテゴリ名「その他」の部分はクリッカブルにして、カテゴリの記事一覧ページに飛ばしたいです。
SNSボタンは、現在記事の一番下にありますが、画像にあるような位置、もしくはタイトルの上のカテゴリ名の左側に、プラグインを使わずに置きたいです。TwitterとFacebookに加えて、メールで送る、LinkedInも追加したいです。
そもそも論としては、パンくずもないので、このエリアの見せ方自体をシャッフルしたほうが良さそうでしょうか。例えば、タイトルを一番上に持ってきて、日付やSNSボタンはタイトルの右下あたりに配置するとか。

写真や画像について

※10/12のミーティングを経て
・画像サイズは1280x720（フルHD）を標準にする。グラフはjpgよりPNGで。
・入稿した画像をダブルクリックして、編集画面からキャプションを入れる。
　写真のサイズも確認する。配置はテキストタブからタグを入れて制御。
・写真や図をクリックしたときに別枠で大きく見せる方法は引き続き調査
　→WPの設定でやるか、プラグインを使うか。

・画像サイズとにじみ
以前、メールでご相談させていただいた、画像サイズによって画像がにじんでしまう件、なんとかしたいと思っています。いま見ると、以下の本番環境（修正前）のページの画像はにじんでいないくて、OSのバージョンを6にしたせいでしょうか。
https://ksi-corp.jp/topics/survey/web-research-31.html　修正前（左）
http://sample.littlelab-corp.com/column/other/web-research-31/　　修正後（右）

画像のサイズは、少なくとも横1024pxにしたほうが良さそうですかね。

横幅 360px

横幅 640px

横幅 1024px

・掲載する画像
起きている現象
・横幅360pxの画像でもフルサイズで表示されてしまう（なので、ぼやける）
・なので画像の左寄せなどを指定しても反映されない（ビジュアルのタブで指定しても）
・写真のキャプションは入稿画面では写真のすぐ下に入れていますが、プレビューすると離れてしまう
実現したいこと
・ページは引き続き1カラム構成にしたいが、小さな写真や図を掲載するときは、横に本文を表示させたい（テーブルで処理？）
・写真のキャプションをすぐ下に表示させたい
・写真（図）をクリックすると大きな写真（図）を表示させたい

画像をダブルクリックしてキャプションを入れると画像が指定のサイズで表示され、写真の下にキャプションが表示される。
センタリングしない件は、別ページを立てます。

こんな感じで素直に表示させたいです。

画像省略。

ビジュアルタブの入稿画面はこんな感じでぐしゃぐしゃになってしまいます。
テキストタブの入稿画面で、タグを打ったり修正したほうが良さそうですかね。

→WPの仕様なので、タグを見て修正

・本文の横幅
タイトルの横幅と同じ幅で本文が表示されるので見づらい。

→現状のままで

・テーブルタグ
タグを直接打たないとセンタリングができない。
↑「・テーブルタグ」の部分だけ見出し指定にしたが、下の文章まで見出しとして反映される。「タグ」の文章だけ段落指定にすると「・テーブルタグ」の部分も見出し指定が外れて段落指定になる。（要は連動してしまっている）

→テキストタブからソースを見て修正

・本文中の中タイトル
タイトルの前に画像を追加するなどを変化を出したい。
文春の記事みたいに→ https://bunshun.jp/articles/-/57694

→小暮さんのほうで一案を作成。プルダウンから見出しを選択すると自動的に反映されるようにする。


・目次のテンプレートの作成
アンカータグがうまく作れなかった。。
→以下のようなイメージを考えています。

https://www.watch.impress.co.jp/docs/review/review/1442309.html

https://help.sakura.ad.jp/domain/2302/

・グラフの見せ方
http://sample.littlelab-corp.com/column/other/web-research-31/graph.html
調査の記事はこんな感じで見せたいです。

→プログラムで見せると結構手間がかかりますでしょうか。
円グラフと棒グラフ、折れ線グラフになります。
以下のページのグラフになります。
https://dev.ksi-corp.jp/topics/survey/web-research-41.html

→以下はslackか次回あらためて相談させてください。
・リンクの表示のさせ方
リンク部分に下線を引くか色を変えないと、リンクだということが現状わからない。
良さげな見せ方ありそうでしょうか。

・ページネーション
「前の記事」「次の記事」へのリンク表示がそもそもないので追加したい。

・関連（おすすめ）記事の表示
記事の最後に関連する、もしくはおすすめの記事を入れたい。

・タグの導入
ニュースとトピックスの記事が横串で表示できるようにしたい。

・年月のアーカイブページ
記事が増えてきたのでそろそろ作りたい。
ニュースとトピックス別で？