こんにちは。きみーです。
ホームページもブログも色って大事ですよね。
色ひとつで雰囲気がガラッと変わっちゃうし、今回紹介するような表も折角キレイに表はまとまっていても、色がサイトにあっていないと浮いてしまいますよね～(´д⊂)
前回の記事ではワードプレスの表作成プラグイン「Easy Pricing Tables」の操作方法を紹介しました。
【初心者でも簡単!】ワードプレスのお洒落な表の作り方：Easy Pricing Tables使い方
今回は、さらに応用で表の色のカスタマイズ方法を紹介していこうと思います。
下の表が前回までのデフォルトの色です。
これはこれでシンプルで好きだけど、全体的に色を変えるとこんなにも雰囲気が変わります。
↓↓↓↓↓
「BIGイベント」に色が付きより目立つようになり、全体的に女性的な印象の表ですよね。
こんな感じに自由にカスタマイズする方法をご紹介していきます。
ぜひ見てみてくださいね。
【コピペＯＫ!】ワードプレス表の作り方：色カスタマイズ方法
では、早速デフォルトの色から自分好みの色に変更する手順を紹介していきたいと思います。
「Easy Pricing Tables」色カスタマイズの設定場所
まずおさらいも含めて、どこで設定するかの説明です。
新規作成または既存の表の編集から管理画面を開きます。
「Content」と「Design」と２つタブがある内の「Design」タブを押して出てくるメニュー画面の「Custom CSS」になります。
スポンサーリンク
色カスタマイズの手順
色の変更はとても簡単です。
/* おすすめ ：BIGイベントの所*/
div.ptp-most-popular{
background-color: #ff4500;
color: #FFD700;
}
/* 見出し(1) イベント名の所*/
div.ptp-plan{
background-color: #FF9999;
color: #6d003e;
}
/* 見出し(2)日付の所 */
div.ptp-price{
background-color: #FFE4E1;
color: #6d003e;
font-weight: bold;
}
/* 詳細情報 */
div.ptp-bullet-item{
background-color: #FFFAF0;
color: #666600;
}
/* リンクボタン部分 */
div.ptp-cta{
background-color: #FFE4B5;
}
～～～～↑ここから上をコピペ↑～～～～
これで、一先ずプレビューで確認してみると、下の画像と同じ表の色・文字の色に変更されたはず！
※リンクボタン色は「Button Colors」メニューでの設定になります。詳しくはこちら
でも、これではきっとあなたの好みの色の表じゃないと思うので(;・∀・)
これをベースにカスタマイズを進めましょう～♪
要領はとても簡単です。
コピペしてもらった内容はフルカスタマイズ仕様に作成してあります。
なので、必要のないものは消して、変更したい色があったら希望の色番号に書き換えてあげるだけ！
見方としてはこんな感じ～～～☆
こんな感じで項目ごとに色を指定をしています。
- background-color:・・・表の背景の色
- color:・・・文字の色
- font-weight: bold;・・・太文字にする
例えば、「BIGイベント」の所の、文字の色だけ変えたい場合はこれ↓だけを「Custom CSS」に入力すればOKです。
～～～～～～～～～～～～～～～～～～～～
/* おすすめ ：BIGイベントの所*/
div.ptp-most-popular{
color: #FFD700;
}
～～～～～～～～～～～～～～～～～～～～
色番号の調べ方
色番号についても説明していきます。
説明って程のものは何も無いですが(;’∀’)
どうやって色番号を調べるかを解説していきますね。
色番号はさっきの設定の説明にも出てきたように「#」から始まる番号です。
この番号でどんな色かを表します。
ホワイトなら「#ffffff」
ブラックなら「#000000」
という感じです。
まずは色番号を知る方法①
リンクボタンの色指定のところから調べる
これは前回の記事でも紹介したリンクボタンの色変更メニューの「Button Colors」の中で、色を自由に選べます。
選ぶと色番号が自動で表示されるので、ここから色番号を知ることも可能です。
色番号を知る方法➁
色番号紹介サイトから調べる
ネットで「色番号」と検索すると色番号を紹介したサイトが数多く出てきます。
私のオススメを２サイト紹介しておきます☆
「原色大辞典」や「和色大辞典」「パステルカラー」などいくつもの色パターンで紹介されて色を選ぶのが楽しいサイトです。
「HTMLカラーピッカー」ではリンクボタンの色指定同じような操作方法で希望の色を探すことが可能です。
表の中の文字をスッキリ・見やすく：改行の仕方
次にさらに表を見やすくする方法として、改行の仕方を説明します。
下の表を見てもらうと、イベント名がとても長く、レスポンシブ対応で自動改行された結果、変な位置で改行され見た目がちょっと微妙です(´-ω-`)
レスポンシブ対応なので画面サイズや見ている人のPC環境により変わってくるので改行のしすぎっも考えものですが、この場合は最初の【千葉】で改行するのが見やすそうなので、改行してみましょう♪
改行の方法も簡単です(ﾟ∀ﾟ)
改行したい位置に<br>を入れるだけ☆
下の画像が改行を反映したプレビュー画像です。
改行はイベント名の部分・開催日・詳細・リンクボタンすべてに対応可能です。
改行する場合は、プレビューで確認をして、画面のサイズを変えてみるなどして、見え方を確認しながら進めると良いでしょう♪
まとめ
如何でしたでしょうか？
今回は表作成の応用編で色の変更について解説しました。
あなたの希望のカラーに仕上がりましたか？( ·∀·)
以下まとめです。
＜表の色のカスタマイズのまとめ＞
- 設定は「Design」メニュー画面の「Custom CSS」から行う
- 色の変更は必要な設定をコピペでOK
- 色番号はネットで簡単に調べられる
＜改行についてのまとめ＞
- 「Content」画面から行う
- 改行したい位置に<br>を挿入するだけ
- プレビューで見え方を確認しながら進める
- 改行のしすぎはNG
表にすることで、情報をスッキリ見やすくでき、さらに色を変更することであなたのブログの雰囲気に馴染ませることが可能です。
是非、あなたならではの表カラーを作ってみて下さいね。
それでは、またです～( ´ ▽ ` )ﾉ
コメント