目次
対応バージョン
WordPress 6.7.1
Elementor 3.25
はじめに
初心者でも簡単に編集ができる仕組み
納品させていただきましたホームページは、WordPressというCMS（コンテンツ管理システム）で構築しています。
WordPressを利用することで、お客さまによるブログの投稿や内容の更新を、比較的簡単に行うことが可能です。
さらに、WordPressの拡張機能であるElementor（以下エレメンター）というツールを導入することで難しいコードやプログラムの知識がない方でも、比較的簡単にホームページの編集を行うことができる仕組みで制作しています。
操作時の注意点
マニュアルでは、比較的安全に編集できる部分のみを絞り込んでご紹介しています。
中には専門的な知識を必要とするものも含まれるため、マニュアルに記載の無い内容の更新は行わず、難しいと感じられた操作を伴う変更に関しましてはご依頼いただくことを推奨いたします。
インターネット上にはWordPressの構築や更新に関わる多くの情報が散見されますが、弊社が制作したホームページは様々なカスタマイズを加えているため、インターネット上で得られる情報が一致しない場合があります。予めご了承くださいませ。
固定ページ編集前に必ず行う作業
固定ページのバックアップ
固定ページのバックアップは次の手順で行います。
【1】固定ページ一覧を表示
管理画面にログイン後、画面左に表示されるメニューから「固定ページ」をクリックします。
【2】修正したいページを複製する
現在作成されている固定ページの一覧が表示されます。
バックアップを取りたいページにマウスカーソルを合わせると、下部にメニューが表示されるので、「複製」をクリックします。
【3】複製したページを保管しておく
複製したページは、『ページタイトル』― 下書き
という形で下書き状態のページとして複製されます。
こちらをバックアップとして扱います。
クイック編集をクリックします。
【4】複製したページの名前を変更し下書き保存
必ずバックアップであることが分かるようにします。
複製したページのタイトル名とスラッグ名を「BK~日付」などと名前を変えて、「更新」をクリックします。
複製ページの状態は「下書き」又は「非公開」にしておきます。
【注意事項】
複製できたことを確認し、必ず運用中のページに対して更新作業を行ってください。
複製したページを運用ページに変更するという方法は、専門的な知識を必要とする場合があるため、上記の手順で行っていただくことを推奨します。
同様に、過去のバックアップに戻したい場合もご相談いただくことを推奨いたします。
固定ページを編集する(1)
ブログページ以外のトップページやその他ページは「固定ページ」と呼ばれます。
固定ページの編集・更新はエレメンターを使った以下の手順で行います。
エレメンターの起動手順
【1】必ずバックアップを保管しておく
編集を行う前に必ず「固定ページをバックアップ」の手順通りにバックアップを取っておいてください。
【2】修正したいページのタイトルをクリックする
エレメンターで作成されているページにはタイトルに続き「―Elementor」と表記されます。
編集するページのタイトルをクリックします。
【3】Elementorで編集をクリック
「Elementorで編集」をクリックします。
【注意事項】
画面の上部に「← WordPressエディターに戻る」というグレーのボタンがありますが、こちらはクリックしないでください。操作を進めるとページが壊れます。
【4】Elementorの編集画面が起動する
左側→編集メニュー
中央→プレビュー領域
（編集メニューで設定する内容が同時進行で確認できます。）
左側→ナビゲーション
固定ページを編集する(2)
ウィジェットの選択方法
【1】修正したいウィジェットを選択
右側のプレビュー領域から、編集したい項目をクリックすると、左側のメニューが切り替わります。
エレメンターではこの１つ１つのまとまりを「ウィジェット」と呼びます。
【注意事項】
ページによっては、ウィジェットが複雑に重なり合っており編集対象が選択しにくい場合があります。
この場合は後に紹介する「構造」機能を利用することで、選択しやすくなります。
ウィジェットのご紹介
使用頻度の高いウィジェット
エレメンターには数多くのウィジェットが用意されており、これらを配置し組み合わせることでホームページを作成しています。
ここでは、よく使うウィジェットの使い方をご紹介します。
見出し
単語や文章の変更程度の作業を推奨いたします。
【注意事項】
文字数が変わることで改行などの影響でデザインが崩れる場合もありますのでご注意ください。
その他、機能としてはスタイルの変更も可能ですが、基本的には触らず、スタイルの変更等はご依頼いただくことを推奨いたします。
テキストエディター
本文の多くはテキストエディターという機能を使用します。
【注意事項】
テキストエディターには、「ビジュアル」編集モードと「テキスト」編集モードがありますが、通常テキスト編集モードで編集するようにしてください。
※カスタマイズの関係で、テキスト内にHTMLコードを含む場合、ビジュアル編集をすることでHTMLタグが正しく動作しなくなる可能性があるためです。
ビジュアル編集モード
文書作成ソフトと似た操作で本文の編集できます。
テキスト編集モード
HTMLタグを編集することができます。
画像
画像を扱うウィジェットは主に下記の種類があります。
・画像単体
・画像とテキストがひとまとめになったもの
・複数の画像を一括で表示するもの
画像の変更は次の手順で行うことができます。
画像の変更方法
「画像の選択」の項目で画像をクリックします。
※画像の変更は2パターンです。
・新規で追加
・アップロード済の画像の変更
画像を新規追加する場合
画像を新規追加する場合は、追加する画像をアップロードした後、選択するという手順になります。
「ファイルを選択」ボタンから追加する画像を選択するか、画像をこちらにドロップすることでアップロードできます。
アップロード済みの画像に変更の場合
画像が既にアップロードされている場合は、「メディアライブラリ」より画像を選択します。
画像の選択を確認し、右下の「選択」ボタンをクリックします。
※「選択」ボタンはウィジェットによっては「メディアを挿入」と表現されている場合もあります。
メニュー
主なメニューのご紹介
サイト公開
編集を行うと、左下のメニューの「公開」ボタンが有効化します。公開ボタンを押すと変更が反映されます。
※「更新する」と同じ意味になります。
下書き保存
「公開」ボタン右側の「 v 」アイコンをクリックすると、「下書き保存」を選択することができます。「下書き保存」は変更内容を保存しておくことができます。
※ホームページ上では公開しない状態になります。
変更をプレビュー
変更の反映前に、ページ全体を確認したい場合に利用できます。目のアイコンをクリックすると、ブラウザが別タブとして開き、更新後の様子を確認できます。
※運用中のホームページ上では、反映されていませんので、公開ボタンのクリックを忘れないように注意してください。
レスポンシブモード
画面上部に表示されるのデバイスアイコンを切り替えることで、簡易的にスマートフォンやタブレット端末など、様々な画面サイズでのデザインを確認できます。
履歴
左上の３本線アイコンをクリックし、履歴を選択します。
「操作」タブ
編集ページを開いてから行った操作をさかのぼることができます。直前の操作を取り消したい場合などに便利な機能です。
「リビジョン」タブ
データベースに保存されているポイントまでさかのぼることができます。何ヶ月も前に戻すこともできるため、間違えないよう注意してください。
構造
ページに配置されている要素を構造的に表示し、要素を選択することができます。長いページや要素同士が複雑に重なり合い、目的の要素が直接選択できない場合などでも選択できます。
【注意事項】
「構造」の表示上で要素を上下にドラッグするとページ上の要素の位置も変わります。便利な機能である一方で、デザイン崩れの原因になりますのでご注意ください。
設定
ページ全体の設定を行う項目ですが、変更によって不具合を起こす可能性がありますので、変更しないようにお願いいたします。
終了手順
エレメンターを終了し、固定ページ一覧へ戻る
【1】エレメンターの編集画面を終了
画面左上のメニューアイコンをクリックし、
「Exit to WordPress」を押します。
【注意事項】
このとき、編集後保存していない場合に保存の確認が表示されることがあります。問題がなければ「このページを離れる」を押してください。
【2】固定ページの一覧へ戻る
WordPress本来の編集画面へ戻ってきます。
左上のロゴマークをクリックすると、固定ページ一覧へ戻ります。
※このロゴマークは、ユーザーごとに設定しているお客様のアイコンになります。設定していない場合は「W」が表示されます。
【注意事項】
画面の上部の「← WordPressエディターに戻る」というグレーのボタンはクリックしないでください。操作を進めるとページが壊れます。
