Manualホームページ更新方法-ページ02

ホームページ更新方法(WordPressの使い方)

※1 ホームページが制作された時期によっては対応していない場合がございます。

※2 プラグイン「XO Event Calendar」で制作されたカレンダー機能の使い方です。他のプラグインで制作されたカレンダー機能には対応していません。

表組の作成方法 その1(基本的な表組の作成)

※ホームページが制作された時期によっては対応していない場合がございます。

動画マニュアル(1分45秒)

画像で解説

STEP
表組の作成その1-1

表組を作成したい箇所にカーソルを合わせます。

STEP
表組の作成その1-2

「Quicktags」内の「テーブル[セル幅等分]」を選択します。

STEP
表組の作成その1-3

表組の列(縦列)を増やすため、右下にカーソルを合わせます。

STEP
表組の作成その1-4

「表組マーク」をクリックし、「カラム」の箇所で「列を右に挿入」を選択します。

STEP
表組の作成その1-5

さらに、表組の行(横列)を増やすため、右下にカーソルを合わせたまま、「表組マーク」をクリックし、「行」の箇所で「行を下に挿入」を選択します。

STEP
表組の作成その1-6

一見、表ができていますが、このままでは不具合がでるので「テキストモード」にしてタグを修正します。

STEP
表組の作成その1-7

表組のタグ「<table>〜</table>」内に記載されている、「style=”width:~”」をすべて削除します。

STEP
表組の作成その1-8

削除が終わったら「ビジュアルモード」に戻します。

STEP
表組の作成その1-9

各項目を入力します。

STEP
表組の作成その1-10

入力が完了したら「更新」をクリックし、「プレビュー」で確認します。

STEP
確認作業

表示を確認します。

表組の作成方法 その2(項目数の多い表組の作成)

※ホームページが制作された時期によっては対応していない場合がございます。

動画マニュアル(2分13秒)

画像で解説

STEP
表組の作成その2-1

表組を作成したい箇所にカーソルを合わせます。

STEP
表組の作成その2-2

「Quicktags」内の「テーブル[セル幅等分][スマホ時に横スクロール]」を選択します。

STEP
表組の作成その2-3

表組の縦列を増やすため、右下にカーソルを合わせます。

STEP
表組の作成その2-4

「表組マーク」をクリックし、「カラム」の箇所で「列を右に挿入」を選択します。

この作業を必要な縦列数分繰り返します。

STEP
表組の作成その2-5

縦列を増やしたので、次に横列を増やします。

右下にカーソルを合わせたまま、 「表組マーク」をクリックし、「行」の箇所で「行を下に挿入」を選択

この作業を必要な横列数分繰り返します。

STEP
表組の作成その2-6

一見、表ができていますが、このままでは不具合がでるので 「テキストモード」にしてタグを修正します。

STEP
表組の作成その2-7

表組のタグ「<table>〜</table>」内に記載されている、「style=”width:~”」をすべて削除します。

STEP
表組の作成その2-8

削除が終わったら「ビジュアルモード」に戻します。

STEP
表組の作成その2-9

各項目を入力します。

STEP
表組の作成その2-10

入力が完了したら「更新」をクリックし、「プレビュー」で確認します。

STEP
確認作業-1

表示を確認します。

STEP
確認作業-2

スマホ表示でも確認します。

今回作った「項目数の多い表組」は右スクロールで全体が確認できるようになっています。
(下にある「表組の作成方法 その1」で作成した表組はスクロールしません)

表組の作成方法 その3(見出し幅30%固定の表組)

※ホームページが制作された時期によっては対応していない場合がございます。

動画マニュアル(1分11秒)

画像で解説

STEP
表組の作成その3-1

表組を作成したい箇所にカーソルを合わせます。

STEP
表組の作成その3-2

「Quicktags」内の「テーブル[見出しセル30%固定]」を選択します。

STEP
表組の作成その3-3

表組の列(横列)を増やすため、右下にカーソルを合わせます。

STEP
表組の作成その3-4

「表組マーク」をクリックし、「行」の箇所で「行を下に挿入」を選択します。

この作業を必要な横列数分繰り返します。

STEP
表組の作成その3-5

表が完成したら各項目を入力します。

STEP
表組の作成その3-6

入力が完了したら「更新」をクリックし、「プレビュー」で確認します。

  1. 「更新」をクリック
  2. 「変更をプレビュー」をクリック
STEP
確認作業

表示を確認します。

表組の「列」「行」の削除方法

動画マニュアル(2分09秒)

画像で解説

STEP
表組の「列」「行」の削除方法その1

まず、下記の表組から赤枠の1行(横軸)を削除します。

STEP
表組の「列」「行」の削除方法その2
  1. 「ビジュアル」タブをクリックしビジュアルモードへ切り替え
  2. 削除したい行(横軸)のいずれかを選択
  3. テーブルアイコンの「行」→「行を削除」をクリック
  4. 「更新」をクリックし、ページを確認します。
STEP
表組の「列」「行」の削除方法その3

指定の行の削除を確認します。

次に、下記の表組から赤枠の1列(縦軸)削除します。

STEP
表組の「列」「行」の削除方法その4
  1. 削除したい列(縦軸)のいずれかを選択
  2. テーブルアイコンの「カラム」「列を削除」をクリック
  3. 「更新」をクリックし、ページを確認します。
STEP
表組の「列」「行」の削除方法その5

指定の列が削除され、PCサイズでは問題ないのですが、スマホサイズの表示では崩れてしまいます。

STEP
表組の「列」「行」の削除方法その6

スマホサイズでは以下のように横にはみ出してしまいます。

STEP
表組の「列」「行」の削除方法その7
  1. 「ビジュアル」タブをクリックしビジュアルモードへ切り替え
  2. 「style="width: ◯◯◯px;"」の箇所を全て削除します。
  3. 「更新」をクリックし、ページを確認します。
STEP
表組の「列」「行」の削除方法その8

スマホ表示での崩れが解消されました。

カレンダー機能:休診日の設定方法

動画マニュアル(1分26秒)

画像で解説

STEP
カレンダーページを確認

カレンダー更新作業を始めるので、確認のためにカレンダーが掲載されているページを開きます。

休診日や午後休にしたい曜日の色を変更する作業をします。

STEP
管理画面のカレンダー休日設定画面を開く

管理画面の左カラムの「イベント」→「休日設定」をクリックします。

STEP
休診日の設定その1-1

「休診日」を設定する場合、編集する休日の、「all」を選び、「選択」をクリックします。

STEP
休診日の設定その1-2

設定したい休診日にチェックを入れます。

今回は日曜と水曜にチェックを入れ、「休日を保存」をクリックします。

  1. 休診日の曜日にチェックを入れる
  2. 「休日を保存」をクリック
STEP
ページを確認

ページを更新し確認すると、指定の曜日(日曜と水曜)の色が変わります。

STEP
休診日の設定その2

次に、祝日も休診日にします。

2/24は祝日の振替休日のため、臨時日の欄に「20250224」と入力し「休日を保存」をクリックします。

  1. 祝日など、追加で休診日にしたい日付を「臨時日の欄」に西暦含め入力
  2. 「休日を保存」をクリック
STEP
ページを確認

ページを更新し確認すると、指定の曜日(2/24)の色が変わります。

STEP
休診日の設定その3

午後休の設定をします。

今回は土曜日を午後休の色に変更します。

  1. 編集する休日の、「pm」を選び、「選択」をクリック
  2. 「午後休」にしたい日付を入力
  3. 「休日を保存」をクリック
STEP
ページを確認

ページを更新し確認すると、「午後休」にチェックした曜日(土曜)の色が変わります。

カレンダー機能:追加の休診日の設定・取消方法

動画マニュアル(1分26秒)

画像で解説

STEP
ページの確認

以下のカレンダーに、臨時休診など、変則的な休日を設定します。

STEP
追加の休診日の設定その1-1

管理画面の左カラムの「イベント」→「休日設定」をクリックします。

STEP
追加の休診日の設定その1-2

「休診日」を追加する場合、編集する休日の、「all」を選び、「選択」をクリックします。

「臨時日」の欄に、追加したい日付を西暦含め入力し、「休日を保存」をクリックします。

今回は2/27を休診日として追加します。

  1. 編集する休日の、「all」を選び、「選択」をクリック
  2. 追加で休診日にしたい日付を「臨時日」の欄に西暦含め入力
  3. 「休日を保存」をクリック
STEP
ページを確認

ページを更新し確認すると、指定の曜日(2/27)の色が変わります。

STEP
休診日の取消方法

休診日を取り消したい場合、「取消日」の欄に、取り消したい日付を西暦含め入力します。

今回は隔週水曜を診療とするため、2/12と2/26の休日設定を外します。

  1. 「取消日」の欄に、取り消したい休診日の日付を西暦含め入力
  2. 「休日を保存」をクリック
STEP
ページを確認

ページを更新し確認すると、指定の曜日(2/12・2/26)の色が外れます。

STEP
追加の休診日の設定・取消方法

午後休でも臨時日と取消日を設定します。

今回は2/21を臨時の午後休に設定し、2/22の午後休を外します。

  1. 編集する休日の、「pm」を選び、「選択」をクリック
  2. 「臨時日」に、追加したい午後休の日付を、「取消日」に、取り消したい午後休の日付を西暦含め入力
  3. 「休日を保存」をクリック
STEP
ページを確認

ページを更新し確認すると、指定の曜日(2/21・2/22)の色が変わります。

2/21が午後休の色になり、2/22の午後休の色が外れます。

新着情報のタイトルを太字にする方法

動画マニュアル(1分27秒)

画像で解説

STEP
タイトルを太字にする方法その1

管理画面を開き、「投稿」→「新規追加」をクリック

STEP
タイトルを太字にする方法その2

「ビジュアル」タブを選択し、新着文言を入力します。

  1. 「ビジュアル」をクリックしビジュアルモードへ切り替え
  2. 本文入力欄に「新着文言」を入力
STEP
タイトルを太字にする方法その3

「新着文言」全体を選択してから、上部にある「B」アイコンをクリック

  1. 「新着文言」全体を選択
  2. 「B」アイコンをクリック
STEP
タイトルを太字にする方法その4
  1. 「テキスト」タブをクリックしテキストモードへ切り替え
  2. 本文入力欄に記載した、<strong>〜</strong>までをキーボード(Ctrl)+Cでコピー
  3. タイトル入力欄に<strong>〜</strong>をキーボード(Ctrl)+Vでペースト
STEP
タイトルを太字にする方法その5
  1. タイトルコピー用に作った本文の文言は全部削除する
  2. 「ビジュアル」をクリックしビジュアルモードへ切り替え
STEP
タイトルを太字にする方法その6
  1. 新着情報本文を入力
  2. カテゴリにチェック
  3. 公開
STEP
ページの確認

ホームページTOPなどにある新着情報一覧ページを閲覧し、追加した新着情報のタイトルが太字なっているか確認する。

新着情報のタイトルにリンクをつける方法

動画マニュアル(1分28秒)

画像で解説

STEP
タイトルにリンクをつける方法その1

「投稿」→「新規追加」をクリックします。

STEP
タイトルにリンクをつける方法その2
  1. 「ビジュアル」をクリックしビジュアルモードへ切り替え
  2. 本文入力欄に「新着文言」を入力
STEP
タイトルにリンクをつける方法その3
  1. 「新着文言」全体を選択
  2. 「リンクの挿入/編集」アイコンをクリック
  3. 「歯車」アイコンをクリック
STEP
タイトルにリンクをつける方法その4
  1. リンクさせたい「URL」を入力
  2. リンク先が外部サイトなら「リンクを新しいタブで開く」にチェック
  3. 「リンク追加」をクリック
STEP
タイトルにリンクをつける方法その5

「テキスト」タブをクリックしテキストモードへ切り替えます。

STEP
タイトルにリンクをつける方法その6
  1. 本文入力欄に記載した、<a href=〜〜〜</a>までをキーボード(Ctrl)+Cでコピー
  2. タイトル部分へ<a href=〜〜〜</a>をキーボード(Ctrl)+Vでペースト
STEP
タイトルにリンクをつける方法その7
  1. タイトルコピー用に作った本文の文言は全部削除する
  2. カテゴリにチェック
  3. 公開
STEP
ページ確認

追加した新着情報の掲載を確認し、実際にクリックしてリンク先を確認する

新着情報を消す方法

動画マニュアル(0分34秒)

画像で解説

STEP
新着情報を消す方法その1

「投稿」→「投稿一覧」をクリックします。

STEP
新着情報を消す方法その2
  1. 削除したい新着情報をクリックせず、マウスをあてる(ホバーする)
  2. マウスをあてる(ホバーする)と操作メニューが表示される
  3. 「ゴミ箱へ移動」をクリック
STEP
新着情報を消す方法その3

「ゴミ箱へ移動」をクリックし、投稿一覧から消えるとホームページからも非表示になります。

STEP
ページを確認

TOPページなどになる新着情報一覧を閲覧し、非表示になったのを確認する

ページ内の一部を非表示にする方法

動画マニュアル(1分26秒)

画像で解説

STEP
非表示にする方法その1

今回は「クリニックとは」の箇所を批評ににします。

STEP
非表示にする方法その2

該当のページの管理画面を開き、非表示にしたい箇所の前後に目印のテキストを記載します。

STEP
非表示にする方法その3
  1. 「テキスト」タブをクリックしテキストモードへ切り替え
  2. 目印テキストの位置を確認
STEP
非表示にする方法その4

目印にしたテキストの上下に余白を作り、目印のテキストは削除します。

STEP
非表示にする方法その5
  1. 非表示にしたい箇所の前後を「<!--」「-->」で囲む
  2. 「更新」をクリック

「!」マークが入るのは前の箇所だけです。後ろの閉じる方に「!」は不要です。

STEP
非表示にする方法その6

該当ページを更新すると、非表示が確認できます。

STEP
非表示にする方法その7

再表示したい場合、先ほど追加した「<!--」「-->」を削除すれば、元に戻ります。

  1. 「<!--」「-->」を削除
  2. 「更新」をクリック
STEP
非表示にする方法その8

該当ページを更新すると、再表示が確認できます。

ホームページの追加・修正費用一覧

※費用はすべて税込表記です。

ページの追加制作

原稿を弊社で作成する場合
33,000
原稿をご用意いただく場合
22,000

バナー作成※サイズや装飾により費用が変わります。

メインビジュアル作成・修正
スマホ込み22,000〜66,000
目立つバナー作成・修正
スマホ込み15,400
フローティングバナー作成・修正
スマホ込み13,200
バナー文言修正
スマホ込み6,600

基本情報の修正

電話番号・診療時間・住所の変更
無料

※その他お見積もりが必要な画像修正などにつきましては、都度ご対応させていただきます。

03-6427-9941
お問い合わせ