帯広 小林音楽教室

Webサイト更新マニュアル

Website Update Guide

この度はWebサイトのリニューアルをご依頼いただきありがとうございます。
このページでは、トップページなどの「固定ページ」の編集手順と注意事項をまとめています。

1 管理画面へのログイン

2 固定ページの編集方法

今回のHPは、デザインの自由度を高めるために特殊なコード(HTML)で構築されています。
基本的には「文字」と「画像」のみを書き換えることで、安全に更新が可能です。

基本手順

  1. 編集したいページを開き、上部のバーから「Elementorで編集」をクリックします。
  2. 編集したい箇所(文章や画像)をクリックすると、左側に英語のコードが表示されます。
  3. このコードの中の「黒い文字」部分だけを書き換えて更新します。

【実例】講師紹介セクションの場合

実際のコードを見ながら、変更箇所を確認してみましょう。

⚠️ 編集のルール
コードの中にある記号( < > " = ; / など)は1文字でも消すと表示が崩れます。
必ず「日本語の文字」「画像のURL」だけを慎重に書き換えてください。

① 写真を変更する場合

写真は「選択」ではなく「URLの貼り付け」で行います。

<!-- ↓ src="〜" の間のURLを書き換えます -->
<img src="ここに画像のURLを貼り付け" alt="先生の名前" ...>

手順:
1. 管理画面の「メディア」に新しい写真をアップロード。
2. その画像の「ファイルのURL」をコピー。
3. 上記コードの src="" の間に貼り付けます。

② 文字を変更する場合

お名前や紹介文は、日本語の部分を探して書き換えます。

<div class="teacher-card__header">
  <!-- 肩書き -->
  <p class="teacher-card__role">代表講師</p>
  <!-- お名前 -->
  <h3 class="teacher-card__name">小林 梨香</h3>
</div>

改行のコツ:
文章内で改行したい場所には <br> と入力してください。
(Enterキーでの改行は画面に反映されません)

3 注意事項

サイトの表示を守るため、以下の部分は変更しないようにお願いいたします。

  • <style> から始まるコード
    コードの一番下にある部分はデザインの設計図です。ここを消すとレイアウトが崩れます。
  • 「設定」→「一般」のアドレス
    ここを変更すると管理画面に入れなくなります。
  • プラグインの更新・削除
    「更新してください」と表示が出ても、サーバーとの相性があるため、ご自身では押さずにまずはご相談ください。

4 サポートについて

「編集方法がわからない」「うっかり表示を崩してしまった」という場合は、遠慮なくご連絡ください。
軽微な修正や更新方法のご質問であれば、いつでも対応させていただきます。

ココナラのメッセージにてお気軽にお声がけください。

白石るか に相談する

Web Designer: Ruka Shiraishi

© Kobayashirika.com All Rights Reserved.