この記事で解決出来る課題は、
- デザイン・レイアウトが整っているウェブ記事を簡単につくる
- 画像をクリックしてポップアップ表示させる
- htmlコードを触らずにページを制作
記事公開前の設定とトップページのリストへ追加
記事の制作を終えたら、記事公開前の設定を行います。
記事公開前の設定には、サムネイル画像の設定を始め、カテゴリー、タグ、indexなどがあります。
公開前の設定を終えて、記事を公開出来たら次はトップページのリストに公開した記事を追加します。
トップページのリストに公開した記事を追加するためには、トップページの編集を行う必要がありますが、既にトップページもレイアウト・デザインが整っているため、既存の項目を差替え及び追加で済みます。
1Remove external image
新しいサムネイル画像を設定しますので、既に設定されているサムネイル画像を〝Remove external image〟をクリックして消去しておきます。
2サムネイル用の画像URLをコピー
記事内からサムネイル画像に使う画像のURLをコピーします。
サムネイルに使う画像はページ内で一番最初に表示されている画像を選択します。別にサムネイル画像を用意している場合はその画像のURLをコピーします。
3画像URLの貼り付け→Preview
〝Featured Image〟の項目にサムネイル画像のURLを貼り付けて、〝Preview〟を選択します。
4サムネイルのプレビュー表示
サムネイルのプレビューが表示されました。
5カテゴリー設定
〝カテゴリー〟の設定を行います。
新着物件でマンションの場合は、〝新着物件〟と〝マンションリノベーション〟の両方を選択します。
6タグ設定
〝タグ〟の設定を行います。
〝タグ〟は管理しやすいように予め決めておきます。
7index,follow
記事の制作開始時にindexの設定を〝noindex,nofollow〟に設定していると思いますので、こちらを〝index,follow〟に変更します。
8公開
設定が終わったらいよいよ公開します。
記事の公開は、サイドバーの〝公開〟を選択で公開になります。なお、記事制作中に誤って公開してしまっている場合はこちらが〝更新〟になっていますので、〝更新〟します。
9投稿を表示
記事を公開したら、〝投稿を表示〟を右クリックして、〝新しいタブで開く〟を選択します。
10ページ確認
実際のページ（サイトの訪問者から見えている記事ページ）を確認します。
実際のページに問題がなければ、トップページのリストに公開した記事を追加する設定に進みます。
11テーマの管理
トップページは使っているテーマによって様々な位置にあります。
今回は、テーマ管理からトップページに入ります。
13トップページの編集画面
トップページの編集画面が開きます。
14全選択
トップページの内容を全選択して、コピーします。
15編集アプリで編集
テキストエディタなどの編集アプリを開いて、トップページの内容を貼り付けます。
コンテンツの編集には、WordPress内で直接、編集するやり方とテキストエディタなどの編集アプリを用いて行うやり方があります。今回は、テキストエディタを使ったやり方をご案内します。
16新着物件
今回制作した記事は、新着物件記事になりますので、トップページ内の〝新着物件〟の項目を探します。
制作する記事の種類によって、他の項目に該当する場合があります。
17カラムの修正
現在、トップページ内の新着物件の項目は〝2カラム〟になっているため、新たに制作した新着物件の記事を追加するためには、カラムを増やす必要があります。
ちなみに、〝カラム〟とは、表でいうところの〝列〟のことです。
182カラムから3カラムへ
2カラムを〝3カラム〟に変更します。
ここでは、〝responbox50〟と書かれているクラス名を〝responbox33〟に変更します。
19タグの修正
〝rbox〟を〝lbox〟に変更します。
20ブロックをコピー・ペースト
<div class="lbox">のタグで括られているブロックをコピーします。
記事を追加する場所にコピーしたブロックをペースト（貼り付け）します。
新しくブロックを追加したら、制作した記事の内容にブロックを編集していきます。
21ステージングサイトで検証
正しく3カラムで追加したブロックが表示されているか？編集した内容は問題無く反映されているか？を〝ステージングサイト〟で検証します。
〝ステージングサイト〟というのは、下書き用のサイトのことで、ページの表示が正確かどうか？レイアウトやデザインの検証のために利用されます。
編集途中のトップページを全選択、コピーしてステージングサイトを開き、同様にトップページの項目を開いてペースト（貼り付け）、保存します。
22ページ表示で確認
ステージングサイトのトップページを開いて、実際の表示を確認します。
23公開中の本番サイトへ反映
ページの表示に問題が無ければ、現在公開中の本番サイトのトップページの項目に貼り付けて、〝保存〟をクリックします。
なお、念のためにトップページの内容はテキストエディタにバックアップを取っておくことをお勧めします。
24ページとリンク確認
ページとリンクを確認します。
25リンク先ページの確認
トップページ内でのリンクの遷移を確認します。
26記事編集
ここからは、トップページの新着物件ではなく、トップページの〝取扱い物件〟に追加する手順をお伝えします。
例えば、新着物件記事として制作した記事を〝取扱い物件〟に移行する場合などです。〝記事一覧〟から該当の記事の〝編集〟を選択します。
27カテゴリー設定
カテゴリーの設定をします。
この時、〝新着物件〟になっていたら〝新着物件〟のカテゴリーのチェックを外して、〝取扱い物件〟のチェックをいれます。
29トップページの編集
トップページの編集を選択します。
30施工事例のブロック
今回は、〝施工事例〟のブロックで追加する箇所のブロックを編集していきます。
なお、今回もWordPress内のエディタではなく、テキストエディタなど編集アプリを使って行います。
31ブロックの編集
施工事例の中にある既存のブロックをコピーして、新しく追加する物件記事の内容に書き換えていきます。
32ブロックを追加
今回は、新しく制作した物件記事を施工事例の一番最初に表示させるので、施工事例の項目の一番最初にブロックを配置します。
33不要ブロックの削除
新しく物件記事のブロックを配置したので、不要なブロックを削除します。
35ステージングサイトで検証
ステージング（下書き）サイトのトップページの編集画面にペーストして、実際のページを表示させて見え方を確認します。
36公開中の本番サイトにペースト
ステージングサイトでの見え方に問題が無ければ、公開中の本番サイトのトップページの箇所にペーストして、編集を保存します。
37最終確認
公開中の本番サイトで実際の見え方を確認します。
