WordPressテーマ変更!SimplicityからCocoonへ

ブログのレビュー記事で『店舗情報』を見やすくカスタマイズ!tableを使ったHTMLとCSS

スポンサーリンク

店舗情報にtable・Googleマップを使って見やすくするカスタマイズ

出かけた先のレビュー記事を書くブログを運営する場合、少しでも見やすい店舗情報を置くほうが良いので、段落を使わず表(table)を使った店舗情報を紹介します。

tableのHTMLと自分で装飾をしやすいよう簡単なCSSも付けておくので、コピペHTML・CSSをコピペして使ってください^^

スポンサーリンク
スポンサーリンク

店舗情報を表:tableで作る

完成イメージ図は以下の通りです。緑のリンクが不要ならtableのHTML定型文だけをどうぞ。

店舗情報
住所
東京都新宿区西新宿2丁目8−1
電話番号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!

LINKWordPressプラグインAddQuicktagの使い方と設定!初心者向けに説明❦

現在地から店舗までの迷わないようリンクを置きたい

Googleマップ『ルート・乗換』の場所

ユーザーが道に迷わないよう道順を入れたいとき、店舗を表示好きな縮尺サイズを表示した状態で『ルート・乗換』をクリックした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マップ検索

Googleマップの共有方法

地図に載せたい場所など入力し、右側の地図で表示したい縮尺地図をズーム&ドラッグ指定できたら、共有をポチッ。

Googleマップをサイトに埋め込む:サイズ指定とコピーの場所

地図を埋め込むを選択したら、ブログに表示させたいサイズを小・中・大・カスタムサイズより選択後、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をご利用しこのカスタマイズを行ってくださいね。

無料ブログの場合はドメイン・レンタルサーバーの契約が必要です。

LINKエックスサーバー新規アカウント取得・独自ドメイン登録・WordPress作成方法、全手順

さいごに

コンテンツ(記事)の内容と検索ユーザーが入力したキーワードによっては、大手サイトより検索結果として上位に表示されることもあります。

少しでもユーザーから見て店舗情報が見やすくなれば!と思うので、HTML・CSSが苦手なサイト運営者さんに書きました。

それでは。かうたっくでした❦

コメント

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております❦

トップへ戻る