マニュアル
https://ordinary-fits.com/bup/backup202608/official/explanation/
確認URL
https://ordinary-fits.com/bup/backup202608/official
https://ordinary-fits.com/bup/backup202608/official/journal/
https://ordinary-fits.com/bup/backup202608/official/journal/test/

1. フッターのメニューを変更
「Home」を削除して「journal」を追加

2. 右上のハンバーガーボタンをクリックで表示されるコンテンツの2箇所を変更
2-1. メニューに「journal」を追加
2-2. Informationの下に「journal」を追加。※記事数を5件から3件に変更

3. トップページのストッキストの欄をjournalに変更。
※スライド部分


4. カテゴリーページの作成
4-1.「JOURNAL」の下にカテゴリー名を表示
※JOURNALの題名の位置は他のページと同じ位置。Contact、COLLECTION・LOOKBOOKなどと。
その下にカテゴリー名を表示


4-2. 一覧の画像の下のカテゴリー名を親カテゴリーによって変更(日付の横)
例)CATEGORYの一覧を表示している場合は、エディター名を表示


5. スマホなどでの表示
5-1. スマホでは10件表示にしています(指示どおり)


5-2. 関連する記事のところはスマホでは3件表示ではなく、2件にしています。
viewmoreもあるので、減らしても大丈夫だと思ったのと、3件だとバランス悪かったのでそうしています
5-3. カテゴリー名などのところも日付の後の「|」の記号をなくして、改行して表示に変更。カテゴリー名が長いと日付|の後に勝手に改行されるので、そうしていいます


5-4. 投稿補助「画像2枚+キャプション」のスマートフォン表示について
画像2枚+キャプション」を使用した場合、PCでは左右それぞれの画像の下にキャプションを表示します。



スマートフォンでは、2枚の画像は横並びのまま表示し、キャプションは100%幅で表示する仕様にしています。
左画像のキャプションは画像の上、右画像のキャプションは画像の下に表示されます。
これは、スマートフォンで画像と同じ半分の幅にキャプションを収めると、文章が細かく改行されて読みにくくなるためです。
特にJournalは文章を読むことが中心のコンテンツなので、キャプションについては読みやすさを優先し、100%幅で表示しています。
一方、画像についてはスマートフォンでも2枚を横並びにしています。
画像まで1枚ずつ100%幅にすると、画像が大きくなりすぎてページ全体のスクロール量も増えるためです。
以前はスマートフォンでは何でも1列・100%幅にするレイアウトも多く見られましたが、現在は画像の内容やページ全体のバランスに応じて、必ずしもすべてを100%幅にしない設計も一般的です。スマートフォンでも画像を拡大して確認できるため、このページでは画像の見やすさとスクロール量のバランスを考えて2枚横並びにしています。
また、PCでは画像の下にある左側のキャプションを、スマートフォンでは画像より上に移動して表示しています。
通常のレスポンシブ対応では、上から並んでいる要素をその順番のまま1列にするのが基本で、下にある要素をスマートフォンだけ上へ移動することは、そのままではできません。
今回はそのために表示順を組み替えられる構造にして、スマートフォンだけキャプションを画像の上へ移動しています。
単純に1列へ変更するより手間のかかる調整ですが、Journalはテキストを読むコンテンツでもあるため、レイアウトの単純さよりも読みやすさを優先しています。
なお、キャプションは本来それほど長い文章を想定していませんが、デモではレイアウト確認のため、意図的にかなり長い文章を入力して表示バランスを確認しています。実際の運用では、必要な内容を簡潔に入力してください。
6. Journal記事が少ない場合の表示について

最初記事が一つなので、開いたときに残念な感じが個人的にはするのですが、1つしかない場合は、直接記事を表示、2件の場合は2列で表示、3件以上で今の形の3列にした方がよいでしょうか?
作業的には1時間もかからずできますので、その場合は言ってください。
_
僕個人としては「EDIT & TEXT」で記事を分ける必要性については少し迷う部分もありました。
複数の書き手が参加する集合型のブログや、書き手自身に強い関心がある媒体であれば、「この人が書いた記事をもっと読みたい」という導線は有効だと思います。
一方で、今回のJournalは「ORDINARY FITS」に関連する記事が中心になるため、書き手ごとの分類がどこまで必要になるかは、少し考える部分もありました。当初いただいたPDFでは一覧にも書き手の名前を表示する構成になっていましたが、その表示自体はなくなりました。ただ、「エディター」ごとに記事を分けて見られるようにすることは今後も必要とのことでしたので、ご指示通り、今回はカテゴリーから書き手ごとの記事を見られる仕様にしています。
正直なところ、今回のJournalで「その記事を書いた人ごとに分けて見る」という使い方は、僕自身あまりイメージできていません。
よほど書き手自体に知名度やファンがいる場合であれば分かるのですが、「ORDINARY FITS」に関連する記事が中心ということを考えると、実際にどこまで使われるのかは少し疑問に感じています。
ただ、最終的には、そこまで強く反対するほどのものでもないと思ったので、今回はご希望に沿って作成しています。(関連記事についても、必要ないかもですがつけてます)
今後サイトを変更していく際には、できれば見た目だけでなく、それぞれの表示や構成をどういう意図で作っているのかという部分も含めて考えていただけると助かります。もちろん、僕の意図とは違う使い方や考え方もあると思いますし、僕の考えが必ずしも正解というわけではありません。
できれば変更する前に一度ご確認いただけると、お互いの意図を共有した上で、よりよいものを作っていけるのではないかと思います。