新告知サイト作成

新告知サイト作成
目次

ドメイン取得+サーバー設定+メールアドレス取得

依頼メールに添付されてくる「基本情報シート」からドメインを確認して、ドメイン取得を行います。(現在は基本情報シートがあればその内容を優先、ドメイン取得のみの場合はメールに記載されている内容を参照としています。)
ドメインについては基本的にお名前.comで取り扱っている物に限定しております。下記のような画面が出るものに関しては要相談となりますので、その場合は上長へご連絡ください。

 

ドメイン取得の手順(取得権限ある人のみが対応)

サポート用ブック(スプレッドシート)に情報を追加する

サポート用ブック(スプレッドシート)のドメイン取得シートの最新行に情報を追加します。
(書き方は過去の内容を参照してください)

【サポート用ブック スプレッドシート】https://docs.google.com/spreadsheets/d/1xm3Rv2NX6Q0S_Fqlz46nzao8q0E1HM6kk5CAl0oeR1M/edit#gid=1381789901

SSL設定が未完了のものやサーバー設定が未完了となるものは該当箇所を空欄にしておくようにしてください。

お名前.comにアクセス、ドメインを取得~ネームサーバー書き換え

最近、お名前.comの仕様が変更となり、ネームサーバーの書き換えが手続きが楽になりました。ドメイン取得時に契約内容の過去の履歴を参照して、頻繁に利用されているネームサーバーが選択できるようになっています。このチェックボックスを忘れずにチェックしておけば、「お名前.com Navi」のステップは不要となります。

【お名前ドットコムURL】
https://www.onamae.com/
取得したいドメインを入力。※2021年5月から割引が適用されなくなったので複数取得でも大丈夫ですが、複数取得だとサーバー設定を別途行う必要があります。
※高額のプレミアムドメインに該当した際は、絶対取らず、ディレに戻して別のドメインを検討頂くようにしてください(候補をいくつか挙げてあげると親切です)。

↓選択されたドメインがチェックボタンだったらOK、お申込みへ進む。メールマークなどの場合取得済み、もしくは外部で利用されている可能性大です。一度アドレスバーにそのURLを入れて確認してください。他院が表示されるようだったら、ディレクターに確認します。

↓ログインする

ログインパスワードは下記を参照する

※ドメイン取得は管理者のみ対応なので、対応できる人に依頼してください。

↓「申し込む」クリック ※ネームサーバーの候補が出ていると思うので、ここでエックスサーバーをチェックしてください。

ここまででドメインの取得は完了です。
前ステップにてエックスサーバーの選択ができなかった場合、以下のネームサーバー切り替えを行います。

申込時にネームサーバーのチェックを忘れた場合

お名前.com Navi ログイン

↓「TOP」へ移動 しようとすると、下記画面出るので「更新画面から移動する」クリック

↓トップページにて「ネームサーバーを設定する」

↓「検索条件」クリックでドメイン名を入力し、「上記の条件で検索」クリック

↓「検索条件」で指定ドメインに青のチェックを入れ、
「その他」を「クリック」右下の「+」マークを2回クリックし ネームサーバー5 までの空欄を作成し下記を入力します。

ns1.xserver.jp
ns2.xserver.jp
ns3.xserver.jp
ns4.xserver.jp
ns5.xserver.jp

↓OK クリック

↓完了しました

ここから30分ぐらい設定まで待ちます。
※現在では.comなら1分ほどで、jpでも10分ほどでXSERVERへのドメイン登録が可能です。
 なお早く登録を行うとSSLの失敗の確率は高くなります。

Xserverの最新IDにドメインを登録

【エックスサーバー管理パネル ログインURL】
https://www.xserver.ne.jp/login_info.php

ログインIDは下記へ

https://hero-innovation.cybozu.com/k/41/show#record=1&tab=comments&mode=show&s.keyword=%25E3%2582%25A8%25E3%2583%2583%25E3%2582%25AF%25E3%2582%25B9%25E3%2582%25B5%25E3%2583%25BC%25E3%2583%2590%25E3%2583%25BC&s.space=6

ドメイン取得が完了したら、次にネームサーバーにてドメイン登録を行います。1つのサーバーID(最近はhero1160●●で名前が統一されています)に対しドメイン20件まで(IDに初期登録されている初期ドメインhero***.xerver.jp除く、表示上は21件)を限度に順番に追加していってください。残り3件を切りそうな際は安さんへ次のサーバーIDの準備を依頼します。(→slackの制作サポートチャンネルで、安さん宛てにメンションを付けて依頼しましょう)

↓最新のサーバーの「サーバー管理」クリック

↓「ドメイン設定」クリック

↓「ドメイン設定追加タブ」をクリックし、空欄に登録するドメインを入力、「確認画面へ進む」クリック

↓OKであれば「追加する」
※ここで「まだドメインがXserverのものになっていません」などというエラーメッセージが出ていたら、しばらく待ってからもう一度対応してみてください。

 画面が変わるまで放置で待ちます。(閉じない!!)

↓下記の画面になっていたら、SSL設定も含め、サーバーへのドメイン登録が成功です。

SSL化がうまくいかない場合、上記の黄色の丸印の部分にオレンジ色の網掛けで「失敗しました」という内容が表示されます。
その場合は10分ほど時間を置いて設定しなおしてください。

SSLを再設定する場合

再設定の場合は下記の赤〇にメニューがあるのでそこから設定を進めます

「SSL設定」 → 対象のドメインを選択 → 独自SSL設定追加タブを選択 → そのまま「確認画面へ進む」を押します。

確認画面にてまだエラーが表示される場合はまだ登録しないでください。少し時間をおけばできるようになりますのでお待ちください。

WPのダウンロードはSSL設定の「反映待ち」が消えてからが望ましいです。

メールアドレスを設定する

次に、依頼があれば指定のメールアドレスと、MPクラウドで使用するためのデフォルトメールアドレスを発行します。

【▼ 取得するメールアドレス ▼】
依頼されたメール:(指定の内容)@独自ドメイン
+
デフォルトメールアドレス:info@独自ドメイン

メールアドレス取得の依頼が無くてもinfo@のアドレスは必ず取るので、漏れなくお願いします。

↓メールアカウント設定をクリック

↓対象のドメインの「選択する」をクリック ※hero●●●●.comを使うのではなく、ドメイン取得の手続きを経て登録したそれぞれのドメインで作成しますから勘違い無いように!

↓メールアカウント追加 のタブをクリック

メールアカウント(緑のライン)…infoまたは依頼された文字の内容を入力
パスワードとコメント(赤〇部分)…現在は記号を除く12桁のパスワードを採用しています。どちらも同じ内容を入力します。
容量(青のライン)…2000 → 5000に変更します。

(パスワード生成はこちらをお使いください。設定は下記と同じでいいです。WPのインストール設定の時にも複数回使用します)

 

↓追加する をクリック

↓必要に応じてメール取得の処理を繰り返します。(複数のメールアドレスを一気に取得する方法もあります。必要な場合にお尋ねください)

これでメールアドレスの取得完了です!
info@のメールアドレスとパスワードは「MPクラウドのログインパスワード・WP系管理画面のログイン情報など」にデフォルト設定として登録します。

現在は、公開後処理の際にディレクターへMPクラウドのログイン情報と合わせてメール設定情報もご連絡しています。

KINTONEのヒーローカスタマーへ情報を入力する

ヒーローカスタマーに必要事項を記載します。

①基本情報の「URL」 および 「サーバー(制作入力)」
SSL設定が完了していなくても、https://で予め登録しておいてください。www.なども不要です。

②WEB(告知・ドメイン)自分の名前、設定日の登録をします。名前は取得ボタンを押して下記のようにしてからでないと登録できません。

③MPクラウドタブのアカウントIDとパスワード、予約メールアドレスを設定します。
↓こんな感じです。

※(CMS)の部分はシステムオリジナルやシステムセレクトプランの場合に入力します。その時も入力内容はinfo@のメアドとそのパスワードを使用します。

 

(備考)ネームサーバーの設定情報はエックスサーバーの管理画面から確認できます。
https://www.xserver.ne.jp/manual/man_domain_namesever_setting.php

WordPressをインストールします(告知ページ制作依頼の場合

インストールの手順

Xserverのサーバーパネル内にある、「WordPress簡単インストール」を押します。ドメインが選択されていない状況だと一覧が表示されるので、そこから該当するドメインを選択して進んでください。(Xserverのマニュアルページを参照する場合はこちら→)https://www.xserver.ne.jp/manual/man_install_auto_word.php

ドメインが選択されていると、インストール済みWordPress一覧のタブが表示され、基本的には何もダウンロードされていない状態です。他の人がダウンロードしている可能性もあるので、もし既にインストールされているものがあった場合は一度管理者に確認してください。

何もインストールが無い場合はそのままタブをWordPressインストールに切り替えて下記の画面を表示させます。各入力エリアにはさらに下の表の内容に従って入力してください。

 

項目名 入力内容
サイトURL(左側はドメイン名の確認のみ) blog(※2021年3月25日からそれまで使用していたwpから変更になりました)
ブログ名 クリニック名
ユーザー名 starter
パスワード 任意の乱数(12桁)
メールアドレス wp-admin@hero-customer.com
キャッシュ自動削除・データベース デフォルトのまま触らない

上記を入力したら「確認画面へ進む」をクリック。 → 確認画面が出てくるので、そのまま「インストールする」を押します。
しばらく時間がかかるので、インストールするのボタンは連打しないようにしてください。

↓インストールが完了すると下記のような画面がでてきます。管理画面のURLなどが発行されています。

この時にパスワードが「*****」で表示されているので、目のアイコンを押して上記のように表示させた状態にします。
MySQLの方も同様に行います。

↓どちらも表示しましたら、全体を下図のように選択して内容をコピーしておきます。これらはKINTONEのパスワードへ登録します。

KINTONEのパスワードアプリに登録する

上記で取得したワードプレスのインストール情報は、KINTONEのヒーローカスタマーにて管理します。該当するクリニックのレコードを立ち上げましょう。
基本的に告知ページ制作依頼メールにレコードへのリンクURLが付いていますが、たまにリンク切れしているので、その場合はKINTONEにログイン後、下記赤〇の検索窓から探すこともできます。

↓検索に該当した一覧のイメージです。ヒーローカスタマーに該当するものには緑枠のように「赤のアイコン」「HERO Customer」という名前が頭についています。

↓このような画面がヒーローカスタマーのレコード情報です。詳細は省略します。

↓ここのタブのお客様パスワードに「パスワードの新規登録はこちら」というテキストリンクがあるので、そこをクリックします(できれば別タブで開くのがおススメです)

↓下図のような画面が出てきます。医院名はヒーローカスタマーの顧客名を入力して取得を押し、下図のようにします。

ようやく出番ですが、ここで先ほどワードプレスのインストール時にコピーした内容noteに貼り付けます。
その他、入力エリアは下記のように入力して保存します。

タイトル WordPress(社内用)
ID starter
パスワード WordPressのログインパスワード
note エックスサーバーの画面の内容をコピペ

この時、後々必要になるお客様用のパスワードも生成しておいて登録しておきましょう。
↓上記の保存が終わったら、noteに貼り付けた情報の中から「管理画面URL http://~」の一行をコピーして下記の赤〇のボタンを押します。パスワードのレコードを追加するボタンです。

↓パスワードの新規登録画面が再度表示されますので、下記の情報で追加登録します。

顧客名 クリニック名
タイトル WordPress(お客様用)
ID user01
パスワード 新しく生成する任意のパスワード12桁
note 先ほどコピーしておいた管理画面URLを貼り付け

これでワードプレスのインストールに関連する作業は完了です!!次からはワードプレスを操作していきます。

(※ここは現在告知制作には関係ないので、スルーしてください。念のために残しています)

CMS+告知サイトの場合

CMS案件で告知サイトをつくる場合は、今までのフロー通りにpublic_htmlの直下にWordPressをインストールすると、告知サイトとCMSが競合してしまい制作がしづらくなるのと、設定方法を間違えると告知サイトが表示されない不具合の原因になります。CMS用のWordPressもインストールしてあげる場合は、下記のディレクトリにWordPressをインストールしてください。

■告知サイト公開時の構成
/wp/ 告知サイト本番公開(index直下として表示)
/test/ CMSテスト(クローラー拒否)

※CMS側はインストール後noindexにしておいてください。(下記参照)

【重要】告知サイト初期制作の際に、必ず「公開時のURLに不具合がないか」を確認するようにしてください。

WordPress ログインから初期設定完了まで

ヒーローカスタマーのお客様パスワードを参照する

これまでの手順にてヒーローカスタマーに登録したパスワードを使用してログインします。KINTONEで該当のクリニックのレコードを立ち上げ、お客様パスワードを開きましょう。

※※ 下記注意事項です。以降の作業を進める前に必ず確認してください ※※

自分がインストールしていないワードプレスを使用する場合それがシステムオリジナルやその他制作側で使っているWPかどうかを必ず確認するようにしてください。
確認方法としては主に下記のようなものになります。

  1. KINTONEに保存されているお客様パスワードの設定情報のURLの末尾が/blog以外になっている
  2. お客様パスワードのユーザー名がオリジナルのものやinfo@~のメールアドレスなどになっている
  3. ログインしてみてホームページのプレビューを見ると作りこまれたサイトが表示される
  4. テーマを確認するとHeroのものが表示されている

判断がつかない場合は必ず上長確認等するようにしてください。制作側で進行しているデータを上書きすると大事になる可能性があります。

ログイン

↓下記の画面になったらまず、黄色の線の部分「管理画面URL」のリンクをクリックします。別画面でWordPressのログイン画面が立ち上がります。

↓次に、上の画像の緑の線の部分のIDとパスワードを使用して下記画面に入力、ログインを押してログインします。(上記画面は古いデータの為、IDがHEROinnovationになっていますが、現在はstarterがデフォルト値です。登録している内容に従ってください。)

プラグインの新規追加

↓ログインしました。まず左メニュー「プラグイン」をクリック

↓ページ上部「新規追加」をクリック

↓①ページ右上「プラグインの検索」の窓に「All-in-One WP Migration」と検索。(左の文字をコピペで出ない場合があります。その場合手打ちしてみてください。)

上のように出てきたら、All-in-one WP Migrationの枠内にある「今すぐインストール」を押す →その後出てくる「有効化」をクリックします。

↓これで左メニュー内にAll-in-one WP Migrationが追加されました。
続いて、左メニュー「All-in-One~」をクリック、さらにその下にある「インポート」をクリック。下図のような画面にします。

※もし上記の画面で、最大アップロードファイルサイズが50MBや100MBなど小さい数字だった場合、インポートファイルがアップロードできない場合があります。
その際はこの流れの後に説明する、アップロード上限の変更の手順に沿ってサーバーで.iniファイルの容量変更を行ってから対応してください。

インポートファイルのアップロード

ドロップボックス内、告知サイトのフォルダを開く
E:\Dropbox\コーディングテンプレート\告知サイト\新告知サイト\初期インポートファイル

「importfile_onstyle.wpress」というファイル名があるので、それを先ほど開いていたWordPressの管理画面「サイトのインポート」の箇所にドラッグ&ドロップ。

↓くるくるします

↓開始を押します。

↓完了です。

↓ページをリロードするとデータベースの更新がでるので、「WordPressデータベースを更新」をクリック。※出ない場合はスキップしてください

↓「続ける」をクリック

↓ログイン画面に戻ります。(現在はMPクラウドのロゴになっています。)
先ほどのdropbox内、インポートファイルと同じディレクトリに保存されている「ログイン情報.txt」ファイルに、ユーザー名とパスワードが記載されているので、それを使ってログインします。

↓下記のような画面が出たら「正しいメールアドレスです」をクリック(※出ない場合はスキップ)

↓上記インポートがファイルサイズオーバーでできない場合は下記を行ってください。

アップロード上限の変更 (過去案件などで必要な場合に行います)

 2020.07.01追加 

 2020.10.15 
 現在はアップロード上限のデフォルト値が1GBに変わっているので、この作業は不要です。 

WordPressで初期データをアップロードする際、ファイルサイズが大きいためアップロード上限を上げておきます。

まずはWordPressをインストールするサーバの管理画面を開きます。
ページ中央下部「php.ini設定」をクリック。

上限を上げたいドメインの「選択する」をクリック

post_max_size、upload_max_filesize の上限を1Gまでアップ(インポートするデータがそれ以上の場合はさらに上げてください)

「確認画面へ進む」をクリック

「変更する」をクリックで完了です。※設定の反映には最大5分程度かかります。

パスワードの変更

インポートを行ったので、ログインパスワードがインポートの内容に差し変わっています。
管理画面の左メニュー「ユーザー」をクリックし、最初に設定した今回のクリニックのパスワードに戻してください。

↑ここは常に新しいパスワードを発行する仕様になっており、現在使用しているパスワードを確認することはできません。ここの内容はヒーローカスタマーに登録したものと同じものに書き換えてください。

同様に、user01の方も書き換えます。現在のインポートファイルには既にuser01の情報が登録されているので、starterと同じように修正すればよいですが、もし先々、user01が登録されていないインポートファイルなどを使う場合は、下記のように新規追加から新規ユーザーを追加するようにしてください。

↓【新規追加の場合】

不要ファイルの削除とファイルのアップロード

FTPソフト(FileZillaなど)を使用して、サーバーにアクセスします。サーバーIDはドメイン取得時にヒーローカスタマーへ記載していますので、わからない場合はそちらから確認します。


※FileZillaなどの設定がまだの場合、先にそちらを設定してから対応してください。ここでは割愛します。

↓以下FileZillaの画面にて説明していきます。対象のサーバーIDを選択、接続します。

URLの修正(ファイルのアップロード)

次に、現在のURLは~/wp/と最後に余計なアドレスが入ってしまっています。これを/wp/なしにする作業を行います。

↓FTPソフトを開いて該当のサーバー[ /ドメイン名/public_html/wp ]にアクセス

↓htaccessをリネーム。ファイル名を 「htaccess_yyymmdd」に。

↓FTPでindex直下に移動し、.htaccessとindex.htmlを前の手順同様にリネーム

↓下記ドロップボックスのフォルダに保存されている.htaccessとindex.phpファイルを、index直下にアップ
E:\Dropbox\コーディングテンプレート\告知サイト\新告知サイト\インデックス直下に保存するファイル

↓URLから/wpが消えました。

参考;下層ディレクトリに配置したWordPressフォルダに、トップページのURLを指定する方法
https://tips.adrec-dept.com/wordpress/871/

使わないテーマを削除する

↓次にWPをインストールした際にサンプルで入っている使わないテーマを消します。kokuchiフォルダ以外のフォルダを削除しましょう。
(WPのバージョンでthemesの内容も変更になるので、削除するファイルは下記と同じではありません)

↓無くなりました。

FTPソフト内での初期設定は以上です。

ワードプレス側の環境設定を行います

↓次にまたワードプレスの管理画面に戻ります。
左メニューの「設定」→一般 を開き、下記それぞれ対応し「変更を保存」を押します。

  • サイトのタイトルを今回作成の医院名に変更
  • WordPressアドレスおよびサイトアドレスの2カ所 http → https に変更
    (サーバーにてSSL設定が完了していない場合、設定完了になるまでログインできなくなり、作業が止まるので注意してください!)
  • サイトアドレス(URL)の /wp を削除 して保存
    ※上記手順「URLの修正」を行わずに変更すると、ホームページのプレビューができなくなります。

↓次に同じく設定のサブメニュー内 パーマリンク設定 を開き「投稿名」にして保存(設定を変更する必要がなくても、一度保存を押してください)

ワードプレスの初期設定はこれで完了です!!ここまでで告知ページの制作は半分ぐらい終わっていると思って大丈夫です。
意外に色んな作業が関わっていますので、漏れのないようにしておきましょう!

次からは実際の制作について説明していきます。

告知サイトのコーディング

お客様データ内にフォルダを作成する

告知制作依頼が届いたら、まずShareの「お客様データ」の中にフォルダを作成しましょう。該当する顧客名の頭文字に該当する行フォルダに入って、顧客管理用のフォルダを作成します。ネット環境の関係でローカルにて作業フォルダを作成する際も、最終的にはサーバーに使用した資料をアップロードするようにしてください。
手順は下記のようにしてください。

  1. share\お客様データ のフォルダに入ります。
  2. ★新規顧客作成時のベースフォルダ(コピペして使用)をまるごとコピーします。
  3. 該当する行フォルダ(あ~わの該当するもの)に入ります。
  4. ★新規顧客作成時のベースフォルダ(コピペして使用)をペーストします。
  5. ペーストした★新規顧客作成時のベースフォルダ(コピペして使用)を顧客名にリネームします。
  6. 告知ページで使用する資料を、そのフォルダ内にある資料(告知)の中に保存していきます。

既に同一顧客名のフォルダがある場合、中身を確認し、同一案件の場合は既存のフォルダを優先して使用してください。

基本情報シートの内容を確認

営業やディレから送られてくる依頼メールには、「基本情報シート」が添付されています。添付されていない場合は担当の営業・ディレに問い合わせてください。※ドメイン取得のみだけの場合には付いていない事もありますのでよく確認しましょう。
基本情報シートの中には今現在、タイトルとディスクリプションが記載されています。
もしこの内容が未記入の場合もディレに問い合わせて、記入した基本情報シートを改めてもらうようにします。

キーワードについて

最近はSEOとの関わりは無いとされていますが、別途キーワードを設定したいという要望もあります。必要に応じて設定するようにお願いします。

↓【設置イメージ】
<meta name=”keywords” content=””>をheader.phpのヘッダーに追加します。
contentに依頼内容を入れるイメージです。

基本情報シートの内容を入力する

ワードプレスの「基本情報設定」メニューのサブメニューの流れに沿って、基本情報シートの内容を入力していきましょう。どこから対応してもかまいません。
空白の項目や情報が無い部分は空欄にしましょう。デフォルトで文字が入力されている部分で使用しないものがあれば、それも消しておきます。

【基本情報設定サブメニューと入力内容】
基本情報設定 【入力項目】
クリニック情報(住所・電話番号含む)、ロゴ、SEO(タイトル・ディスクリプション)、メイン画像(スライド)、メインビューに表示する告知テキスト、MAP、アクセス詳細、予約システムURL など
【入力に関する補足】
・告知テキストは、タイトルやディスクリプションを参考に、入力例に従って作成してください。開業日などが不明な場合はリニューアルや移転などの可能性もあるので、ディレに確認しましょう。
・メイン画像は下記のファイルのものを使って大丈夫です。標榜科目に適したものを使ってください。指定が無ければ1枚だけでOK。歯科に医科の写真、外科に内科の写真を使ったりしないよう、注意しましょう!
[dropboxパス] \Dropbox\コーディングテンプレート\告知サイト\告知用メイン画像
・アクセス詳細については、住所をコピーしてGoogle地図などで開き、駅から徒歩圏内であれば路線と駅名を含めたものを、郊外などで主要な路線がなければ目印になりそうなものをピックアップして記載してください。駐車場があるようであれば、「駐車場完備」だけでもOKです。
・GoogleMAPの部分は下記、別途説明します。
コンテンツ 【入力項目】
フリーエリア01・02、内覧会情報、基本理念、当院の特徴
【入力の補足】
フリーエリアはメインビューの下に表示されるエリアです。優先する内容を改めて依頼された場合に使用します。
ご挨拶 【入力項目】
ご挨拶、先生の名前など、経歴、資格
【入力の補足】
経歴や資格の小項目や、複数の先生がいる場合、外枠部分を追加できます。
診療案内・時間 【入力項目】
診療内容、診療時間
【入力の補足】
・診療案内はボリュームが多い内容で来た場合、ディレに簡略化してもいいか確認しましょう。告知ではできるだけ内容をさっぱりさせた形にします。
基本情報シートに何も記述無い場合は、標榜科目などを入れてください。
・診療科目が複数あり、診療時間表がいくつか必要な場合は追加できます。
診療時間表が不要な場合は、表の枠全体を「-」ボタンを押して消してください

GoogleMAPの埋め込みソースについて

基本情報設定のGoogleMapの部分には住所から検索した地図の情報を入力します。下記の手順でソースを取得してください。

  1. 基本情報シートの住所をコピー
  2. ブラウザのアドレスバーに貼り付け
  3. ↓検索結果が出たら「地図」をクリック(検索に出ているMAP自体を叩くと次の画面が上手く表示されない可能性があります)
  4. 地図の左側の情報に、共有ボタンがあればクリック(出ない場合は、該当住所の範囲で出る位置を地図上から探してください)
    ※この時点でソースの拡縮が決まるようなので、必要であれば共有ボタンを押す前に拡縮で位置調整します。

  5. 共有のポップアップウィンドウが出たら、地図を埋め込む、を押します。

  6. HTMLをコピーを押すと、必要なソースがコピーされますので、これを基本情報設定のGoogleMapに貼り付けてください。

よく使うスタイルについて

現在の告知にはビジュアルエディタ上で設定できるいくつかのスタイルも用意しています。また、あると便利なクラスもあるので別ページの記事を参照にしてください。

http://hero-intra.com/post-4347/

テーマカラーの変更やスタイルの微調整

テーマカラーやスタイルの微調整は、ワードプレスのメニューの「外観」 → テーマエディタにて行います。テーマエディタの中には、告知ページ作成に関連する一連のファイルの編集が行えるようになっています。必要に応じて編集しないといけない場面が出てきますので、よく覚えておいてください。

告知ページ用カラー一覧からテーマカラーを選ぶ

http://hero11606.xsrv.jp/sample/mp_kokuchi.html
特にカラーの指定がなければ、ロゴの色味に合わせます。ロゴが未定であれば、デフォルトのままで大丈夫です。

style.cssの5-7行目を差し替えてください。

基本的に大元はstyle.css、スマホでの見え方の微調整はsp.cssで設定されています。この2つは使う事が多いファイルです。
プレビューでレイアウトが崩れている際は、上記ファイルにて修正対応を行ってください。

↓ここで選びます。sp.cssはcssの中にあります。

「検証」を使ってレイアウトの調整が必要なクラスを探す

初めて使う人はどのクラスがどこに当たってどう動くかというのを探すのが一苦労だと思います。修正したい箇所のクラス名や、現在の状態はブラウザの機能の「検証」を使って確認するようにしてください。スマートフォンの見え方の確認もこれを使用して行います。

基本的には皆さんChromeを使って作業されるとは思いますが、他のブラウザでももちろん検証は使えます。多くは右クリックのメニューやF12キーで対応しています。macbookなどではfn + 12キーがデフォルトの設定のようです。HTMLのコーディングなどを経験してきた方なら当然知っていることなのですが、念のため。

↓赤の印のアイコンでPC→スマホ表示の切り替えを行います。(スマホはiphone5とiphone6/7/8Plusあたりの見え方を確認しましょう) 

緑のアイコンで該当するクラスの確認などが行えます。beforeやafterなどを始め、このアイコンでは拾えない要素もあるので詳しい使い方は一度上長に聞きましょう。

その他

入力する内容がわからない場合、ワードプレスの入力欄の上に文例が載っている場合もあるので、参考にしてください。
Googleアナリティクスはこの時点では入力不要です。

ロゴが未定の場合

クリニック名の画像を作成して仮に差し込んでおきます。
横幅600pxくらいの横長長方形で作成してください。(イラストレーターでの作成がおススメです)

<小技>診療案内がボリューミーだった場合

フリーエリアを使用して、ワンカラムの状態で入れることができます。

①既存の「診療案内」エリアは情報を入れなければ非表示に。または科目等だけシンプルに入れておく。

②基本情報設定→ コンテンツ→ 「フリーエリア01」に情報を入れる
タイトルは「診療案内」や「診療内容」等で。

③一番上に表示されてしまうので入れたい場所に移動します。
外観→ テーマエディター →ホームページ(front-page.php)の 73行目~92行目あたり
▼.sec_top_freearea01ここから 箇所まるっと切り取りし

いれたい箇所にペースト。そして「ファイルを更新」

④ナビの編集
現状追加できません。診療案内の近くに「診療内容」として移動させるなど工夫。

ブログの追加(有料オプション)

※ブログは、指示があった場合にのみ追加します。指示がなければ不要です。

↓固定ページ⇒新規追加を開く

↓①見出し、②パーマリンク、③英語タイトルを入力 ⇒ 画面右「公開」をクリック。
パーマリンクは見出し入力後に自動生成されるので、自動生成の内容を編集で「blog」に変更してください。

さらに画面上のIDをメモ。この場合は「572」です。

↓「テーマエディター」のテーマファイルから「parts-pagetitle.php」を選択。
下図で「306」になっているところを 2か所 先ほどブログで確認したIDに差し替え(今回は572)

functions.phpを開き、「投稿メニュー」の前にコメントアウトを追加 ⇒「ファイルを更新」をクリック
remove_menu_page( ‘edit.php’ ); //投稿メニュー

//remove_menu_page( ‘edit.php’ ); //投稿メニュー

※手入力してエラーが出る場合は、他のコメントアウトの部分をコピペすると大丈夫だったりします。

↓ブログ投稿がでました

下記、テンプレで対応済みですので、スルーして大丈夫です!(2021/11)

テーマエディターにてもう一つ、ブログページで表示されている、月別アーカイブのメニューを非表示にします。
sidebar.phpを開き、下記部分を画像のようにコメントアウトしてください。

↓「設定表示設定を開き
①固定ページ を選択 ②ホームページを「ホーム」 ③投稿ページを「ブログ」に変更⇒「変更を保存」をクリック

↓次に、ブログのURLを変更します。パーマリンクを編集して投稿が/blog/のディレクトリに表示されるようにします。
設定 > パーマリンク を開きカスタム構造を選択して「/blog/%postname%/」にしてください。
※こうすることで、告知サイトのブログ投稿とブログ単体になった時のURLが同じになります。SEO対策の意味が半減してしまうので必ず行ってください。

↓ブログ投稿をクリック→新規追加

↓テストで記事を登録して・・・

↓ブログのボタンと最近のブログ投稿+リンクが切れてなければ完成です!

求人ページの作成

ブログと同様に依頼があった場合のみ、求人ページを作成します。求人ページはワードプレスのメニュー「固定ページ」の中に非公開状態で格納されています。ブログとは違い有料のページではなく隠しておく必要がない為セッティングは簡単です。要望があれば編集し、公開してください。

【手順】

  1. 固定ページ一覧 → 求人案内をクリック
  2. パーマリンクや英語タイトルはそのままでOKです。求人情報を追加ボタンを押します
  3. 求人に関係する入力項目が出てきます。それぞれ、入力内容がわかりにくい部分については入力例がありますので、例に倣って入力していってください。
    ※求人ページについては現在のところ項目名は変更できませんので、無い項目は他の項目とまとめたり、その他に記載するなどしてご対応ください。
    ※看護師や受付など、業種によって複数の表に分けたい場合は、求人情報を追加ボタンで、枠を追加することができます。

  4. 公開状態が非公開なので、公開にしてもいい場合は編集ボタンを押して公開に変更します。
    ※既に告知ページ自体を公開している案件の場合、一旦内容を先生へ確認頂くケースがあるため、非公開のままでいい場合もあります。依頼メールをよくご確認ください。

     
  5. 公開ボタンを押します。(非公開の場合は更新ボタン

参考資料

ユーザーマニュアル

https://docs.google.com/presentation/d/1pPJ92NEuPJuhSydWJKHUhrEYDQvssAiwS0iYEtN2Pm4/edit#slide=id.p

ワークフロー

https://docs.google.com/presentation/d/115DpCxc2qUN4GQaRVCXeq7V3S-DVwm4StkTwRkvynYc/edit#slide=id.g7e3701ef8c_0_40

kintoneの入力箇所まとめ(告知制作時)※追加20200827

タブ 入力内容
基本情報
  • URL
  • サーバー
お客様パスワード
  • WordPress(お客様用・会社用)
WEB(告知・ドメイン)
  • ドメイン取得・サーバー設定者
  • ドメイン取得・サーバー設定日
  • 告知サイト制作者
MPクラウド
  • アカウントID(info@ドメインのメールアドレス)
  • パスワード(メールアドレスのパスワード)
  • 予約メールアドレス

※基本情報に漏れなどありましたら入れておいてあげてください。

【重要】RIBONのアカウント発行が必要な場合 (2021/04/05追加)

2021年4月より、RIBONの本格的な運用が始まりました。告知の依頼と合わせてアカウント発行依頼もセットで対応します。アカウント発行を希望している場合は下記の手順書の流れに従ってKINTONEを更新するようにお願いします。(KINTONEのタブを設定すると、先生に自動でメールが送信される仕組みなので、発行を確実に希望している案件を対応するようにしてください)
※メールの本文にアカウント発行依頼と書いてあるのに、依頼メール内のRIBON項目の施設情報がなし・非公開となっていたり、基本情報シートに情報が無かったりする場合はアカウント発行を希望していない場合があります。判断が付かない場合はディレに確認してください。

RIBONアカウント発行業務フローはこちら

制作完了メールの作成と検品依頼

制作が終わったら制作完了メールを作成します。メールワイズにテンプレ保存しています。

  • ドメイン取得のみ
  • 新告知サイト制作
  • 新告知サイト制作+メール取得完了

いずれか、対応しているものをお使いください。

メールをテンプレの内容に沿って必要な情報を入れて完成させたら、送信はせず、送信相手が正しく入力されているかを確認して、処理状況を「送信待ち」→確認者を検品担当者へ変更し、書きかけ保存ボタンを押します。

その後Slackの#サポート_検品 チャンネルで検品者へ検品確認依頼を行ってください。基本的にメールの送信は検品者が検品後に行ってくれます。

@●●●●(←検品者をメンションで入れます)
【院名】●●クリニック
【ステータス】テスト公開
納期●●です。お手すきの際にご確認お願いいたします。

これで告知ページの制作は完了です。お疲れ様でした!!!

公開後処理

告知ページが公開されると公開後処理が発生します。その手順は下記よりお進みください!

新告知サイト 公開後処理