【WordPress】テーブル(表)を使って店舗情報をスッキリ表示させてみた

デスク

こんにちは、higekoi (@Freewheeling_h )です。

お店の紹介もちょくちょくやっているこのブログですが、店舗情報の欄がちょっとカッコ悪いなあと思っておりました。

そこでテーブル(表)を導入してみると見た目がすごくスッキリしたのです。(最新記事から移行している途中)

ブログカスタマイズ初心者の僕でもできたことをシェアしたいと思いますので、ブログでお店の紹介をしている方は良かったら参考にしてみてください。

テーブルとは?

テーブルとはWordPressで(無料ブログでも?)使える標準機能です。

テーブル02

WordPress 投稿画面 テーブルアイコン

今まではこの機能を全く使っていなくて、商品説明などで表にする時にだけ使うものなんだろうなあと思っていました。

でも考えてみると店舗情報、施設情報などで使えばスッキリして見栄えも良くなるんですね。

 

 ▼テーブルの使い方は下のブログで分かりやすく説明されています。

WordPressでの簡単な表(テーブル)の作り方!さらに超サクッと色まで付ける方法

 

実際にテーブルを使って店舗情報を表示してみた

  1. テーブルを使っていなかったときの表示
  2. デフォルトのテーブルで表示
  3. CSSをカスタマイズしたテーブルで表示

こんな感じで変えていきましたので紹介していきます。

 

①テーブルなしのとき

 PC

テーブルなし PC

テーブルなし(PC)

 

スマートフォン

テーブルなし スマホ

テーブルなし(スマホ)

テーブルを入れる前はこんな感じで寂しい印象。大事な情報ですので、ちょっと目立たせたかったのです。

PCで見るとそれなりにすっきりするのですが、スマホで見ると崩れます。赤枠のところがきれいに表示されていないことがずっと気になっていました。

 

②テーブルあり(デフォルト)

 PC

テーブル デフォルト PC

テーブル デフォルト(PC)

 

スマートフォン

テーブル デフォルト スマホ

テーブル デフォルト(スマホ)

デフォルトのテーブルを挿入するとこんな感じになります。シンプルで結構好きなのですが、もうちょっと目立たせたいかな。

線があることによって端は揃っていますが、薄くてイマイチだなと思いました。

 

③テーブルあり(CSS HTMLコピペで作成)

 PC

テーブル カスタマイズ PC

テーブル カスタマイズ(PC)

 

スマートフォン

テーブル カスタマイズ スマホ

テーブル カスタマイズ (スマホ)

最終的にcssにコードを加えて、このようなテーブルにカスタマイズすることができました。これで大満足!

線が薄いと言っておきながら枠は消しちゃいました。でもまあ矢印みたいなのでわかるかなと。

色もサイトのデザインに合わせれたので最高です。

次はこのカスタマイズのやり方について書いてみます。CSSとかHTMLなんか全く分かっていない僕でもできたので、誰でもできるはず!

 

カスタマイズ方法

難しいことはよくわかりませんので、簡単に紹介します。

コードはLIGのブログから

HTML5+CSS3でデザインしたtableのCSS&HTMLサンプルソース5点

上の記事のを参考に少しだけ変更を加えました。このデザインの色だけ変えています。

コードはLIGブログを参考にしてください。

 

手順

  1. CSSのコードを親テーマか子テーマの Style. css に貼り付ける(外観→テーマの編集)
  2. 色を変える
  3. HTMLのコードをテキストに貼り付ける
  4. 完成

 

色の変更

CSS 説明

CSSのコードの中に【#295890とあるのが色コードなので、ここを変更しました。
あと2箇所同じようなのがあったので変えちゃいました。とりあえず#295890は青っぽいので変えてしまおうかと。

ちなみに僕が書き換えた色は#4c4c4cのグレーっぽいやつです。このブログは全体的にグレーを使っているので合わせました。

自分で変更した点はたったこれだけです。

デフォルトのテーブルを使って色の変更もできるのでそのことについては、最初に紹介したサイトを参考にしてください。

 

まとめ

テーブル(表)を使って店舗情報をすっきりさせる方法はいかがでしたか?

この記事を書くまではテーブルって使いどころが難しいなあと思っていました。でも使ってみるととても便利なものですね。

今まであまり気にしてなかったのですが、自分が読んでいるブログではよく使われている方法なんだなあということを知りました。

勉強になりました!!

higekoi
今後全部手動で手直しするのは心が折れそうだな\(;゚∇゚)/

 

店舗情報の表示方法で参考にしたブログなど

食べログもテーブル。

higekoi
普段から見ているブログや情報サイトにヒントはたくさんありました。