SEO・アフィリエイト

【TablePressの枠線ができない!?】CSSにコードを入れるだけ、コピペOK

2020年11月16日

 

悩む男性
TablePressで表を作ったけど枠線がないので枠線を付け加えたいのですがどうすればいいですか?

 

悩む女性
枠線や罫線がない!!どうすればいいですか?

 

悩む男性
CSSコードがわかりません

 

こんな悩みにお答えします。

この記事を書いている人はこんな人

ムロです。ブログを始めて1年(2019年6月)ぐらいで、4つのブログを運営しています。

8ヶ月で収益化しました最高月収は25万で、アベレージは20万ぐらいです。

PVは大体3万PVぐらいですね。ツイッターは(@hittky1114)

 

こんな方におすすめ

  • TablePressで表を綺麗に作りたい
  • 枠線を作りたい、コピペOK
  • 表を作り、記事を見やすくする

 

 

TablePressは便利なプラグインなので表を作るとボタン1つで記事に入れることができます。

 

比較サイトなどを作る時に表で分けて表示できるよにするとみやすく出来上がります。

 

TablePressをよく使うのですが、枠線が消えているという事態になってしまったので同じように悩んでいる人はこれをみてもらえればOK

 

 コチラもおすすめの記事です

>>【セールスライティングのコツ】アフィリエイトで10倍売れる文章の書き方を紹介

>>【ブロガー必見】Webマーケティングを学ぶならこの本を読め!初心者向けの10選

>>【ブログ初心者向け】ブログのペルソナ設定を解説!アクセスのある記事は読者選びにある

 

TablePressで表を作ると枠線が消えていることありませんか

 

実は、デフォルトで表を作ると枠線がありません。

 

そんな時には、CSSでプログラミングコードを入れて枠線をつ口ます。

 

 

 

 

 

すべてのセルの周囲に枠線を付加するには、TablePressで設定されているスタイルをカスタマイズする必要があります。

 

tdタグやthタグに細かくCSSが記述されているので、1つずつピックアップして、新たなCSSを記述します。

 

 

Twenty TwelveとTablePressの関係では、TablePress(または子テーマ)のstyle.cssよりもTablePressのCSSファイルの方が後に読み込まれるため、同じセレクタでCSSを指定しても、TablePressのCSSを上書きできません。

 

 

そこで、セレクタを詳細に指定するか、「!important」を付加して優先度を上げます。

 

 

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

 

/* すべてのセルに枠線を付加する */
.tablepress thead th,

.tablepress tbody td,

.tablepress tfoot th{

border: 1px solid black !important;
}
これにより、すべてのセルに枠線が表示されるようになります。

 

 

TablePress枠線の作り方

 

めちゃくちゃ簡単です。

 

step
1
TablePressを開く

 

step
2
プラグインのオプション設定に

 

step
CSSにプログラミングコードをコピペする

 

step
4
保存してプレビューで完成

 

テーブルを装飾する方法(色を入れる)

テーブルの装飾はCSSで行います。

 

色を変える。

 

 

 

 

 command
background-color: #ffe5e5 !important; /* 背景色の指定 */
color: #ff0000 !important; /* 文字色の指定 */

これをコピペしてもOK

background-color: #ffe5e5が色指定になります。

 

 

こんな感じになりました。

 111222333444
金額基準値1基準値2基準値3基準値4
期間
基準値11基準値12基準値13基準値14
本数基準値121基準値122基準値123基準値124

 

【まとめ】TablePress枠線を作るやり方紹介

 

TablePressのプラグインはかなり便利なので他にもリンクを入れれたり、列を増やしたり消したりも簡単です。

 

表にコードを入れ記事にするのが便利ですね。

 

コチラもおすすめです

>>【2021年から】跳ねるブログのおすすめアフィリエイトジャンルを紹介【初心者でも月10万稼げる】

>>【ブログ初心者向け】正しいアフィリエイト記事を書いて収益をあげるやり方【読めば収益化ができる】

>>【これだけでOK】アフィリエイトASPのおすすめ完全版!【初心者OK】

 

  • この記事を書いた人
  • 最新記事

ムロ

サイト管理人のムロです。 【趣味のブログがいつの間にかお金を稼いでくれた】月間10万PV達成 ➡️8ヶ月でブログ収益は月20万円 ➡️ 本業と副業で年収は1000万超え➡️ブログでは、SEO・アフィリエイト・動画配信・AFFINGER・転職について書いていますので、よろしくです!!

人気記事一覧

1

  転職サイトの大手3社をまとめて紹介します。   リクナビ、マイナビ、doda   転職したい人でも、どこのサイトに登録したら良いの迷いますので。   それぞ ...

2

悩む男性アフィリエイトで稼ぐコツが知りたい。いま、個人ブログを運営しているけど月1,000円未満です・・月5万円を目指したい。   悩む女性収益化するためには、どうしたらいいですか? &nb ...

3

  悩む女性個性的なブログはアクセスあるの?   悩む男性ブログの独自性ってどうすればいいの?   悩む男性オリジナリティって一体なに?     こん ...

4

悩む男性ブログの書き方がわかりません、どうすれば良い記事が書けるようになるんでしょうか   悩む女性ブログの構成ってどのようにづればいいいですか?   悩む男性どのように書けば読ま ...

-SEO・アフィリエイト

© 2021 MURO BLOG Powered by AFFINGER5