wordpress

wordpressの子テーマで、親テーマのCSSをリセット(デフォルトに)する方法

最近当ブログに新テーマを導入し、デザインを大幅にチェンジいたしました。インストールしたテーマはGodiosというテーマです。

Godios. | 革新的な表示速度を実現可能にした無料Wordpressテーマ

このテーマは軽量な上にレスポンシブデザインでモバイルにも対応、プラグインとかも入れずに関連記事やソーシャルボタンを設置できるので非常におすすめのテーマです。もちろん無料

おおむねこのテーマで満足しているのですが、ひとつだけ不満な点がありまして、レスポンシブに対応させるために横幅の広いテーブルに関しては、スライドしないと全て表示されない仕様になっています。

table_horizontal_slide

上の写真のように横スライドバーが出現して、スライドさせないと全ての情報が表示されません。

自分の場合はデータベースのテーブルのサンプルを記事にすることが多く、それだと一覧性に欠けるのでちょっとよろしく無い…という事で、テーブルだけデフォルトの表示に戻すことにしました。

子テーマを作成する

配布されているWordPressのテーマをカスタマイズする時は、基本的に子テーマを作成しカスタマイズしていきます。

詳しくはググって調べて欲しいのですが、子テーマというのは親のテーマの外観・機能をそっくり引き継いで(プログラマ的に言うと継承して)、必要なところのみを修正して実装する機能です。

これにより親テーマを直接いじらずにカスタマイズ出来ます。なので親テーマがアップデートされても、自分でカスタマイズした部分は影響を受けずに済むのです。

幸い、今回採用したGodiosには子テーマも標準で公開されているのでそれを使います。子テーマが配布されていないテーマを使う場合は自分で作成します。子テーマの作り方が分からない方は、ググって確認して下さい。

カスタマイズしたい要素のスタイルをデベロッパーツールで確認する

自分が改良したいHTMLの要素のスタイルを、ブラウザのデベロッパーツールで確認します。

Chromeの場合はF12でデベロッパーツールを開きます。

developper_tool

左上の矢印ボタンで要素を選択し、右側のペインで要素を確認します。要素全体をドラッグし反転してコピーすることも可能です。(下画像をクリックするとGIF動画で確認できます)

select_table

コピペしたスタイルを子テーマに貼り付けます。

CSSプロパティのデフォルト値を調べる

以下のスタイルをコピペしたとします。


#entry-content table {
    box-shadow: 0 0 5px #f0f0f0;
    display: inline-block;
    margin-top: 15px;
    max-width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
}

このスタイルをデフォルトに戻すには、単純に各プロパティのデフォルト値を設定していけば良いだけです。自分の場合はHTML&CSS&JavaScript辞典 第7版を参照しましたが、CSSプロパティの初期値を調べるサイトもあるようです。

改良したスタイルは以下の通りです。


#entry-content table {
    box-shadow: 0 0 5px #f0f0f0;
    display: table;
    margin-top: 15px;
    max-width: none;
    overflow-x: visible;
    white-space: normal;
}

上記コードを、子テーマのcssに貼り付けアップロードします。

無事に全ての列が表示されました。