WordPress(ワードプレス) ホームページ

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

更新日:

タイトル

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

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

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

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

 

テーブルとは

テーブルについて

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

テーブル

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

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

テーブル(HTML)

このように項目、行、列ごとに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の内容をバックアップする」の手順1~9を実行します。

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

 

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

CSS編集

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

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

2:「外観」→「テーマの編集」をクリック

外観

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

現在のテーマ

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

スタイルシート選択

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

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

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

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

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

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

という意味になります。

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

画面

6:エラー表示がない事を確認

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

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

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

エラー画面

7:「ファイルを更新」をクリック

更新クリック

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

更新成功

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

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

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

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

全選択コピー

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

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

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

作成したテキストファイル

10:作成したテキストファイルを開く

開いたテキストファイル

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

貼り付け画面

12:ファイルを保存して閉じる

保存して閉じる

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

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

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

 

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

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

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

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

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

tableタグ着せ替え付与

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

 

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

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

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

着せ替えありテーブルのソース

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

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

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

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

ソースも見てみます。

着せ替えなしのテーブルソース

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

 

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

お疲れ様でした!!

 

まとめ

いかがでしたか?

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

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

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

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

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

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

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

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

るーしー
ではまた!

スポンサーリンク



膠原病(こうげんびょう)にかかった(かもしれない)時にすべき事

トピック
「膠原病(こうげんびょう)にかかった(かもしれない)」
と分かった時、自分が何をどうするべきか分からず途方にくれました。 同じような心配をお持ちの方はこの記事を見てください。 その時に私がした事を全てまとめました。

膠原病(こうげんびょう)にかかった(かもしれない)時にすべき事

  1. (検査・治療)入院に備える
  2. 膠原病(こうげんびょう)であると確定させる(確定していない場合)
  3. 医師に「診断書(臨床個人調査票)」を記入してもらう
  4. 【確定診断後】(指定難病の)医療費助成制度に申請する
  5. 【確定診断後】自治体の福祉制度(給付金など)の申請をする
  6. 【確定診断後】障害年金が受給できる場合は申請をする
  7. 【確定診断後】生活費が工面できない場合は生活保護の申請をする
上記の内容を出来る限り詳細にまとめています。

膠原病(こうげんびょう)にかかった(かもしれない)時にすべき事を確認する

-WordPress(ワードプレス), ホームページ

Copyright© 膠原病でした , 2018 All Rights Reserved.