TwentySeventeenでテーブルの枠線を出す追加CSS

2017/02/04[公開]

 ここのブログのテーマをTwenty Seventeenに変更してから、TinyMCE Advancedプラグインでテキストエディタに出している、 テーブルボタンで作成した表の枠線が出てくれないのを変更するCSSです。一緒に、セルの文字数によらず均等幅表示にするのと、一番左の列の余白が無い部分も変更しました。これで、それ以前のTwenty Fifteenの時に作成した記事のテーブルが、いままで通り表示されるようになりました。

スポンサー リンク

追加CSS

 先に追加したCSSをご紹介します。子テーマのstyle.css、もしくは管理画面の外観→カスタマイズ→追加CSSに追記した内容です。

解説

 タネを明かせば、TwentySeventeenのstyle.cssとそれ以前のデフォルトテーマのstyle.cssを比較して、直したい部分だけ設定しました。

セルの枠線が出ない

  テーブルボタンを押して、表やセルのプロパティで枠線の色設定をしても、実際の投稿を表示してみると罫線なしのテーブルになってしまいます。

表やセルのプロパティで罫線の設定をしても
罫線が出ない表になる

  table,th,tdborder: 1px solid #d1d1d1; を指定すると、枠線が出るようになりました。色指定は、デフォルトの枠線の色なので薄いグレー系が良さそうです。これに、表やセルのプロパティで枠線の色を黒にしたのが下の表です。

表1 列1 列2 列3
line1 data1 data2 data3
line2 data4 data5 data6

長い文字でも枠を均等幅に

 セルのひとつに長い文字がある場合、セルの幅がそこだけ長くなります。 table-layout: fixed; とすることで、長い文字のセルも均等幅で表示されます。

twentyseventten標準のテーブル例

最初の列の内余白

 一番左の列の内余白がゼロのため、枠線と文字がくっ付いて見えてしまいます。 th:first-child,td:first-child に、その他のセルと同じ padding-left: 0.4em;を指定しました。

一番左の列だけ、余白が無い

これで下の表のように、いままでと同じテーブル表示になりました。

表2 列1 列2 列3
line1 data1 長い文字数のセルがあった場合 data3
line2 data4 data5 data6

新機能の追加CSS

 このブログのテーブル用のCSSの設定は以上です。今回は、WordPress4.7以降の新機能である、カスタマイザーの追加CSS機能を使いながら設定しました。ここに追記すれば、保存する前に見え方の変化を確認しながらテストできるので作業が捗りました。CSSが完成すれば、そのまま保存しても良いですし、子テーマのstyle.cssに追加しても、どちらでも好きな方を選べます。

スポンサー リンク

こちらの記事もどうぞ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です