こんな悩みにお答えします。
この記事を書いている人はこんな人
ムロです。ブログを始めて１年（２０１９年６月）ぐらいで、４つのブログを運営しています。
８ヶ月で収益化しました最高月収は25万で、アベレージは20万ぐらいです。
PVは大体３万PVぐらいですね。ツイッターは(@hittky1114)
こんな方におすすめ
- TablePressで表を綺麗に作りたい
- 枠線を作りたい、コピペOK
- 表を作り、記事を見やすくする
TablePressは便利なプラグインなので表を作るとボタン１つで記事に入れることができます。
比較サイトなどを作る時に表で分けて表示できるよにするとみやすく出来上がります。
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
1TablePressを開く
step
2プラグインのオプション設定に
step
３CSSにプログラミングコードをコピペする
step
4保存してプレビューで完成
テーブルを装飾する方法（色を入れる）
テーブルの装飾はCSSで行います。
色を変える。
command
background-color: #ffe5e5 !important; /* 背景色の指定 */
color: #ff0000 !important; /* 文字色の指定 */
これをコピペしてもOK
background-color: #ffe5e5が色指定になります。
参考
こんな感じになりました。
| 111 | 222 | 333 | 444 | |
|---|---|---|---|---|
| 金額 | 基準値1 | 基準値2 | 基準値3 | 基準値4 |
| 期間 | 基準値11 | 基準値12 | 基準値13 | 基準値14 |
| 本数 | 基準値121 | 基準値122 | 基準値123 | 基準値124 |
【まとめ】TablePress枠線を作るやり方紹介
TablePressのプラグインはかなり便利なので他にもリンクを入れれたり、列を増やしたり消したりも簡単です。
表にコードを入れ記事にするのが便利ですね。
コチラもおすすめです
＞＞【2021年から】跳ねるブログのおすすめアフィリエイトジャンルを紹介【初心者でも月10万稼げる】
＞＞【ブログ初心者向け】正しいアフィリエイト記事を書いて収益をあげるやり方【読めば収益化ができる】
＞＞【これだけでOK】アフィリエイトASPのおすすめ完全版！【初心者OK】
