超簡単にワードプレスのテーブルデザインテンプレートを作成する方法

こんにちは! るーしーです。

今回は「超簡単にWordPress(ワードプレス)のテーブルデザインテンプレートを作成する方法」についてです。

一言でいうと「style.css(テーマのスタイルシート)にテーブルデザインの着せ替え素材を作成」します。

着せ替え素材を使いたい時はWordPress(ワードプレス)のテキストエディタで本文内(HTML内)へ「着せ替えを使う！！」と書いてあげるだけ。

WordPress(ワードプレス)のテーマでテーブルデザインはある程度されていますが、

「もう少しデザインを変えたい」

「このテーブルだけデザインを変えたい」

という時ってありませんか？

そんな時に着せ替え素材を作っておけば適用させたいテーブルにだけデザイン変更を設定する事が出来ます。

全てのテーブルデザインを変えてしまうわけでは無い所が今回のポイントです。

勿論【初心者向け】で簡単に出来ますので敬遠せずに最後まで見てくださいね。

!!注意!!
実行前にCSSファイル(使用テーマのstyle.css)のバックアップを必ず行ってください。

また、レイアウトが崩れてしまった等の結果についても自己責任でお願い致します。

 

テーブルとは

HTMLのtableタグで囲まれた部分がテーブルという表組みとして画面に表示されます。

一覧表等を作成する場合は便利ですがHTMLを書くのが少々大変です。

⇒HMTL?CSS?という方はこちら

このように項目、行、列ごとにHTMLのタグが必要になるので記述も多くなってしまいます。

 

どうやってテーブルデザインの着せ替えを作るの？

CSS(使用テーマのstyle.css)に着せ替えの定義(目印：クラスという、及びデザイン)を施します。

その後、WordPress(ワードプレス)のテキストエディタでデザインを変えたいtable(テーブル)タグに着せ替えの目印(クラス)をつけます。

そうする事で、目印(クラス)を付けたtable(テーブル)タグ個所だけデザインを変えられます。

以前、「pタグに囲まれたフォント全てのサイズ、行間、文字間設定を変更する」記事を紹介しました。

やり方はほぼ同じでstyle.cssに着せ替えの定義をします。

⇒「pタグに囲まれたフォント全てのサイズ、行間、文字間設定を変更する」の詳細はこちら

少し実物を見てみましょう。

 

通常のテーブルデザイン

画面表示上はこのようになっています。ではソースはどうでしょう。

沢山書いてありますがtable(テーブル)タグがある事が確認できればOKです。

通常のテーブルデザインはこのようになっている事が確認できました。

 

着せ替えのテーブルデザイン

見た目がガラッと変わりますね。ソースはこうです。

行頭の背景色を変更し、各行を交互に背景色を変えています。

その目印に紐づいた着せ替えの定義をstyle.cssでしていますので定義を見てみましょう。

このように定義されています。

「l-stripe-tbl」というのが着せ替えの目印(クラス)名です。
※「lateral stripe table」= 「横縞模様のテーブル」を短く表記

style.cssで目印(クラス)名と目印(クラス)に対してのデザインが定義されており、HTMLのtable(テーブル)タグに目印(クラス)が付与された場合定義されたデザインが施される仕組みです。

仕組みとしては以上です。

 

次からは実際に着せ替え(目印(クラス))を作成してテーブルに付与してみます。

やり方は以前紹介した「WordPress(ワードプレス)のデフォルトフォントサイズを簡単に変更する方法」と同じで、style.cssの記述を追加するだけです。

まだ見ていない方や「CSSってなに？」という方は一度記事をご欄になってください。

【参考】
⇒WordPress(ワードプレス)のデフォルトフォントサイズを簡単に変更する方法

WordPress(ワードプレス)のデフォルトフォントサイズを簡単に変更する方法

 

テーブルデザインの着せ替え作成手順

 

前提

全ての方が私と同じテーブル表示になるとは限りません

使っているWordPress(ワードプレス)のテーマによってCSSの定義が異なるからです。

表示が思うように変わらない場合は初期設定に戻してください。

また、作業結果は自己責任でお願いします。

 

現在使用しているテーマのstyle.cssの内容をバックアップする

作業ミスなどで問題が発生した際に作業前の状態へ戻す事が出来るように現時点のstye.cssのバックアップを取ります。

最初にこちらの記事にある「現在使用しているテーマのstyle.cssの内容をバックアップする」の手順１～９を実行します。

※別ウィンドウで開きます

 

現在使用しているテーマのstyle.cssを編集する

１：WordPress(ワードプレス)の管理画面にログイン

http://(ドメイン)/wp-admin

２：「外観」→「テーマの編集」をクリック

３：「編集するテーマを選択」に現在使用しているテーマを選択

４：「スタイルシート(style.css)」を選択

５：「選択したファイルの内容」の最下行に下記の記述を貼り付け

↑一番上の行2018/02/03という表示は日付なので調整してください。

この記述の意味としては、

「l-stripe-tbl」という着せ替え素材(目印名(クラス名)及び定義)を作る

内容
・テーブルの奇数行(1行目以外)
背景色：薄い水色

・テーブルの1行目
背景色：水色
フォント色：白

という意味になります。

好みに応じて数値は変えてください。

６：エラー表示がない事を確認

エラー表示がある場合は何かしら入力に不備があるので修正する必要があります。

修正不能になった場合は保存せずに画面表示を変えて変更を破棄しましょう。

再度開きなおせば修正前の状態になっています。

７：「ファイルを更新」をクリック

「ファイルの編集に成功しました。」と表示されれば完了です。

８：保存完了したstyle.cssのテキスト全文コピー

保存完了したstyle.cssの枠内を一度クリックし、

「コントロール + A」で全選択

「コントロール + C」でコピー

９：デスクトップにテキストファイルを作成する

ファイル名は「現在この内容を使っている」という事が分かるように、「【20180203使用中】スタイルシート.txt」という具合にしましょう。

※.txtは拡張子といいPCの設定次第では表示されません。その場合は気にしないでOKです。

１０：作成したテキストファイルを開く

１１：開いたテキストファイルに先手順８でコピーした内容を貼り付け

１２：ファイルを保存して閉じる

このファイルが現在使用しているstyle.cssのバックアップです。

テーマを最新バージョンに更新すると追記した分が全て無くなるのでバージョンアップしたら再度追記しましょう。

以上で着せ替え素材の作成(CSS(style.css)側の定義)は完了です。

 

テーブルデザインが変わったか確認

着せ替え素材の作成(CSS(style.css)側の定義)は完了しました。

実際にtable(テーブル)に目印(クラス)を付けて着せ替えしてみましょう。

着せ替えしたいテーブルに目印(クラス)を付ける

WordPress(ワードプレス)のテキストエディタを開き、着せ替えしたいテーブルのtableタグに目印(クラス)を付与します。

では実際に着せ替えの目印(クラス)を付けたtable(テーブル)と付けていないテーブルを見てみましょう。

 

着せ替えありのテーブル表示

デザインが変わりましたね！ソースも見てみましょう。

table(テーブル)タグに着せ替えの目印(クラス)が付いています。

着せ替えなしのテーブル表示

こちらはWordPress(ワードプレス)のテーマが設定している定義だけが効いている状態です。

ソースも見てみます。

table(テーブル)タグに着せ替えの目印(クラス)が付いていませんね。

 

想定通り着せ替えの目印(クラス)を付けたtable(テーブル)だけデザインが変更された事を確認出来ましたので作業完了です。

お疲れ様でした！！

 

まとめ

いかがでしたか？

このように着せ替え(目印：クラス)を作っておけば特定の個所だけにデザインの設定を適用させる事が出来ます。

例えば縦縞と横縞のテーブル着せ替えを作っておき、作成したテーブルによってデザインを変えるなんてこともできます。

使いこなせれば色んな事に応用が利きますね。

また、やり方のお話しになりますが今回CSSで設定した装飾を直接HTMLに記述する事もできます。

しかしそれはやるべきではありません。

「HTMLで構造を定義しデザインはCSSに任せる」

というルールがありますし、分けた方がソースもすっきりし可読性も高くなるからです。

奥が深くまだまだ私も触る程度しか出来ませんが、これからも役立つ情報を紹介していきますのでまたこのブログを見に来てください。

スポンサーリンク