【TablePressの使い方】表を装飾してキレイに見せよう。

TablePressを使ってできる色々な装飾の使い方についてご紹介しましょう。

 

セルの結合をする

 Xserverファイアバード
月額¥1,000¥500
初期費用¥3,000¥2,000
ディスクスペース200GB100GB
MySQL50個10個
WPインストール機能対応
マルチドメイン無制限
メールアカウント無制限1,000個

この表では「WPインストール機能」と「マルチドメイン」の所でセルが結合されています。

 

行を結合する場合:1番左にだけ記入して右には「#colspan#」と入力(横につなげる)
列を結合する場合:1番上にだけ記入して下には「#rowspan#」と入力(縦につなげる)

 

結合したセル内の文字を中央に寄せたい場合は、文字をこのようなタグで囲うと中央に寄ります。

<div align="center">文字</div>

テーブルの装飾をする

セルの中で強調したい部分は、背景の色を変えたり、文字の色を変えたいですよね。

では任意の所の色を変えてみましょう。

 Xserverファイアバード
月額¥1,000¥500
初期費用¥3,000¥2,000
ディスクスペース200GB100GB
MySQL50個10個
WPインストール機能対応
マルチドメイン無制限
メールアカウント無制限1,000個

このように色を変えるにはCSSを記述していきましょう。

CSSを変更する場所は、「管理画面」→「TablePress」→「プラグインのオプション」→「カスタムCSS」

画面上部に「プラグインのオプション」のタブがありますので、そこで出てくるスペースにCSSを記述していきます。

 

 

/* レンタルサーバー比較2 */
.tablepress-id-2 .row-2 .column-3,
.tablepress-id-2 .row-3 .column-3,
.tablepress-id-2 .row-4 .column-1,
.tablepress-id-2 .row-5 .column-2,
.tablepress-id-2 .row-5 .column-1,
.tablepress-id-2 .row-7 .column-2 {
background-color: #ffe5e5 !important; /* 背景色の指定 */
color: #ff0000 !important; /* 文字色の指定 */
}

.tablepress-id-●:●にテーブルIDを記入
.row-2 .column-3:左側から何番目のセルか、上から何番目のセルか

見出し部分も1列目に含まれるので注意してくださいね。
背景色を変えたいなら、background-color: #ffe5e5;このような記述をしてください。
文字色なら、color: #ff0000 !important;こんな感じですね。

今回の記述では文字色も背景色も同じセルが変わってしまいますが、分けたい時はこのCSSをもう1個コピーして、セルの番号だけ変えましょう。

※「!important」
背景色の指定部分に記入してある「!important」ですが、これは他のスタイルシートより優先させるという意味で、
表示させる順番をここで指定してしまうというのは、表示順序を乱す事にもなりかねないのであまりすすんで使いたいコードでは無いのですが、確実にこのスタイルを優先させたい場合には使っても良いかなと思います。

あんまり気にしないのであれば、強いて使わなくても良いと思います。

 

 セルの横幅を指定する

セルの横場はば初期設定だと自動調整になっています。

自分で調整したい場合は手動でショートコードに追記します。

 

元のコード:[table id=1 /]

幅調整のコード:[table id=1 column_widths="20%|40%|40%" /]

 

表の左から順に幅を指定できます。

%で幅を指定しておくと、ブラウザの見方やモニタの解像度によってあまり崩れて見えたりがしなくなるので良いかもしれません。

全体の合計が「100%」になるように指定しましょう。

もちろん%じゃなくても、px(ピクセル)でも指定は可能です。

テーブル全体の幅を指定したい時は、カスタムCSSにこのような記述を追記することで指定が可能です。

 

.tablepress-id-1 { width: 80%; /* テーブル幅の指定 */ }

色々変更してキレイにしていくのは楽しいですね。
見やすい表を作って読みやすい記事にしていきましょう。

記事が気に入ったら
テクログを "いいね!"
Facebookで更新情報をお届け。

Tech Log | テクログ

関連記事

  1. 豊富な情報量の発信とデザイン性を兼ね備えたWordPressテーマ「Gorgeous(TCD013)…

  2. エックスサーバーでワードプレスサイトを無料独自SSL化する方法

  3. 個性的で統一感もあるブログにレベルアップ!アイキャッチ画像の選び方

  4. XserverでWordPressにくるコメントスパム

  5. WordPressテーマを作ってみた(ダウンロード有)

  6. 記事作成の効率up!WPの記事を複製して簡単に新規投稿できるDuplicate Postプラグイン

  7. IZM(TCD034)の基本機能テーマオプションでここが変わる

  8. WordPressテーマTCD013でプロフィールをGravatarに登録して表示しよう

  9. WordPressでキレイにテーブル表示するプラグイン「TablePress」

コメント

  1. この記事へのコメントはありません。

転職テクニック

  1. 内定が3ヶ月から1ヶ月に短縮 転職エージェントを使うほど仕事探しが格段にラクにな…
  2. 転職エージェント「サポタント・ワークポート・パソナテック」の登録から面接までの流…
  3. アラフォーの私が実際に内定を取るまでに使った転職エージェント7選
  4. アラフォー男が内定を勝ち取れた 転職エージェントを使うメリット
  5. アラフォーが内定を勝ち取った面接テクニック 簡単だけど難しい?笑顔の効果
  6. アラフォーが内定取るまでにかかった時間 後から焦らない為にご注意を!
  7. アラフォーで内定を取って気付いた転職活動で大事な事
  8. 心と体のズレが出てくる一週間。理想の生活習慣について考える 活動記録 其の3
  9. まずは転職に向けて派遣登録申し込みと情報収集 活動記録 其の2
  10. アラフォーで転職せざるを得なくなった男の活動記録 其の1

人気記事ランキング

PSテクニック

オススメテクニック

PAGE TOP