SEO・アフィリエイト

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

 

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

 

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

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

 

 

TablePressで表を作ると・・・

 

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

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

 

 

 

 

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

 

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

 

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

 

 

そこで、セレクタを詳細に指定するか、「!important」を付加して優先度を上げる工夫が必要です。次の例では「!important」を指定しています。

 

 

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

これにより、すべてのセルに枠線が表示されるようになります。

 

枠線の作り方

 

めちゃくちゃ簡単です。

 

step
1
TablePressを開く

 

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

 

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

 

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

 

TablePress枠線作り:まとめ

 

TablePressのプラグインはかなり便利なので他にもリンクを入れれたり、列を増やしたり消したりも簡単です。表じたいがコードで記事に入れれたりするのが便利ですね。

マイナビ

  • この記事を書いた人
  • 最新記事
アバター

ムロ

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

-SEO・アフィリエイト

© 2020 MURO BLOG Powered by AFFINGER5