表をカッコよくする
やりたいこと~WordPressで表を作成する~
WordPressで表を作りたい。
例えばcpなどのオプションを解説する時、左側に-aとか-iとか書いて、その右に内容(上書きする前に確認する、とか)を書いて一覧化してあると見やすい。
WordPressの”フォーマット”で表を選択すると確かに表を作成することはできる。
すると以下のようになる。
項目 | 詳細内容 |
test | テスト |
test | テスト |
test | テスト |
test | テスト |
問題点~表がカッコ悪い~
うーん、いまいちじゃね?
一番上の見出しの部分とかも真っ白だし・・・。
色付けたりストライプにしたりもできるのだがなんか安っぽい・・・。
項目 | 詳細内容 |
test | テスト |
test | テスト |
test | テスト |
test | テスト |
項目 | 詳細内容 |
---|---|
test | テスト |
test | テスト |
test | テスト |
test | テスト |
プラグイン~TablePress~
そこでソースコード表示と同じでこれもなんかプラグインあるだろうと思いググってみた。
TablePressというものがあった。
インストールは簡単。プラグイン追加で名前検索すれば出てくる。
TablePress→新しいテーブルを追加 で簡単にテーブルを作れる。
今回はtable6という名前で列は2、行は5とし、「このテーブルで以下のDataTables JavaScriptライブラリ機能を使用する:」のチェックを外した。※チェックを外しておかないと閲覧者が並び替えなどできてしまう為
その際にショートコードというものが表示されるのでそれをコピーしておく。
それ後、ブロック作成でウィジェットのショートコードを選び、そこにショートコードを張り付ける。
すると以下のようになる。
項目 | 詳細内容 |
---|---|
test | テスト |
test | テスト |
test | テスト |
test | テスト |
補足
実はちょっとカスタムCSSをいじっている。
でないとこのように表示されない。
.tablepress thead th { background-color: #7d7d7d; color: #FFF; border: solid 1px #ccc; } .tablepress td.column-1 { font-size: 1em; padding: 10px; vertical-align: middle; border-bottom: 1px solid #ccc; background: #afafb0; } .tablepress td { font-size: .8em; border: solid 1px #ccc; }
色とかは好みに合わせて変えてよいだろう。
ただ、この書き方だと全てのテーブルに適用されてしまうので個別に変える場合には以下のように記述する。
.tablepress-id-6 .row-2 { color: red; }
詳しく知りたい方はググってください。