出かけた先のレビュー記事を書くブログを運営する場合、少しでも見やすい店舗情報を置くほうが良いので、段落を使わず表（table）を使った店舗情報を紹介します。
tableのHTMLと自分で装飾をしやすいよう簡単なCSSも付けておくので、コピペHTML・CSSをコピペして使ってください＾＾
tableの作り方記事を追加しました。
LINKtable：表の作りかた！行・列を増やすHTMLタグの書きかた、初心者向けだよ❦
店舗情報を表：tableで作る
完成イメージ図は以下の通りです。緑のリンクが不要ならtableのHTML定型文だけをどうぞ。
| 住所 | 東京都新宿区西新宿２丁目８−１ |
|---|---|
| 電話番号 | 03-****-**** |
| 営業時間 | 00:00～00:00(ラストオーダー00:40)(入園時間など) |
| 定休日 | 〇曜日：年中無休：不定休など |
| 駐車場 | あり |
店舗情報table（表）のHTML定型文をコピペ
上記サンプルのテーブル（表）を定型文としてコピー、サイトの編集画面テキスト（HTML）に貼り付けてお使いください。
<table class="shop-info"> <caption>○○店舗情報</caption> <tbody> <tr> <th>住所</th> <td>地図iframe貼り付け 東京都</td> </tr> <tr> <th>電話番号</th> <td>03-</td> </tr> <tr> <th>営業時間</th> <td>00:00～00:00</td> </tr> <tr> <th>定休日</th> <td></td> </tr> <tr> <th>駐車場</th> <td></td> </tr> </tbody> </table>
| 住所 | 地図iframe貼り付け 東京都 |
|---|---|
| 電話番号 | 03- |
| 営業時間 | 00:00～00:00 |
| 定休日 | |
| 駐車場 |
上記がテンプレートです。
店舗情報tableのCSS
上のHTMLを使うと店舗情報だけで表示される表（table）に少しだけスタイルを当ててます。
※上記tableは私が使用しているテーマのCSSが元から入ってます。ザックリとした説明ですがそのスタイル変更方法は『目次：2章』よりどうぞ。
.shop-info caption {
font-weight: bold;
font-size: 1.2em;
}
.shop-info th {
width: 5em;
}
- 上の店舗情報のスペース（.shop-info caption）
- フォントを通常より1.2倍に
- 文字の太さを、太めに指定
- 店舗情報にある住所・電話番号欄（.shop-info th）
- 文字列が最大4文字なので、幅は5文字分と指定
スマホビューは5文字分に、タブレット・PCではもっと幅を大きくしたい場合は以下を追記してください。
@media screen and (min-width: 600px) {
.shop-info th {
width: 8em;
}
}
600px～の幅からアクセスした場合、住所欄などは8文字分の大きさで表示。って意味です。
住所欄を8文字分にしたときのPCビュー
表の内容をもっと増やしたいとき
定型文なので場合によって項目を増やしたい事もありますよね。そのとき以下のようにHTMLタグを増やせばOKです。
<tr> <th>その他</th> <td></td> </tr>
増やしたい場所に上記を貼り付けます。<tr>から</tr>が1つの項目です。任意の場所に追加してください。
<tr>の上か</tr>下に追加- または
</tr>この間に追加<tr>
タグ打ちが面倒なのでWordPressの場合
プラグインAdQuickTagに入れておくとかなり便利に使えるのでオススメです。※定型文になるので、開始タグに入れたらOK！
現在地から店舗までの迷わないようリンクを置きたい
ユーザーが道に迷わないよう道順を入れたいとき、店舗を表示し好きな縮尺サイズを表示した状態で『ルート・乗換』をクリックしたURLを置きます。
リンクを見つけたユーザーは迷う（店舗に連絡する）ことなく到着できる
上▲の緑色リンクはサンプルとして『新宿駅・首都高の地図が見える状態』で、東京都庁への道案内のリンクを以下▼通常リンクより見栄えをよくしたものです。
LINK店舗までの道案内
ルート案内用HTML・CSSをコピペしたい場合
HTML
<div class="route"><a href="★地図のURL★" target="_blank" rel="nofollow">店舗までの道案内</a></div>
★地図のURL★の部分は地図のURLを置いてください。
CSS
.route {
background-color: #c0ecae; /*緑の背景色*/
border: solid 1px #7ad655; /*その枠線*/
border-radius: 5px; /*角をほんのり丸く*/
text-align: center; /*文字の中央寄せ*/
padding: 0.8em; /*内側余白*/
}
.route:hover {
opacity: 0.6; /*マウスを置いたとき軽く透明に*/
}
.route a {
text-decoration: none; /*リンクしたの線なし*/
color: #1e7c1b; /*文字色みどり*/
font-weight: bold; /*文字を太く*/
text-shadow: 1px 1px 0px #fff; /*文字に軽く影：白*/
display: block; /*リンクのクリック範囲を大きく*/
}
住所欄に地図を埋め込む方法
該当店舗の名前や住所などをGoogleマップのサーチボックス『Googleマップを検索する』欄に入力してください。
LINKGoogleマップ検索
地図に載せたい場所など入力し、右側の地図で表示したい縮尺地図をズーム&ドラッグ指定できたら、共有をポチッ。
地図を埋め込むを選択したら、ブログに表示させたいサイズを小・中・大・カスタムサイズより選択後、HTMLをコピーをクリック。
そのままブログ投稿編集画面の『テキスト』エディタにiframeタグ<iframe src="～ 略 ～</iframe>を貼り付けると表示されます。
貼り付ける場所はtable内にある文字列『地図iframe貼り付け』を削除しHTMLテキストエディタから入力してください。
ストリートビューで埋め込むことも可能です。詳細な方法は割愛します。
地図がはみ出る場合の対処
テーブルから地図などのiframeがはみ出してしまったときCSSに追記するコード
iframe {
width: 100%;
}
テーブルを画面いっぱい & 表が画面からはみ出す&表の線が2重になるとき追加するCSS
table {
margin-bottom: 20px; /* 表の下余白 */
max-width: 100%; /* テーブルは見出し防止 */
width: 100%; /* 表を画面いっぱいに */
border-collapse: collapse; /* 2重線を重ね1本に */
border-spacing: 0;
}
表の左側の背景を追加（文字も太く）したい
table th {
background-color: #f3f4f5;
font-weight: bold; /* 文字を太く */
}
表の奇数番目の背景色を追加したい
table tr:nth-of-type(2n+1) {
background-color: #fafbfc;
}
表の線・内側の余白を調整したい
table th,
table td {
border: 1px solid #dddedf;
padding: 6px; /* 内側余白 */
}
全て一度に追加したい
iframe {
width: 100%;
}
table {
margin-bottom: 20px; /* 表の下余白 */
max-width: 100%; /* テーブルは見出し防止 */
width: 100%; /* 表を画面いっぱいに */
border-collapse: collapse; /* 2重線を重ね1本に */
border-spacing: 0;
}
table th {
background-color: #f3f4f5; /* この表：左側背景 */
}
table tr:nth-of-type(2n+1) {
background-color: #fafbfc; /* 表の項目：奇数番目の背景 */
}
table th,
table td {
border: 1px solid #dddedf;
padding: 6px; /* 内側余白 */
}
このブログには他にもさまざまなスタイルが元々入ってます。
全く同じスタイルにしたい場合は、WordPressテーマCocoonをご利用しこのカスタマイズを行ってくださいね。
無料ブログの場合はドメイン・レンタルサーバーの契約が必要です。
さいごに
コンテンツ（記事）の内容と検索ユーザーが入力したキーワードによっては、大手サイトより検索結果として上位に表示されることもあります。
少しでもユーザーから見て店舗情報が見やすくなれば！と思うので、HTML・CSSが苦手なサイト運営者さんに書きました。
追加したページは以下。
LINKtable：表の作りかた！行・列を増やすHTMLタグの書きかた、初心者向けだよ❦
それでは。かうたっくでした❦
Comments