今回の記事はお店のサイトに表示するお知らせについてです。
現在の世情から、新型コロナへの対応・注意事項や営業日についてのお知らせ、あるいは『テイクアウト始めました』的なお知らせを店舗サイトに掲載するお店も増えたかと思います。
サイトは外注で作ってもらってから後はあんまりいじったことない、という方に向けて基本的なサイト更新や装飾のご説明をしたいと思います。
お知らせの一例
現在の弊社サイトで言うとコレです。
内容は新型コロナ感染防止のための弊社対応をご説明しています。
同じようなお知らせをサイトに掲載したい、という方は必要箇所をコピーして使って頂いて構いません。
■新型コロナウイルス感染拡大に伴う対応について■
平素より格別のご愛顧を賜り厚く御礼申し上げます。
新型コロナウイルス感染症に罹患された皆様、ご家族、関係者の皆様に謹んでお見舞い申し上げます。また、医療に携わる皆様、生活に不可欠な生産・販売・配送に携わる皆様へ心より感謝を申し上げます。
この度の感染拡大に伴い、修理ご依頼を頂く際の弊社対応についてお知らせさせて頂きます。
【1】お預かりしたPC、その他の機器は、アルコールおよび次亜塩素酸にて消毒を行いお返しさせて頂きます。そのため開封して頂いた際に薬品臭がする場合がございますが、人体および機器に影響はございません。
※アルコール清拭により、ご自身で行われた塗装やシールが剥がれる、もしくは色落ちすることがございます。気になる方は、誠に申し訳ございませんがご依頼をお控え頂くか、感染拡大の収束後にご依頼くださいますようお願い申し上げます。
【2】出来る限りご来店ではなく配送による修理ご依頼をお願いいたします。お近くのお客様には大変ご迷惑をお掛けいたしますが、何卒ご理解賜りますようお願い申し上げます。
【3】一時的な人員削減のため、営業時間内であってもお問合せのお電話に出られない場合がございます。誠に申し訳ございませんが、お電話が繋がらない際はメール・FAX（087-813-0482）にてお問い合わせくださいませ。
感染拡大の防止に努めるため、何卒ご理解、ご協力を賜りますようにお願い申し上げます。
サイト更新の基本的な流れ
現在Web上に存在しているサイトの多くは、基本となるHTMLファイルでテキストを表示させ、CSSファイルで装飾スタイル（文字の色や配置などのデザイン）を設定し、HTMLファイル側でCSSファイルを呼び出して反映させているはずです。
HTMLファイル側でCSSファイル（この場合は style.css）を呼び出すための記述
<link href=”http://●●●.com/style.css” rel=”stylesheet” type=”text/css” media=”all”>
サイトを更新する際は、本文テキストや画像を変えたい時はHTMLファイルを、サイズ、色、配置などの装飾を変えたい時はCSSファイルを編集することになります。
テキストエディタやFTPソフトなど、サイト運営に使用するソフトについて詳しくはこちらをご覧ください。
▶Webサイトを作ろう！【2】必要なソフトを準備する
HTMLファイルを編集
まずHTMLファイルに掲載したいテキスト（文章）を記述します。
HTMLファイル（top.htmlやindex.htmlなど）をテキスト編集ソフト（メモ帳など）で開き、お知らせを載せたい箇所を見つけて下さい。
今回の例で言えば、main（メイン：サイトの本文箇所）の最初の方にお知らせを掲載しています。
この div class=”main” のmainの部分は、作成した人によってはbodyだったりcontentsだったりmain_textだったりするかもしれません。
指定は自由にできるので、趣味の個人サイトだと好きな食べ物や推しキャラの名前などを設定している方も居ます。
HTMLファイルを編集したら保存して、FTPソフトでWEB上にアップロードします。
タグ記述の詳細
div class
<div class=”news2020box”>ここにお知らせの内容を記述</div>
『news2020box』の部分は私が適当に付けた名前なので、ご自分が分かりやすい名前に変更してOKです。
このdiv classによって、囲み枠線や全ての文字を太字にする設定をします。
p style
<p style=”font-weight:bold; color:#003399; font-size:150%;”>お知らせ（文字サイズ大）</p>
見出しとしてその段落（p）の文字を太字（bold）にして、色（color）を紺系（#003399）に変え、文字サイズ（font-size）を通常の文字サイズ100%よりも大きくする（150%）設定です。
※CSSファイルを作っていない、あるいは良く分からない場合はこれだけ記述してもOKです。
最近ではHTMLへの直接の装飾タグは推奨されないのですが、一部分に使うだけであれば特に問題ありません。
詳しくは下の CSSを使わずにHTMLタグのみで記述する場合 をご覧ください。
メールフォーム
メールフォームのURLへ誘導するリンクを貼る場合
<a href=”https://●●.com/mailform.html” title=”メール” target=”_blank” rel=”noopener noreferrer”>メール</a>
直接メールを送れるようにする場合は直接メールアドレスを設定します。
メール ←ここに弊社メールアドレスを設定しています。
お試しでクリックして頂いて大丈夫ですので、どんな感じになるかご確認下さい。
<a href=”mailto:info@●●.com”>メール</a>
まとめ
<div class=”news2020box”>
<p style=”font-weight:bold; color:#003399; font-size:150%;”>お知らせ</p>
平素より格別のご愛顧を賜り厚く御礼申し上げます。
<br clear=left>
誠に申し訳ございませんが、お電話が繋がらない際は<a href=”https://pc-pier.com/mailform.html” title=”メール” target=”_blank” rel=”noopener noreferrer”>メール</a>・FAX（087-813-0482）にてお問い合わせくださいませ。
</div>
<br clear=left>
CSSファイルを編集
今度はCSSファイルを開き、以下の内容を記述します。
記述する場所はheaderやbodyから下であればどこでも構いません。
/* TOPお知らせ用の装飾CSS */
.news2020box {
max-width: 100%;
background-color: #FFFFF0;
font-size: 95%;
color: #1a1a1a;
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
border: solid 3px #ff0000;
}
CSSファイルを記述・保存してFTPソフトでアップロードするとHTML側に反映され、実際にサイト上で表示される文字サイズ等が変わります。
CSSを使わずにHTMLタグのみで記述する場合
CSSの設定までは難しい、という方はHTMLタグだけでも装飾が可能です。
<div style=” width:80%; padding: 10px; margin-bottom: 10px; border: 5px double #F8A900;”>
<p style=”font-weight:bold; color:#F8A900; font-size:150%;”>テイクアウト販売開始のお知らせ</p>
お客様各位<br><br>
平素は格別のご愛顧を賜り厚く御礼申し上げます。<br>
当店ではこのたびの新型コロナウイルスの感染拡大に際し、お客様に安心してご利用頂けるよう、店舗内での提供を取りやめさせて頂き、テイクアウト販売を始めました。<br>
※混雑具合によりましては飛沫感染予防として店舗外でお待ち頂く場合がございます。何卒ご了承くださいませ。<br><br>
営業日・時間は下記の通りです。<br>
<hr style=”width:300px; margin-left:5px”>
5/1（金） 10：00～18：00 営業
<hr style=”width:300px; margin-left:5px”>
<br>
ご予約はお電話（03-1234-1234）および<a href=”mailto:info@●●.com”>メール</a>にて承っております。<br>
営業時間短縮、接客及び包装の簡素化などお客様にご不便をお掛けしてしまうこともあるかと存じますが、お客様並びに従業員の安全を考慮し、これからも安心してご利用頂けるよう努めて参ります。何卒ご理解、ご協力のほどを宜しくお願い申し上げます。<br>
</div>
上記の内容をHTMLファイルに記述して保存、FTPソフトでアップロードすると実際のサイト上では以下のような表示になります。
