PR

【見やすさUP!】TablePressで使いたいCSSカスタマイズについて紹介!

ブログ運営
この記事は約7分で読めます。
記事内に広告が含まれています。

こんにちは、かかしです。

新しく「TablePress」をインストールしたけど、

カスタマズしてもう少し見やすくしたい!

このよう思われている方はいないでしょうか?

この記事では、「TablePress」で見やすさをUPするために使いたいCSSカスタマイズについて紹介して行きます。

この記事はこんな人にオススメ!
  • TablePressをカスタマイズしたい方
  • TablePressで作成した表を見やすくしたい方

今回紹介するTablePressで使いたいCSSカスタマイズは、

  • 読者の方が見やすくなる
  • コードをコピーして貼るだけ
  • 誰でも簡単にできる

このように、自分のブログにとってお得な情報が詰まっています!

この記事では、TablePressで使いたいCSSカスタマイズについて紹介していきます。

TablePressで作成した表をもっと見やすくしたと思っている方は、今回紹介するCSSを使用しましょう!

TablePressについてのインストール方法などは、こちらの記事で紹介しています。

TablePressで使いたいCSSカスタマイズ

今回紹介する「TablePress」で使いたいCSSカスタマイズは、以下の4つです。

  • 表に縦線を入れる方法
  • 文字を中央にそろえる方法
  • 文字の高さを中央にする方法
  • スマホでスクロールして見やすくする方法

これらのやり方を説明していきます。

この4つのCSSカスタマイズを行う際は、

  1. TablePressを開く
  2. プラグインのオプションをクリック
  3. CSSカスタマイズにコードを入力
  4. 変更を保存をクリック

このような手順で行います。

どの方法でもこの手順でコードを入力していきます。

それぞれ説明していきます!

表に縦線を入れる方法

まず、どんなものかご覧ください。

CSSカスタマイズを入れる前の表(区切りなしの場合(縦線なしの場合))

区切りなしの場合(縦線なしの場合)

CSSカスタマイズを入れた後の表(区切りあり)

CSSカスタマイズを入れることで区切りがはっきりとして見やすくなったと思います。

これのコードは、

.tablepress thead th, .tablepress tbody td, .tablepress tbody th {
	border: 1px solid #ccc;
}

このようになります。

これをコピーして「TablePress」のプラグインのオプションのCSSカスタマイズのところに貼り付けましょう。

貼り付けることができたら、「変更を保存」をクリック!

これでできます。

#CCCは枠線の色を変更する部分になります。変更する場合は、カラーコードをこちらに入力しましょう。

こちらのボタンで、色のコードを調べることができます。

文字を中央にそろえる方法

まずは、CSSカスタマイズをする前と後をご覧ください。

CSSカスタマイズをする前

CSSカスタマイズした後(縦線と文字の高さ真ん中になっています。すいません)

このように、CSSカスタマイズを入れる前では、左に寄っていた文字が中央に配置されています。

正直これは好みではあります。

これのコードは、

.tablepress thead th, .tablepress td {
	text-align: center;
}

このようになります。

これをコピーして「TablePress」のプラグインのオプションのCSSカスタマイズのところに貼り付けましょう。

貼り付けることができたら、「変更を保存」をクリック!

これで完了!!

文字の高さを中央にする方法

まずはCSSカスタマイズをする前と後をご覧ください。

CSSカスタマイズをする前

CSSカスタマイズをした後(縦線と文字の中央揃えが入っています。すみません)

このように表の一番左の縦の項目を見てもらうと分かりやすいですが、CSSカスタマイズをする前だと文字が上の方によっています。

ですが、CSSカスタマイズを行った後では、高さ項目の真ん中に来るようになっています。

これのコードは、

.tablepress tbody td {
	vertical-align: middle;
}

これになります。

これをコピーして「TablePress」のプラグインのオプションのCSSカスタマイズのところに貼り付けましょう。

貼り付けることができたら、「変更を保存」をクリック!

これで完了!!

スマホでスクロールして見やすくする方法

スマホでご覧の方は、わかりやすいと思いますが、下の表2つを比べてみてください。上は、コードを入れてない場合で、下はコードを入れた場合です。

CSSカスタマイズをしていない場合

ABCD
この記事では、
TablePressで作成した
表を綺麗にスマホで表示するスマホでスクロールするこの記事は、初心者でも分かるように書いていきますCSSやHTMLなどの言葉が出てきますが、
方法を解説してきますなんとかなります!
一緒に頑張りましょう!

CSSカスタマイズをした場合

ABCD
この記事では、
TablePressで作成した
表を綺麗にスマホで表示するスマホでスクロールするこの記事は、初心者でも分かるように書いていきますCSSやHTMLなどの言葉が出てきますが、
方法を解説してきますなんとかなります!
一緒に頑張りましょう!

このようなります。

コレについては、こちらの記事で紹介していますのでそちらをご覧ください!

TablePressで絶対に設定しておきたいCSSカスタマイズ

それは、スマホでスクロールして見やすくする方法です。

TablePressで作成した表はパソコンだと切れに見えますが、スマホ場合だと崩れていにくいことがほとんどです。それだと読者は見づらいため、サイトを離脱される可能性があります。

それを防ぐためには、スマホでの見やすさにもこだわるようにしましょう!

この設定については、こちらの記事で詳しく解説しているのでそちらをご覧ください!

まとめ

今回は、「TablePress」で見やすさをUPするために使いたいCSSカスタマイズについて紹介しました。

この記事の内容が参考になればうれしいです。

最後までご覧いただきありがとうございます。

このブログでは、TablePressについて他にも解説しています!

ホーム » 【見やすさUP!】TablePressで使いたいCSSカスタマイズについて紹介!
スポンサーリンク

コメント

タイトルとURLをコピーしました