TOP資産サイト構築方法Tablepressの装飾方法(カスタムCSSと追加CSS)Tablepressの装飾方法(カスタムCSSと追加CSS)2019年2月15日784PV資産サイト構築方法WordPress自体で、表を作成するのは結構難しいですよね。表のデザインなど、HTMLやCSSなど知識が無いと、自分の思ったデザインの表を作ることができません。知識が無いけど綺麗な表が作りたい!という方にオススメなのがプラグインのTablepressです。使われている方もいるでしょう。そのままでも綺麗なTablepressですが、一手間を加えるだけでもっとオシャレに!見やすく!変身します。今回は、そんなテーブルの使い方と装飾の仕方について解説します。基本的な装飾はTablepressの表制作画面の下の部分からすることができます。メインで使う部分を具体的に見ていきましょう。内容ここで、表の一番上の行を見出しに、一番下の行をフッターに設定することができます。セルに背景色を自分でつけなくても見出しとフッターは色を変えてくれています。簡単に見やすく作れるので一番活用する機能でしょう。行の色を交互につけることにより、横への表の見易さが増します。これは標準でつけておくと、いいでしょう。セルの結合をした表だと交互にならない場合があるので、その時はチェックを外しましょう。3テーブル名の表示テーブルの上か下にテーブル名を表示させることができます。複数のテーブルを記事で使う場合はあると見栄えが良くなります。4追加のCSSクラスこの機能を今日はメインでご説明していきます。後ほど詳しく説明しますが、簡単にいうと自分で作ったテンプレデザインをここで指定して使います。数学でいう、代入のようなものです。Tablepressの具体的な装飾の仕方それでは、Tablepressの表の執筆画面ではできない、もっと凝った装飾の仕方について見ていきましょう。使うのはプラグインオプションの「カスタムCSS」です。ここにコードを打ち込むことによって装飾することができます。枠線をつけるTablepressのデフォルトの表は枠線がついていません。横方向へは見やすいものの表として見にくい時があります。そこで、自分でカスタムCSSに以下のようにコードを書きます。#ccc;}これで全ての表に枠線が挿入できました。指定した表にだけ枠線を入れる上記のやり方でカスタムCSSに書くと全ての表に枠線が入ってしまいます。それでも良い場合は上のコードでいいのですが、一部の表にだけ枠線を入れたい場合は表を指定して枠線を入れる必要があります。指定した表にだけ枠線を入れたい時には、「.tablepress」の後にテーブルIDを入れることにより、表を指定できます。#ccc;}枠線の種類、太さや色を変える枠線の種類は、「border-style:」の後ろで変えれます。」の後ろのpx変えましょう。枠線の色は「border-color:」の後の#の文字列によって変わります。#0000ff;}と、カスタムCSSに書くと...下のような表ができます。内容セルを塗りつぶす(background-color)指定のセルだけ塗りつぶすセルを塗りつぶす(背景色)場合はそのセルを指定し、色を指定することにより塗りつぶせます。#f1d5f2;}「row」が行、つまり上から何番目かを指定します。「column」が列、つまり左から何番目かを指定します。上のコードでは「上から2番目で左から3番目のセル」と「上から4番目と左から2番目のセル」を指定しています。その結果が下の表になります。指定の列や行を塗りつぶす行や列の場合は簡単んです。先ほどの応用を使い、「row」や「column」のどちらかだけ指定します。!important;}「column-2」つまり2列目だけを塗りつぶします。文字の色を変える(color)セルの塗りつぶしと同じく、文字の色を変えたいセルを指定します。その後「color:」コードを使い、色を決めています。red;}これは先ほどと同じく「上から2番目で左から3番目のセル」と「上から4番目と左から2番目のセル」を指定しています。「上から2番目で左から3番目のセル」と「上から4番目と左から2番目のセル」の文字が赤くなりました。文字のサイズを変更する(font-size)先ほどと同様、セルを指定します。その後「font-size」コードを使い文字サイズを変更します。30px;}これも先ほどと同じく「上から2番目で左から3番目のセル」と「上から4番目と左から2番目のセル」を指定しています。「上から2番目で左から3番目のセル」と「上から4番目と左から2番目のセル」の文字が大きくなりました。追加のCSSクラスを活用する!そもそも追加のCSSクラスとは何でしょうか?もし、あなたが下のようなレイアウトの表を大量に作るとします。1209,600t全く同じレイアウトですが、内容だけが違う表です。これは、カスタムCSSにこのように書いています。press-idだけ変えて2回書いています。同じレイアウトが3つ...4つ...100など越えると何回も同じCSSを繰り返し書くのはかなり大変な作業です。膨大な量のCSSのシートになってしまうと、探したいIDのコードがどこいあるのか分からなくてなってしまいます。この無駄な繰り返しを防止するのが追加のCSSクラスです。このレイアウトをテンプレートとして作り、好きな記事に反映させるためのものです。実際にやりながら詳しく見てみましょう。追加のCSSクラスの作り方まずは、自分で作りたいテンプレートの名前を決めます。なんでもいいのですが、ここでは「Table-sample1」にします。あとは、簡単です!今まで「tablepress-id-○」と書いていたところを自分の決めたテンプレートの名前に変えるだけです。することで、「Table-sample1」がこんなレイアウトだ!ということを定義できました。red;}こんな感じで、「tablepress-id-○」のところを自分で決めたレイアウトの名前、今回は「Table-sample1」に置き換えれたらOKです。次に、作ったレイアウトを反映させたい記事の追加のCSSクラスのところに自分の決めたレイアウトの名前を打ち込みます。今回は「Table-sample1」と入れてみます。すると、入れた記事になんと、そのレイアウトが反映されます。18,200tこの作ったレイアウトを他の記事にも入れることで、CSSを最初から書かなくても同じレイアウトの表が大量生産できます。このようなレイアウトを5つくらい作っておくとバリエーションが増え、とても便利です!まとめいかがでしたか?今回は、Tablepressの装飾の仕方の基本についてまとめました。今回、書いてあることがコンプリートできれば、幅広いく好きなレイアウトを作ることができます。理想のブログのために活用してみてください。外資系コンサルで働きながら、ネット副業で月給と同じ金額を稼いでいるサラリーマン。ネット副業を始めたキッカケは、額面で年収1,000万円を超えた時のこと。「これじゃあ生活が何も変わらん・・!アホらしい!!」と憤慨する。PC1台で自由に稼ぎながら生活している人間がいることを知り、これならば自分にもできるかもしれないと思い、副業でアフィリエイトを開始。初月は101円しか稼げずに惨敗するも、粘り強く続け、開始4ヵ月で月収45万円を達成する。ネットビジネスを実践する中で得たWEBマーケティングスキル、コピーライティングスキル、サイト収益化のスキルなどを活かして、オンラインサロンの運営を開始。「体系的に整理されたマニュアルが欲しい」といった声に応えるべく、ネットビジネス初心者のための無料教科書を制作。Lounge」の利用者が5,000名を突破し、現在もなお利用者が増え続けている。無料メルマガで配布をしているフリーラウンジでは、ネットビジネスを無料で学ぶことができる動画コンテンツが40本以上収録されています。教科書と動画が受け取れる無料メルマガ登録はこちらから↓↓↓メールアドレスお名前(名字)※入力内容をご確認ください。※数分以内にご入力されたメールアドレスにフリーラウンジの限定公開URLが届きます。受信できない場合には、念のため迷惑フォルダをご確認ください。記事が参考になったら"いいね!"Facebookで更新情報をお届け。ブログを作成していく中でレイアウトって大事ですよね。PM初めまして、こばみちと申します。ランキングから来ました。始めたばかりなので、出来上がった表を見ると、こうなるのかと思いますが、まだまだ覚えることは沢山有りそうですね。AMおはようございます。記事通りにすればできると思いました。ありがとうございます。訪問させていただきます。返信コメントをどうぞ返信をキャンセルする。公式LINE@LINEで繋がっていただけた方限定で、「アドセンス審査突破攻略」の動画講義をプレゼント中。※追加後に、何かメッセージをお送りください。yusukeflsd管理人:yusuke当サイトの管理人yusukeです。アクセンチュア新卒でブラック企業に入社してしまうも、起死回生の転職活動で、外資系経営コンサルティングの会社に転職を果たす。年収1,000万円を超えた頃から、サラリーマンをこのまま続けてても、良い暮らしとか一生ムリということに気づき、ネットビジネスを開始する。ウェブ系のビジネスに関しては完全に素人な所からスタートし、開始4ヶ月で月収45万円を達成。副業で稼げるようになったことで、本業がやらなくてはいけない事から、趣味として楽しむ事に変わる。あらゆる制約条件の無いビジネスをPC1台で実践できるノウハウを本サイトで紹介しています。