1. Journalの記事を新規作成する
記事作成画面では、まず以下を入力します。
タイトル
記事のタイトルを入力します。
サブタイトル
未入力の場合は表示されません。
追加クレジット
カテゴリーで設定する「EDIT & TEXT」「PHOTOGRAPH」以外に、スタイリスト、モデル、ヘアメイクなど追加で記載したいクレジットがある場合に入力します。
入力した内容は記事内のクレジットとして表示されます。
カテゴリー
Journalではカテゴリーを、
「CATEGORY」
「EDIT & TEXT」
「PHOTOGRAPH」
の3つに分けて管理しています。
例えば記事の種類が「STORY」、編集・テキスト担当が「kodama」の場合は、それぞれ該当するカテゴリーにチェックを入れます。
「CATEGORY」「EDIT & TEXT」「PHOTOGRAPH」は親カテゴリーとして使用します。
記事作成時は、基本的にその下に登録されている項目を選択してください。
新しく項目を追加する場合は、管理画面の「ジャーナル」→「カテゴリー」を開きます。
「名前」に追加したい名称を入力し、「親カテゴリー」で以下のいずれかを選択します。
記事の種類を追加する場合 → 「CATEGORY」
編集・テキスト担当者を追加する場合 → 「EDIT & TEXT」
撮影担当者を追加する場合 → 「PHOTOGRAPH」
注意事項
・Journalページ下部の一覧にも表示したい場合は「Journal一覧に表示」にチェックを入れます。
・表示順を指定する場合は「表示順」に数字を入力し、数字が小さいものから順に表示されます。
・元からある3つの名前は変更してもよいですが、スラッグは変更しないでください。表示されなくなりますので
2. 投稿補助を使って本文用のレイアウトを作る
画像を2枚横に並べたい場合や、画像とテキストを組み合わせて表示したい場合などは「投稿補助」を使用します。
Journalの記事編集画面はそのまま開いておき、別のタブまたは別ウィンドウで、WordPress管理画面の「投稿補助」→「投稿を追加」を開きます。
投稿補助では、以下のレイアウトを作成できます。
「画像2枚＋キャプション」- 左右に2枚の画像を並べて表示します。
左画像・右画像それぞれにキャプションを設定できます。
また、2枚の画像全体に対する共通キャプションも入力できます。
「画像＋テキスト」
画像と文章を左右に並べて表示します。
「左画像＋右テキスト」「左テキスト＋右画像」のどちらの配置でも作成できます。
画像にはキャプションを追加することもできます。
「画像1枚（左右60%配置）」
画像1枚を記事幅より少し小さく表示します。
「左」「右」から配置を選択できます。
キャプションを入力することもできます。
・使用したいレイアウトの項目だけ入力してください。
・使用しない項目は空欄のままで問題ありません。
・テキストやキャプションの入力欄には、通常の文章を入力してください。HTMLタグを入力する必要はありません。
・入力欄で改行した箇所は、表示時にも改行されます。
投稿補助を保存する
必要な画像や文章を入力したら、右側の「公開」または「更新」を押して保存します。
保存すると、画面上部に「貼り付け用HTML」が自動で作成されます。
「コピー」ボタンを押すと、作成されたHTMLをまとめてコピーできます。
このHTMLは直接編集せず、そのままJournalの記事本文へ貼り付けてください。
Journalの記事へ貼り付ける
投稿補助の画面は閉じずに、先ほど開いておいたJournalの記事編集画面へ戻ります。
本文内のレイアウトを表示したい位置に、投稿補助でコピーしたHTMLをそのまま貼り付けます。
1つの記事内で複数のレイアウトを使用する場合は、
「投稿補助で作成 → コピー → Journal本文へ貼り付け」
を必要な回数繰り返してください。
また、投稿補助で作成した内容をあとから変更した場合は、すでにJournal本文へ貼り付けたHTMLには自動では反映されません。
変更した場合は、もう一度「貼り付け用HTML」をコピーして、Journal本文の該当箇所を貼り替えてください。
3. アイキャッチ画像について
アイキャッチ画像は、Journalの一覧ページや関連記事などで使用する画像です。
一覧ページの画像は、スマートフォンで見た際のバランスを考えて正方形で統一しています。画像の比率が揃うことで、記事ごとの高さや余白にばらつきが出にくく、一覧として見やすくなります。
そのため、アイキャッチ画像には、正方形に切り取られても問題のない写真を設定してください。
メイン画像について
記事詳細ページの最初に大きく表示する画像は、ACFの「メイン画像設定」から設定します。
ここでは、メイン画像として使用する画像と、PCでの表示高さを設定できます。記事や写真に合わせて、実際の表示を確認しながら調整してください。
メイン画像を個別に設定していない場合は、アイキャッチ画像が使用されます。
スマートフォン用画像について
スマートフォンでは、PCとは別の画像を設定することができます。また、画像の表示高さもスマートフォン用として個別に設定できます。
スマートフォンは画面幅が狭いため、専用の画像を設定した場合は、元の画像の構図を活かしたまま表示しやすく、画像そのものを一番きれいに見せることができます。
そのため、PCとスマートフォンで構図を変えたい場合や、PC用画像をそのまま使用すると見せたい部分が切れてしまう場合は、スマートフォン用画像を別途設定してください。
もしPCで設定した画像をそのままスマートフォンでも使用する場合は、スマートフォン側の画像を設定しなければ、PC用のメイン画像がそのまま使用されます。
その場合でも、スマートフォン側で表示高さを個別に設定できますので、実際の表示を確認しながら調整してください。
画像の使い分け
アイキャッチ画像
Journal一覧ページや関連記事などで使用します。基本的に正方形で表示されます。
メイン画像
記事詳細ページの最初に大きく表示する画像です。PCでの表示高さも設定できます。
スマートフォン用画像
スマートフォンだけ別の画像を使用したい場合に設定します。スマートフォン用の表示高さも個別に設定できます。
高さはPCの画像をそのまま利用する場合は画像は設定せずに高さを「画像全体」を選択すると割と綺麗になります
基本的には、「一覧でどのように見せるか」と「記事を開いたときにどのように見せるか」を分けて考えて画像を設定してください。
4. 投稿補助のプレビューと便利な使い方
投稿補助で作成したレイアウトは、Journalの記事本文へ貼り付ける前に「プレビュー」から表示を確認することができます。
画像の大きさや配置、テキスト、キャプションなどが意図した表示になっているか確認してから、「貼り付け用HTML」をコピーしてJournal本文へ貼り付けると安心です。
また、投稿補助では複数のレイアウトを一度に入力することもできますが、「画像2枚＋キャプション」「画像＋テキスト」「画像1枚」など、必要なレイアウトを1項目ずつ作成してJournal本文へ追加していく方法がおすすめです。
1項目ずつ作成すると、
「投稿補助でレイアウトを作成」
↓
「プレビューで確認」
↓
「HTMLをコピー」
↓
「Journal本文の入れたい位置へ貼り付け」
という流れで作業できるため、記事内のどの位置にどのレイアウトを入れたのか分かりやすくなります。
修正する場合も、該当する部分だけを作り直して貼り替えやすくなります。
投稿補助の記事は、一度作成したものを残しておけば再度開いて確認することもできます。
4. テキストの2段組みの作成方法
Journal本文で文章を左右2列に表示したい場合は、本文編集欄の「2段組」ボタンを使用します。
2段組を入れたい位置にカーソルを置いてボタンをクリックすると、左右2列用のHTMLが挿入されます。挿入された左側・右側の文章部分を書き換えて使用してください。
PCでは2列、スマートフォンでは1列で表示されます。
左側の文章に縦線を付けたい場合は、対象の文章を選択して「左線テキスト」ボタンを使用します。
作成の流れ
「2段組」ボタンをクリック
↓
挿入された左側・右側の文章を書き換える
↓
必要に応じて「左線テキスト」などの装飾ボタンを使用
↓
プレビューで表示を確認
注意事項
2段組のHTMLタグ自体は削除せず、文章部分だけを書き換えてください。
左右どちらかの文章が不要な場合でも、レイアウトが崩れることがあるため、基本的には挿入された構造をそのまま使用してください。
5. 他のボタンについて
・mt20~mt100のボタンなどで改行（数字の部分は10ずつで200まで変更可能）
・文字グレーや横線見出し、左線テキストなどの使用方法
本文編集欄の「横線見出し」「左線テキスト」などのボタンは、装飾したい文章を選択してから使用します。
対象の文章をドラッグして選択し、使用したいボタンをクリックすると、その文章を囲む形でHTMLタグが挿入されます。
「横線見出し」
選択した文章を横線付きの見出しとして表示します。
「左線テキスト」
選択した文章の左側に縦線を付けて表示します。
すでに入力してある文章に使用する場合は、必ず装飾したい部分だけを選択してからボタンを押してください。