賢威6.1のテーブルタグのカスタマイズ方法
今回は賢威の「design.css」を使ってテーブルタグをカスタマイズする方法を解説します。単にテーブルタグで表を作る方法はこちらの記事（賢威のテーブルタグで表を作る方法）を参考にしてください。
↓ 賢威のCSSをカスタマイズして作ってみたテーブル ↓
| 賢威6.1の特徴 | |
|---|---|
| レスポンシブ対応 | 賢威6.1の大きな特徴は遂にレスポンシブウェブデザインに対応したことです。これによりPCだけでなく、スマホやタブレット端末からのアクセス があった場合でも、それに応じて自動で最適化したページを表示できます。 |
| デザイン性 | デザインは賢威5.0のときから定評がありましたが、6.0では最先端の流行の平面的なデザインになりました。またどんなジャンルのサイトにもあう飽きのこないデザイン、カスタマイズしやすいデザインに仕上がっています。 |
| カスタマイズ性 | デザインの優れた有料テンプレートというのは他にもありますが、賢威ほどCSSが綺麗に整理されていて誰でも簡単にカスタマイズできるテンプレートは他にないと思います。誰でも簡単にプロ並みのデザインが作れます。 |
| SEO効果 | 賢威の最大の特徴が「SEO効果」です。開発者が数多くの執筆もしている有名なSEOコンサルタントということもあり、他テンプレートと比べても賢威は明らかに内部SEO対策に強いソースコードで作られています。 |
| カラム数の変更 | 賢威6.1で実現されたのがページごとのカラム数の変更です。１ページごとに３カラム、２カラム、１カラムの設定が可能です。これが出来るWordPressテンプレートは他にありません。 |
賢威6.0ではこのような、１行ごとに色をしましまに設定することが簡単にできます。
これは賢威ではただテーブルを作るだけで、自動で「奇数行」と「偶数行」に違うクラス（「odd」と「even」）が割り当てられているからです。
なので、それぞれの偶数行と奇数行の「background-color（背景色）」を指定するだけで、一行ごとに色の違う表を作成できます。
まずは賢威のテーブルCSSをカスタマイズしていきます。管理画面の「外観―＞テーマ編集」から「design.css」を選択します。それから「テーブル」などのワードでブラウザ内検索をして以下のソースを探してください。
/*●テーブルタグ スタイル01*/
#main-contents table.table-style01 th,
#main-contents table.table-style01 td{
text-align: left;
vertical-align: top;
}
この真下に「テーブルタグ スタイル02」の記述を新しく作って追加していきます。
以下のソースをこの「テーブルタグ スタイル01」の真下に貼りつけてください。
/*●テーブルタグ スタイル02*/
#main-contents table.table-style02 th{
background:#492D7C;
color:#fff;
}
#main-contents table.table-style02 .even td{
background-color: #好きな色コード(奇数行);
}
#main-contents table.table-style02 .odd td{
background-color: #好きな色コード（偶数行）;
}
これをそのまま貼りつけて、それぞれ青文字のところの色を設定すれば、奇数行と偶数行で色の違うテーブルを作成することができます。
色コードがわからない場合には、色見本（例：原色大辞典WEBサイト）などから好きな色を探してみてください。
ここまででCSSの編集は終わりました。それでは実際に、ブログでこのテーブルを使うときはどうすればいいのか、というと、エディタに直接タグでテーブルを書く、というところまでは前回の「賢威のテーブルタグで表を作る方法（記事）」と全く同じです。
ただしそこで、「table」に以下のように「class」を指定してください。
<table class="table-style02">
（略）
</table>
これで普通のテーブルではなく、先ほど作成したテーブル（表）を表示させることが可能です。
ぜひ色々カスタマイズして使ってみてください。
以下の記事で賢威の特徴や魅力について詳しく解説していますので良かったらご覧ください。豪華な特典のプレゼントもあります。
賢威がアフィリエイターに選ばれる理由 当サイト限定の賢威の購入特典はこちら
最近のコメント