ワードプレス プラグイン「テーブルプレス」最初につまずく設定 【備忘録】

スポンサーリンク
トピックス

こんにちは。

今回は、ワードプレスでブログを書いていく中で、僕が悩んだ表作成の定番プラグイン、「テーブルプレス」についての解説です。


ワードプレスを使って、料金表や比較表を作るときに「テーブルプレス」を使うのがすごく便利なのですが、ブログ作成の初心者にとっては、思うような表が作れず挫折してしまう人も多いのではないでしょうか?


僕はだいぶ悩みました💦


ほんとにこれが難しいんです。。。


今回は自分にとっての備忘録みたいなものですが、もしこれからワードプレスを始めようと思っている方の参考になればと思っています。

このブログでわかる事
  • テーブルプレスの基本的なCSSの追加の方法

  • 表の作成時の「罫線」の付け方

  • 文字を中央に寄せる方法

  • 表の一行目の背景を変える方法

目指すテーブルは・・・

です。

スポンサーリンク

テーブルプレスとは

TablePress(テーブルプレス)は、ワードプレスのプラグインで、HTMLやCSSを知らない初心者でも、簡単に表を作成できるプラグインです。

ちなみに僕はHTMLやCSSの知識は殆どくありません💦

でもこのテーブルプレスを使えばそんな知識がなくても結構、思った通りの表が作れちゃいます。

例えば、料金の比較表や、サークルなどのミーティングの日時などの一覧表を簡単に作成できるので、ワードプレスを使ってブログをやっている人は必須のプラグインだと思います。

このテーブルプレスのインストールや基本的な使い方についてとても詳しく解説されているサイトはたくさんありますので、このブログでは、僕が実際にテーブルプレスを使っていて、「こんな表にしたいけど、どうすればいいのかな?」と悩んでいろいろググって調べたものをピックアップしてます。

HTMLは文書を構造化するための言語で、ブログを読んでくれる方に、大見出し、中見出し、文章、写真などと分かりやすい構造で作ることできます。
マークアップ言語と呼ばれています。

CSSは、そのHTMLでつくられた文章の見た目や装飾を整えるためのものです。
スタイルシート言語と呼ばれています。

テーブルプレスの作成で悩んだもの

ワードプレスでテーブルプレスを追加して、デフォルトの状態で表作成すると、罫線や文字の位置などが自分の想像したものと違う場合が多いです。


最初に僕がつまずいたものは、「表の罫線」、「文字の中央寄せ」、「セルの色分け」です。


ひとつずつ解説しますね。

テーブルプレスの初期の設定は?

ワードプレスに、プラグインの「テーブルプレス」を追加して、

まず、何も設定していない状態で表を作成してみました。

尚、「テーブルのオプション」はデフォルト設定、DataTables JavaScriptライブラリの機能はチェックを外しています。

もしまだインストールされていなければ、テーブルプレスのインストールから表の作成まで詳しく解説してくれているサイトがありますので参考にして下さい!

最初の状態だと、「罫線」はなく、文字は右寄せの状態になっています。


そして、一行目は、見出しの行として、うすいブルーになっています。


また、2行目からは、行ごとに白、グレーと交互に色が変わって表示されます。


また、カーソルを任意の行にもっていくと、任意の行がグレーになります。

「罫線」がないと何となく見にくいですね。

そうだね。

それになんかすっきりしないし、セルごとに罫線を入れた方が見やすいね。

表のスタイルを変更する方法は?

表のスタイルを変更するには、「テーブルプレス」→「すべてのテーブル」→「カスタムCSS」のボックス内にコードを記入します。

① 「すべてのテーブル」を開きます。

②つぎにプラグインオプションをクリックします。

③カスタムCSSというボックスが出てくるので、カスタムコードを追加します。

カスタムコードを記入したら、必ず「保存」を押してくださいね。

すべてのセルに罫線を付ける

それでは、この表のすべてに「罫線」を入れて見やすくしたいと思います。

先ほどのカスタムCSSというボックスに下記のコードを追加します。

/* すべてのセルに枠線を付加する */
.tablepress thead th,
.tablepress tbody tr:first-child td,
.tablepress tbody td,
.tablepress tfoot th {
    border: 1px solid black !important;
}

記入を終えると必ず、「保存」押してくださいね。

これで、すべてに罫線が引かれました。

プレビューしてみると、下記のようにすべてのセルに罫線が引かれています。

一気に見やすくなったように思います。

そうだね。

でも、文字がすべて右に寄っているのは気に食わないので、中央に寄せてみようか。

文字の中央寄せる

文字が右に寄っていると見た目のバランスが悪いので、文字を中央寄せにしてみます。

/* すべての文字のセンタリング */
.tablepress td {
	text-align: center;
}

.tablepress th {
	text-align: center;
}

上記のコードを「カスタムCSS」に追加します。

追加して保存後、プレビューしてみると・・・

ばっちり!!

中央に寄りました。

いい感じですね!

でも、ヘッダーの色を変えると他のサイトより目立つんじゃないですか?

おっ!!

いいね~、それやってみよう!!

表のヘッダー(一行目)の色を変える

「テーブルのオプション」での初期の設定で、「 テーブルの最初の行をテーブル見出しにする」にチェックが入っているので、1行目がうすいブルーになっています。


テーブルプレスを使っている人は、だいたいこの色で表を作成しているんですが、ちょっと色を変えてみるだけでオリジナル感がぐっと増します。

試しに、一行目を「レッド」にしてみましょう。

下記のコードを、「カスタムCSS」に追加します。

/*ヘッダーの装飾 */
.tablepress th {
	color: #ffffff;
	background-color: #00bfff !important;
	text-align: center !important;
}

すごいですね!!

最初と全然雰囲気が変わりました。

かっこいいです。

だろ~(笑)

いい感じになったでしょう。

ちなみに色は好きな色に変更できるよ。

ヘッダーの色の変更方法

追加したコードの赤く塗った部分をWEBのカラーコードに合わせて変更すれば好きな色に変えられます。

「color:」の後の「#~~」にカラーコードを入れると文字の色が変わります。

「background-color:」の後の「#~~」にカラーコードを入れると背景の色が変わります。

例えば、先ほどは背景を「レッド」にして、文字はデフォルトの「ホワイト」でしたが、次は文字を「ブラック」にして背景を「イエロー」にしてみます。

カラーコードは、「ブラック」は「#000000」、「イエロー」が「#ffff00」です。

「カスタムCSS」を変更して、

/*ヘッダーの装飾 */
.tablepress th {
	color: #000000;
	background-color: #ffff00 !important;
	text-align: center !important;
}

とすると・・・

になります。

色については下記のサイトでカラーコードが分かりますよ!

いろいろできるんですね!!

僕のように、細かなコードのことを勉強していなくても、これくらいのことは出来るようになるよ。

ただ、最初はだいぶ時間かかった💦

まとめ

いかがでしたか?


僕も最初は大変でしたが、何度も表を作っていくうちに、やりたいことが増えてしまって、少しずつ勉強してきました。


今回ご紹介したのは、自分のサイトで作る表をすべて同じスタイルにする方法です。


個別に文字の色を変えたり、セルの一部分だけ色を変えたり、または、セルの幅を変えたりするのは、それぞれの表を個別で変えていかないといけないのでまた別の機会でまとめてみたいと思います。


初期の状態から、「カスタムCSS」のボックス内にコードを記入した後の変化はこんな感じです。

どうですか?


ちょっとしたことですが、だいぶ見やすくなっていませんか?


ここから、少しずつアレンジを加えていくとさらにオリジナリティがだせます。


もし、テーブルプレスの使い方で悩んでいる方がいましたら、参考になればうれしいです。


完成したコードを下に記載しておきますので、よければ使ってください。

/* すべてのセルに枠線を付加する */
.tablepress thead th,
.tablepress tbody tr:first-child td,
.tablepress tbody td,
.tablepress tfoot th {
	border: 1px solid black !important;
}

/* すべての文字の左右センタリング */
.tablepress td {
	text-align: center;
}

.tablepress th {
	text-align: center;
}

/*ヘッダーの装飾 */
.tablepress th {
	color: #000000;
	background-color: #ffff00 !important;
	text-align: center !important;
}

コメント

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