Simplicityのtableタグ関連スタイルシートをカスタマイズ。

前回の記事では、無料日本語ワードプレステーマのSimplicity導入で、当サイト管理人が行った設定についてまとめてみました。

※ くわしいことは過去記事「Simplicity導入で行った設定。」を参照してみてください。

Simplicityを当サイトに導入してまだ間もないので、空いた時間にスタイルシート(CSS)をイジっては、Simplicityを自分好みにカスタマイズしています。

で、先日少し気になったのが、Simplicityのデフォルトのtable(表組)のデザイン。

デフォルトでは、tableの横幅が記事(コンテンツ)部分の横幅よりもちょっとせまく、中の文字もわりとサイズが大きく、かつ、セル内の余白がせまくてすこし窮屈な印象(私には…)。

table-before

そこで、tableタグ関連のスタイルシート(CSS)を最小限カスタマイズしてみました。

その結果はこちら。

実際の見た目は、当サイトの記事「ワードプレス初心者のためのレンタルサーバーの選び方」で確認してみてください。

table-after

どうでしょうか?

少しメタボな感じのtable(表組)になってしまったかもしれません(笑)。

HTMLとスタイルシート(CSS)の基礎が分かっている方には何てことないカスタマイズですが、私同様、Simplicityのtableの見た目を変えたいと思っている方もいらっしゃるかもしれないので、コードをのせてみます。

上記のコードをコピーして、WordPress管理画面の「外観」→「テーマの編集」をクリックすると表示される「スタイルシート(style.css)」の一番下を何度か改行してすき間を作り、コピーしたコードをペーストして「ファイルを更新」ボタンをクリックすれば、Simplicityの表組(table)の見た目が変わるはずです。

theme-paste

ただし、Simplicityを最新バージョンに更新するとなくなってしまうので、また同じようにコピペしなければいけません。

常にSimplicityを最新版に更新しておきたい方は、WordPressの子テーマ機能を利用することをおすすめします。

子テーマ機能を利用すると、利用テーマを最新版に更新しても、カスタマイズしたスタイルシートはそのまま残ります。

本当は、子テーマは自分で作成しなければならないものですが、ありがたいことに、Simplicityの子テーマも配布されているので、ダウンロードしてテーマと同じようにインストールすれば、即使えるようになります。

子テーマは、「無印」というヤツをダウンロードしてください。

simplicity-child-theme

インストール方法は、Simplicity公式サイトの記事「Simplicityの子テーマをインストールする方法」に説明されています。

子テーマ(無印)をインストールしたら、さきほどと同じように、WordPress管理画面の「外観」→「テーマの編集」をクリックすると表示される「スタイルシート(style.css)」の、「/* Simplicity子テーマ用のスタイルを書く */」と書かれている部分より下に、コードをコピペしてください。

child-theme-paste

コードの数字部分を変更することで、Simplicityのtableをさらに自分好みに変更することもできます。

「font-size: 15px;」の15の数字を増減すると、表組の文字サイズが変わります。

「padding:10px 10px;」の最初の10pxの10の数字を増減すると、セル内の垂直方向の余白が変わりますし、次の10pxの10の数字を増減すると、セル内の水平方向の余白が変わります。

数字をいろいろと変えて、自分好みの表組(table)にしてみてください。

end.

  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。