この記事で解決出来る課題は、
- 既にデザイン・レイアウトが組まれているウェブページから新しいウェブページを制作
- 画像をクリックしてポップアップ表示させる仕掛け
- htmlコードを触らずに新しいページを制作
既にデザイン・レイアウトが組まれているウェブページの編集
不動産のウェブページでは、物件の画像や物件の説明などを綺麗にレイアウト・デザインを組んでいるケースが少なくありません。
これは、ウェブページを綺麗に魅せるという点ではとても良いことですが、新しい物件を紹介するページのレイアウト・デザインをゼロから組み上げていくのは一苦労だし、htmlやcssに精通していない人だとそもそも組み上げることが難しくなります。
そんな時に時短の方法として、既にレイアウト・デザインを組んであるページを複製、編集して使うという方法があります。
ここでは、その手順を詳しく解説していきます。
1掲載順に画像の準備
掲載するサイズと色味を調整済みの画像を準備して、新たにウェブアルバムをつくり画像をアップロードしておきます。
プライベートブラウジングでウェブアルバムを開きます。
2ウェブアルバムから画像を単体で表示
ウェブアルバムから掲載順に〝タブ〟で全ての画像を開いておきます。
3記載するテキスト情報の準備
掲載するテキスト情報を用意しておきます。
テキストはコピーして貼り付けられるフォーマットで準備します。
4〝投稿〟から〝投稿一覧〟
WordPressにログインします。
〝投稿〟から〝投稿一覧〟を選択します。
5記事を〝複製〟
同じカテゴリーの記事を複製します。
〝同じカテゴリーの記事〟とは、記事のレイアウトが同じで、テキストと画像を差し替えるだけで新しい記事になるものです。
6記事が〝複製〟された
記事一覧から該当記事の〝複製〟を選択すると、記事が複製されます。
複製された記事は〝下書き〟として追加されます。
7クイック編集
〝クイック編集〟を選択します。
〝クイック編集〟とは、記事一覧画面で編集が出来る機能です。
8タイトル名を選択して消去
ここでは、〝タイトル名〟を変更しますので、既に記述されているタイトル名を選択して消去します。
9新しくタイトルを入力
新しくこれから制作する〝タイトル〟を入力します。
入力が終わったら、〝更新〟を選択して保存しておきます。
10編集を選択
記事の内容を編集しますので、〝編集〟を選択します。
11記事の編集画面
記事の編集画面が開きます。
記事の編集画面は必ず、〝テキストエディタ〟を選択してください。
最初に〝index変更〟で〝noindex,nofollow〟に設定しておきます。
このindex変更の設定は、間違えて記事を公開してしまった場合にGoogleの検索に上がって来ないようにしておく設定です。
12〝パンくずリスト〟の編集
最初にパンくずリストを編集します。〝パンくずリスト〟とは、ウェブサイトのトップページから該当のページまでを表すリストです。
注意点として、記事の内容を編集する時は、htmlタグを消したり、書き換えたりしないようにしてください。htmlタグに変更が加わると、ページの表示が崩れたり項目が消えたりします。
13タイトルの編集
この記事の場合では、記事のタイトルは2箇所ありますので、2箇所とも編集しておきます。
14編集箇所を選択して消去
記事内のテキストの編集手順でhtmlタグを消さないように編集するコツとしては、先にテキスト編集する箇所を選択して、消去します。
テキストを消去した時に、htmlタグが消えていないか？を確認します。
15テキストを入力
差し替えるテキストを入力します。
16掲載する画像を確認
画像の差し替え手順としては、掲載する画像が入ったウェブアルバムをプライベートブラウジングで開きます。
今回は最初に、掲載する全ての画像をタブで並べているので最初の画像を確認します。
17全画面で〝画像のリンクをコピー〟
画像を確認したら、ブラウザの画面を全画面にします。
全画面になったら、画像の上で右クリックして、〝画像のリンクをコピー〟を選択して、画像のリンク（画像URL）をコピーします。
18差し替える画像のURLを選択
画像のリンクをコピーしたら、記事内の画像を差替えていきます。
1枚目の画像を記事の編集画面の画像のリンク（画像URL）を貼り付けるタグの〝src="この部分に画像のリンク（画像URL）を貼り付けます"〟を探して貼り付けます。
19差し替える画像のURLを上書き
記事内の画像の差替えは、先に、ウェブアルバムから差し替える画像のリンク（画像URL）をコピーして、記事本文の該当箇所に設置してある画像のリンク（画像URL）を選択して消去後に上書きといった手順になります。
20下書き保存
記事内のテキストや画像を差し替えたら、〝下書き保存〟を選択して下書き保存しておきます。
〝下書き保存〟とは、記事を公開せずに、下書きの状態で保存することです。
21投稿をプレビュー
〝下書き保存〟したら、〝投稿をプレビュー〟をクリックしてプレビューを確認しておきます。
〝投稿をプレビュー〟というのは、下書き保存した内容を実際に公開した場合に、訪問者からはどのように見えるのか？を確認出来る機能です。
22プレビュー画面で確認
編集画面から移動して、実際の表示画面に移りますので、〝入力したテキストは反映されているか？〟〝差し替えた画像はちゃんと表示されているか？〟を確認します。
パソコン内の掲載用の画像フォルダと照らし合わせて、正しい画像が配置されているか？を確認します。
23次の画像
テキスト、画像が問題無く表示されていたら、次の画像の差し替えに進みます。
次の画像もプライベートブラウジングで最大画面で表示して、〝画像のリンクをコピー〟します。
24画像URLを上書き
差し替える画像のリンク（画像URL）を選択して上書きします。
25画像のURLが差し替わった
画像のリンク（画像URL）が差し替わったことを確認します。
26下書き保存
〝下書き保存〟はこまめにしておくことで、ネット接続が途切れた時など可能な限り最新の状態を保存することが出来ます。
27掲載するテキストの確認
一通り画像の差し替えが終わったら、次はテキストの差し替えを行いますので、掲載するテキスト情報を確認します。
なお、〝画像の差替え〟、〝テキストの差替え〟はどちらを先にしなければならないというルールはありません。どちらを先にしても問題ありません。
28テキストをコピー
テキストの差替えも先に差替えをするテキストを用意したデータからコピーしておきます。
29該当箇所を選択して上書き
編集画面に戻り、該当箇所のテキストを選択して消去、上書きしていきます。
この時、htmlタグを消さないように注意しながら進めます。
30テキストが差し替わった
テキストが差し替わったのを確認します。
31次の項目
同様に次の項目も資料からテキストをコピーして、
32該当箇所を選択して上書き
該当箇所を選択して上書きします。
33長い文章も同様に
長文の場合は、段落ごとに分けて資料からテキストをコピーします。
34該当箇所を選択して上書き
該当箇所を上書きしていきますが、その時に注意することがひとつあります。
それは、コピーした段落ごとの文章は、段落タグ<p></p>の間に貼り付けていくということです。
35画像とテキストの差替えの基本
記事で表示させる画像は、src="（ここ）"、テキストは、段落ごとに段落タグ〝<p></p>〟の間に貼り付けていきます。
そのため、もし画像タグがズレたりすると画像そのものが表示されなくなります。テキストの段落タグの場合はズレてもテキストは表示されますがレイアウトが崩れることがあります。
36画像クリック時のモーション設定
ここからは、記事に掲載されている画像をクリックした時にポップアップして表示される画像の設定に入ります。
記事に掲載されていて見えている画像とクリック時にポップアップして表示される画像は同じ画像ですが、それぞれを設定していく必要があります。
37メディアからライブラリ
WordPressのダッシュボードの画面に戻り、〝メディア〟から〝ライブラリ〟を選択して、〝メディアライブラリ〟を開きます。
〝メディアライブラリ〟というのは、WordPress内の画像や動画の保存場所です。
38新しいメディアファイルを追加
メディアライブラリの〝新しいメディアファイルを追加〟を選択します。
ここでは、記事内の画像をクリックした時にポップアップして表示させる画像を入れていきます。
39モーションを付ける画像を選択
パソコンの中の記事に掲載する画像があるフォルダから、モーションを付ける画像、つまり記事の画像をクリックした時にポップアップさせる画像だけを選択してWordPressの中に入れます。
40開く
画像を選択したら、〝開く〟をクリックすると、アップロードが始まります。
41アップロードが始まる
アップロードが始まりますのでしばらく待ちます。
421枚目の画像を選択
アップロードが終わったら、1枚目の画像を選択します。
〝1枚目の画像〟というのは、記事のポップアップさせる画像の並び順で1枚目の画像という意味です。
43画像単体の表示
〝メディアライブラリ〟の一覧の画像をクリックすると、画像単体が表示されます。
44URLをクリップボードにコピー
〝URLをクリップボードにコピー〟を選択して、画像のリンク（画像URL）をコピーします。
45アンカーリンクの画像URLを選択して上書き
コピーした画像のリンク（画像URL）は、アンカーリンクのタグ<a href="ここに画像のリンク（画像URL）を貼ります">の中に貼ります。
ここでは、既にアンカーリンクのタグには他の画像が貼られているので、差替えます。
46アンカーリンクの画像URLが差し替わった
アンカーリンクの画像URLが差し替わります。
ちなみに、〝アンカーリンク〟というのは、ウェブページの文字や画像などに他のページへのリンクを貼って、クリックで他のページなどへ飛ばす機能のことです。
47画像の見分けを付けるためにaltタグに記述
htmlと画像のリンク（画像URL）が並んでいると、どの項目がどの画像なのか？の識別が付きづらく、ページの編集時に混乱してしまうことがあるので、オルトタグ〝alt=""〟に画像を識別できるように名前をつけておきます。
ちなみに、、オルトタグ〝alt=""〟は画像が表示されないブラウザなどでここにはどんな画像が配置してあるか？をテキストで表示させる機能です。
48プレビュー画面でモーションの確認
最初の1枚目の画像にモーションを付けることが出来たら、早速〝下書き保存〟をして、画像モーションの確認をしましょう。
49クリックで画像の拡大表示
記事内の画像をクリックして、キチンと拡大表示するかどうか？拡大表示した時の画像は正しい画像かどうか？を確認します。
50残りの画像も同様に設定
1枚目の画像のモーション設定が上手くいったら、残りの画像も同様に設定していきます。
