MANUAL

サイト管理マニュアル

Manual

はじめに

サイト運営で頻出する作業をマニュアル化しております。日常で必要になるサイト更新はこちらのマニュアルに従えばほぼカバーできますのでご活用ください

作業を行う前に・・・

作業に不安がある、または手探りになりそうな場合は必ず実行前にデータのバックアップを取ってください。データのバックアップはワードプレス管理画面の左メニューにある「ツール→エクスポート」から可能です。もし手順を間違えて表示やレイアウトが崩れてしまった場合は、「ツール→インポート」から復元可能です。

バージョンアップを伴う作業は慎重に

ワードプレスやphpのバージョンアップを行って発生する不具合は上記手順で復元できませんので、作業を行う前にワードプレスやphp、テーマのバージョンをメモっておいてください。

リニューアル後のサイトに関しては、完全なバックアップデータと使用ソフト全てのバージョン情報が把握できていますので、前回と同じ状況になったとしても復元可能です(別途作業費を頂きます)。

更新代行業も承っております

マニュアルを見てもわからなかった、またはマニュアルに載ってない作業が必要な場合はスポットの代行業務も承っておりますのでご検討ください。

Q. 編集モード「テキストエディター」「ビジュアルエディター」の違いについて

テキストエディターの特徴

ウェブサイトの設計図をマニュアルで編集するモードです。使うにはある程度サイト制作の知識が必要ですが柔軟に編集可能です。

ビジュアルエディターの特徴

サイト作成の知識がない人でも編集できるアシストモードです。とっつきやすい反面、高度なことはできません。また機械の自動生成に任せるので意図しない結果を招くことがよくあります。
テキストと画像しかないシンプルなページの編集には使えます。例えばインフォメーションや旧サイトの多くのページが該当します。

ビジュアルエディターで編集できないわけについて

旧サイトは見出しフォントや料金表など多くのパーツが画像で作られていました。そのため内部的にはテキストと画像だけのシンプルな構造になるため、ビジュアルエディターでも編集が可能でした。

しかし本当はこういった装飾パーツは画像ではなくCSSという設計図で作らなくてはいけません。そうしないと検索エンジンに無視されたり(検索エンジンは画像内の文字が読めない)、見る人の画面サイズによって画像が伸縮し文字が小さくなりすぎたり、引き伸ばされてにじむためです(実際、旧サイトの設備紹介はスマホで見るとほとんど文字が読めませんでした)。

リニューアルでそれらを修正した結果、反動としてビジュアルエディターで編集ができなくなりました。ご不便をおかけしますが、マニュアルにあるhtmlの基本ルールさえ掴めば今まで以上に柔軟な編集が可能になりますのでご対応お願い致します。

Q. 「店舗設備」「貸切プラン」のGalleryを編集したい

  • 手順1:ワードプレスにログインして、左のメニューから「Robo Gallery」をクリックします。

  • 手順2:開いたメニュー内に「店舗設備」「貸切パーティー」があるので、編集したいほうのギャラリーを選んでクリックしてください。

  • 手順3:Edit galleryという画面が開くので、「Manage Images」という緑色のボタンをクリックしてください。

  • 手順4:編集ウインドウが開きます。画像サムネイルの×マークを押せばギャラリーから当該画像を取り除けます。
    ギャラリーに新しい画像を追加したい場合は、左メニューから「ギャラリーに追加」を押してください。

  • 手順5:ワードプレスの「メディア」にアップロードされている画像一覧が表示されるので、好きな画像を選んだら右下の「galleryに追加」をクリックしてください。編集が終わったら右下の「galleryの更新」を押して編集ウインドウを閉じます。

  • 手順6:編集ウインドウを閉じたら、最後に必ず「公開タブ」の「右端にある青い更新ボタン」をクリックしてください。これを押さないと編集が反映されません。

注意

ギャラリーの枚数が多すぎたり1枚のデータサイズが大きいと、ページ表示が遅くなったりスマホで閲覧している人の月データ通信料を大きく使わせてしまいます。画像はアップロード前にフォトレタッチアプリなどで容量を圧縮してください。画像の解像度を低くしたり、jpg保存で圧縮品質を下げることでデータサイズを削減できます。目安として1枚あたり200KB以下が望ましいです。枚数上限は20~30枚程度を目安として古いものは外してください。

※ ブラウザにキャッシュが残っているので画像変更が反映されるまでしばらく時間がかかる場合があります。

Q. テキストの内容を差し替えたい

元の文章があってそこの文字を差し替える作業でしたら簡単です。サンプルとして営業時間の変更をしてみましょう。

営業時間が記されているページは、「PG4KIDS(フロントページ)」「料金と営業時間」「お問い合わせ」「PG4KIDS-EN(英語版フロントページ)」「PRICE(英語版料金)」「CONTACT(英語版問い合わせ)」の6ページです。これらを編集していきます。まずは「PG4KIDS(フロントページ)」からはじめましょう。

  • 手順1:ワードプレス左メニューの「固定ページ」をクリックし、「PG4KIDS(フロントページ)」の編集を押します。

  • 手順2:編集画面が開いたら、最初に右上にある「」ボタンをクリックして、エディターのタイプを「コードエディター」に切り替えてください。※この編集に限らず、既存の固定ページを編集する際はなるべくエディタータイプをコードエディターに切り替えて下さい。ビジュアルエディターでもできないことはないですが、勝手にワードプレスが自動補正をしてくるので上手くいくこともあればレイアウトが崩れる場合があります。ただしインフォメーションの「投稿ページ」はどちらのモードで編集していただいても大丈夫です。

  • 手順3:キーボードの「Ctrlキー+fキー」を押して、修正したい文字をページ内検索してください。例えば、「17:00」の部分を変更したい場合はページ内検索ウインドウに17:00と入力してエンターを押し、当該部分を探します。大文字・小文字・スペースの有無は完全一致するように注意してください。

  • 手順4:当該部分がヒットしたら任意の文字に書き換えます。(例:17:00 → 16:00 等)

  • 手順5:右上の「プレビュー」→「新しいタブでプレビュー」を押して、問題がないかチェックしてください。
    ブラウザの新しいタブでPG4kidsと検索して同じページを開き、プレビュー画面と見比べます。この時ブラウザのウインドウ最大化を解除して幅を最小まで狭めてやると疑似的にスマホ画面でのレイアウトをチェックできます。
    レイアウトに崩れが出ていた場合は、更新ボタンを押さずにブラウザを閉じてページから移動すれば反映せず終了できます。問題がなければプレビュー横にある更新ボタンを押して編集を終了してください。

  • 手順6:手順1~5を残り5ページ分繰り返して完了です。

Q. サイト内の画像を変更したい

【追記 4/27】 ここで説明する方法で変更できない箇所は、トップページの全ての画像、店舗設備のギャラリー、貸切プランページの全ての画像とギャラリーです。それらの個所の画像を無理やり実行するとサイト全体のレイアウトに影響があるのでやめて下さい。

  • 手順1:変更したい画像があるページを開き、変更したい画像の上で「右クリック→画像アドレスをコピー」します。※ブラウザによっては「画像URLをコピー」だったり呼び方が違いますが、とにかく画像のURLを取得できれば手段はかまいません。画像をドラッグし新しいタブで開くことでもURLバーからコピーできます。

  • 手順2:ワードプレス左メニューの「固定ページ」をクリックし、変更したい画像があるページを選択します。

  • 手順3:編集画面が開いたら、かならず最初に右上にある「」ボタンをクリックして、エディターのタイプを「コードエディター」に切り替えてください。文字差し替えと違い、画像差し替えはビジュアルエディターでは出来ません。

  • 手順4:キーボードの「Ctrlキー+fキー」を押してページ内検索を開き、検索窓に先ほどコピーしたURLをペーストして、ページ内検索を実行します。当該部分がヒットしたらひとまず置いておいて、新しいタブで「メディア」を開いてください。

  • 手順5:メディアライブラリーに新しく置き換えたい画像をアップロードしたら、ファイルの詳細から「URLをクリップボードにコピー」をクリックします。

  • 手順6:ページ編集画面に戻って、ページ内検索でヒットした古い画像のURLと新しい画像のURLを入れ替えます。

  • 手順7:右上の「プレビュー」→「新しいタブでプレビュー」を押して、問題がないかチェックしてください。
    ブラウザの新しいタブでPG4kidsと検索して同じページを開き、プレビュー画面と見比べます。この時ブラウザのウインドウ最大化を解除して幅を最小まで狭めてやると疑似的にスマホ画面でのレイアウトをチェックできます。
    レイアウトに崩れが出ていた場合は、更新ボタンを押さずにブラウザを閉じれば反映せず終了できます。問題がなければプレビュー横にある更新ボタンを押して編集を終了してください。

Q. より高度な編集をするために

ウェブサイトは、htmlタグ、通称タグと呼ばれるもので作られています。例えば、編集画面などで見たことがあると思いますが、

<span style=”color:red;”>あいうえお</span>

↑の<span ~~>がhtmlタグと呼ばれるものです。</span>はそのhtmlタグの終了位置を表しています。
上の例は、「あいうえお」というテキストを、文字を赤くするタグで囲っています。これによって、上の文字列を実際のブラウザ(サイトを見るためのアプリ)で閲覧するとあいうえおとなります。

タグには他にも画像を張ったり、レイアウトを決めたり色々な種類があります。編集の際は下の基本ルールを頭に置いて、コピペをするとき「開始したタグ」は必ず「終了タグ」までセットで扱って頂けるとトラブルが少なくなります。

タグは<aaa>内容物</aaa>で1セット。開始したタグは必ず/で閉じなければいけない。

<aaa><bbb>内容物</bbb></aaa>といった入れ子構造も可能。

頻出タグ

頻出タグを紹介します。編集画面で書かれているタグが何を意味しているのかわかれば、カスタムがしやすくなります。わからないタグがあったら検索してみるのも有効です。

  • <p></p> pタグ:長い文章を装飾するタグ。フォントサイズ、色、テキストの背景色などを定義できる。

  • <span></span> spanタグ:汎用的な文字の装飾を行うタグ。ピンポイントの微調整に使う。

  • <img> イメージタグ:画像を表示するタグ。imgタグ内の、src=”〇〇〇”内に画像のURLを書き込むことで、画像を張り付ける。</>を使った終了タグがいらない。

  • <i></i> アイコンタグ:←こういうピクトグラムを表示するタグ。

  • <div></div> 区分タグ:囲った部分をグループ化するタグ。出現数が最も多く用途は多岐にわたるのですが、主にレイアウトを担っている。それだけにdivの扱いには注意して、開始と終了をワンセットで行うことを特に意識する。

htmlタグのふるまいを決めるCSS

ただ単に<span></span>と記述しただけでは文字の色が変わったりサイズが変わることはありません。そのタグの詳しいふるまいを決めているのは「css」と呼ばれる別のファイルです。このCSSとhtmlふたつが組み合わさりサイトは作られています。

実際の編集画面でタグを見ると、「class=”〇〇〇〇”」といったものがほとんどのタグに書かれていると思います。この指定に従ってCSSの方で書かれている内容が呼び出され、装飾が表現されるという仕組みです。

マニュアル対応外のカスタムについて

html/cssの知識なしでカスタムできることには限度があります。マニュアルに従っても上手くいかなかった時はcssの領域に入っているので諦めて、更新ボタンを押さず撤退する判断をしてください。それ以上をご自身の手でやりたい場合※は、htmlとcssを学ぶ必要があります。

※技術的質問へのご回答は有償サポートとなります。やり方をご案内しそちらで作業を行ってもらうという手法は、作業代行以上にコストがかかっているのでご理解ください(CSSを読み直すのに加えて、作業方法を解説する必要があるため)。無償サポートの範囲は、納品時に本マニュアルに追加される「納品書」の項を参照ください。

Q. 高度編集:「よくあるご質問」の質問枠を増減する

  • 手順1:先にQ. 高度な編集を行うをお読み下さい。

  • 手順2:ワードプレス左メニューの「固定ページ」をクリックし、「よくあるご質問」または「FAQ」(英語版のよくあるご質問)を開いてください。

  • 手順3:編集画面が開いたら、最初に右上にある「」ボタンをクリックして、エディターのタイプを「コードエディター」に切り替えてください。

  • 手順4:キーボードの「Ctrlキー+fキー」を押してページ内検索を開き、検索窓に「week-box」と入力してください(シンプルなページなので目視で探しても構いません)。

  • 手順5:<div class=”week-box add-padding-top-20″>という開始タグがいくつか見つかるはずです。これが「質問と回答をまとめる外枠のついた1ブロック」の開始を示すタグです。
    この<div~>からスタートして一番最初に出てくる</div>を探してください。それが<div class=”week-box add-padding-top-20″>の終了タグになります

  • 手順6:<div class=”week-box add-padding-top-20″>というdivタグからスタートし、質問のpタグがあり、回答のpタグがあり、次にようやく終了タグ</div>が見つかるはずです。この<div~></div>で囲まれた1ブロックを消すことで、当該の質問と回答の1ブロックをまとめて消すことができます。

    ※↓クリックorタップで拡大します

  • 手順7:逆に質問回答のブロックを増やしたい場合は、同部分をコピー&ペーストしてください。ペーストする場所はどの質問回答ブロックの後でも構わないのですが<div class=”week-box add-padding-top-20″>~~~</div>の直後にしてください。適当にこのページの最後尾とかに入れてしまうと、このページ全体を囲っているdivも存在するので、divの入れ子が破綻してレイアウトが崩れます。

  • 手順8:複製したブロックの中にあるQ&Aテキストを書き換えて下さい。

  • 手順9:プレビューで破綻がないことを確認出来たら、更新ボタンを押して編集を終了してください。

更新履歴

Ver.2.0

  • ワードプレス、phpを最新バージョンにアップデートしました。
    最新バージョンを保つことでより速く、安全なサイトになります。

  • マルウェアの危険性があるプラグインが含まれていたため、不要なプラグインは全て排除しました。

  • 画像データで作るべきでないコンテンツ(料金表や見出しフォント等)を全てcssで作り変えました。
    これによりSEO効果アップ、引き伸ばされてにじまない、内容の差し替えが簡単になります

  • デザインをリニューアルしました

  • SSL通信を導入しました

バージョン情報

ワードプレス:5.7
PHP:7.4(モジュール版)
テーマ:Lightning:13.8.13

VK Expansion Unit:9.52.1.0
Contact form7:5.4
Robo gallery:3.0.5
WP Multibyte Patch:2.9(自動更新オン)
XML Sitemaps:4.1.1(自動更新オン)