AFFINGER6のTable(表)の設定方法!

ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

AFFINGER6では、カスタマイザーで表のスタイル管理ができるようになっています。

大きくは、色や背景色を設定して、自分のオリジナルの表をあらかじめ作っておくというやり方です。ただ、それ以外の色を使いたい場合もありますので、2種類のやり方をご紹介します。

 

AFFINGER6のtable(表)の設定方法をお伝えしていきます。

 

ブロガーが欲しい機能が満載のワードプレステーマ「AFFINGER6/ACTION」
AFFINGER6(アフィンガー6)の公式ページを確認する。 

※今なら、5大購入特典をお付けしています!

※ AFFINGER6(ACTION)は AFFINGER5(WING)の後継版です。
⇒ 違いについてはコチラの記事でどうぞ。

 

AFFINGER6のtable(表)のカスタマイザーでできること

AFFINGER6のカスタマイザーでできることは、table(表)を構成している基本の部分の色設定です。

  • 表のボーダー色
  • 偶数行のセルの色
  • 縦一列目の背景色
  • 縦一列目の文字色
  • 横一列目を太字にする
  • 横一列目(tr)及びヘッダセル(th)の背景色
  • 横一列目(tr)及びヘッダセル(th)の文字色
  • 横一列目(tr)及びヘッダセル(th)を太字にする

 

AFFINGER6でtable(表)の色を設定してみる

あらかじめAFFINGER6のカスタマイザーで色設定をしておくと、投稿や固定ページで表を作る場合に定型として保存しておくことができます。

例えば以下のような設定にしてみます。

  • 表のボーダー色・・・#8b968d
  • 偶数行のセルの色・・・#fff1cf
  • 縦一列目の背景色・・・#f8e58c
  • 縦一列目の文字色・・・#928c36
  • 縦一列目を太字にする

上記の通りに設定をするとこんな表になります。

 

色も上手に合わせておくと、いつもこの色合いが出てくるのでブログのイメージが統一されます。ただひとつ難点なのは、作っておくとすぐに使える物の、エディター上での色変更等調整ができません。

 

速報!
芸大卒のなつが作ったデザインのマニュアルも特典に追加しました。


⇒ 詳しくはコチラをご覧ください。

※ヘッダーの画像は、イラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。

 

AFFINGER6のtable(表)の設定方法

AFFINGER6でのtable(表)の設定を入力していきます。色などは調整しながら作っていけばいいと思います。AFFINGER6の表設定で優れているのは、「偶数行のセルの色設定」ができることです。

 

▼ 外観 ⇒ カスタマイズ ⇒ オプション(その他)⇒ table(表)

 

この部分で、変更したい色を設定していきます。

 

↓ 配色に迷ったらこの記事を参考にしてみてください。

関連記事

ブログ運営半年で月20万超の元サラリーマンブロガーなつです。Web用のカラーパターンはたくさんありますが、ブログ全体に適用すると「あれ・・・ちょっと違う」となることも。 なつ見た目にきれいでも合[…]

 

teble(表)設定の色見本一覧

AFFINGER6の色は複数設定できますが、ここではいろんな色見本を作っていきますので、もしよろしければご活用ください。ポイントとしては背景に「原色に近い色」を持ってくるとブログの記事内で浮いてしまうので注意です。

 

赤系
黄色系
緑系

赤系の表

  • 表のボーダー色・・・#a99e93
  • 偶数行のセルの色・・・#fde8d0
  • 縦一列目の背景色・・・#f6bfbc
  • 横一列目(tr)及びヘッダセル(th)の背景色・・・#e9546b

黄色系の表

  • 表のボーダー色・・・#a99e93
  • 偶数行のセルの色・・・#f2f2b0
  • 縦一列目の背景色・・・#fcd575
  • 横一列目(tr)及びヘッダセル(th)の背景色・・・#fcc800

緑系の表

  • 表のボーダー色・・・#a99e93
  • 偶数行のセルの色・・・#cee4ae
  • 縦一列目の背景色・・・#aacf53
  • 横一列目(tr)及びヘッダセル(th)の背景色・・・#00a497

 

 

ブロガーが欲しい機能が満載のワードプレステーマ「AFFINGER6/ACTION」
AFFINGER6(アフィンガー)の公式ページを確認する
※今なら、5大購入特典をお付けしています!
関連記事

ブログ運営半年で月20万超の元サラリーマンブロガーなつです。無料テーマで有名なSTINGERの流れを受け継ぐAFFINGER6(アフィンガー)。基本デザインがシンプルで使いやすくさらにセンスの良い「着せ替え」も用意されていてブログを[…]

※ AFFINGER6(ACTION)は AFFINGER5(WING)の後継版です。⇒ 違いについてはコチラの記事でどうぞ。

WordPressでのtable(表)の作り方

次に、AFFINGER6のtable(表)設定ではなく一般のtable(表)の作り方をお伝えします。どのWordpressテーマでもほぼ同じ操作ですので覚えておくと便利です。

 

table(表)の作成開始

 

左上の「+」マークをクリックすると以下のような画面となります。テーブルというアイコンにカーソルを持っていくと見本のテーブルがでてきます。スタイルは個別に変更可能なので、そのままクリックします。

 

tableのカラムと行の指定

カラム数と行の設定をします。もし、このままクリックしても後で修正可能です。

 

WordPressでのtable(表)のカスタマイズ

エディターに票を挿入したら、次に表のスタイルや色の調整をしていきます。

 

table(表)のスタイルの調整

ちょっとしたコツなのですが、表にカーソルを合わせてクリックしておくとブロックのエディターがでてきます。なにもしないと出てこず右側のスタイルも出てきませんので注意してください。

 

右側にスタイルや色調整の部分がでてきますので、好きなものを選んでください。

table(表)の色の調整

次にスクロールしていくと、色の調整できる部分があります。テキストと背景の色が指定できます。

上記の画像は、試しにグラデーションを背景にしてみた図です。

 

なつ
さすがにグラデーションは見づらいですね(笑)ただ、淡い色同士でやると綺麗なグラデーションになると思います。

 

訪問者に刺さるワードプレステーマ「AFFINGER6/ACTION」
AFFINGER6(アフィンガー6)の公式ページを確認する。

※今なら、5大購入特典をお付けしています!

※ AFFINGER6(ACTION)は AFFINGER5(WING)の後継版です。
⇒ 違いについてはコチラの記事でどうぞ。

表の設定

これで表を挿入して、テキストを入力すると幅が変わったりして使いづらかったりします。そこで、表の設定で幅を固定したりヘッダーセクションを追加したりしてスタイルの調整が可能です。

 

 

テキストの色と背景の色

表に差し込んだテキストの色とその背景の色の調整が可能です。

 

表に入力したテキストを反転させておき、右のテキストの色と背景の色を選びます。

 

AFFINGER6のtable(表)をクラッシック版で作る

ブロックエディターでtable(表)を作るのは慣れてないから難しいという方は、ブロックからクラッシック版を指定して作ることができます。

左上の「+」をクリックすると展開しますのでその中の「クラッシック」をクリックします。するとエディターの中にブロックが配置されます、表のどこかをクリックするとクラッシックエディターがでてきます。

 

このテーブルのマークの部分をクリックすると従来のテーブルの作り方で作っていくことが可能です。

 

クラッシックからブロックへ変更も可能

例えば、先ほどのグラデーションなど追加したい時には、エディターをクラッシックからブロックに変更することもできます。

 

ブロックの上部にある「ブロックへ変換」をクリックすると、ブロックエディターに変化します。調整部分も同じように出てきますので、操作については同じです。

訪問者に刺さるワードプレステーマ「AFFINGER6/ACTION」
AFFINGER6(アフィンガー6)の公式ページを確認する。

※今なら、5大購入特典をお付けしています!

※ AFFINGER6(ACTION)は AFFINGER5(WING)の後継版です。
⇒ 違いについてはコチラの記事でどうぞ。

WordPressのtable(表)の基本操作  【クラッシック】

ブログを作っている方は表の作り方はご存じだと思いますが、一応基本操作だけお伝えしておきます。全体の枠色設定などもクラッシック版ならできますので重宝します。

 

カラム数と行数を選択

エディター上の「テーブル」をクリックし、カラム数と行数を選びます。10マスまでは作れますが足りない分はカスタマイズで追加していきます。

 

枠線と背景色の設定

エディターに挿入された表を反転させ、表のプロパティをクリックすると枠線や背景色などが調整できます。今回の設定は表全体の枠線と表全体の背景色設定となります。

 

 

表のプロパティが出てきたら「高度な設定」のタブを選び、枠線のスタイルと枠線の色、背景色を指定します。すべて入力が終われば「OK」をクリック。

 

 

ヘッダーセルの追加

表の1部をヘッダーセルに変更することもできます。

 

  • ヘッダーセルにしたい部分を反転させます。
  • テーブルのアイコンを押します。
  • セル ⇒ セルのプロパティ

 

 

セルの種類の部分を「ヘッダーセル」に変更します。さらに、ヘッダーセルに色を付けたい場合には「高度な設定」タブを開き背景色の設定をしOKをクリックします。

 

セルに色付けをする

特定のセルを目立たせるために色付けをすることもあるかと思います。そんな時の背景色の設定も同じようにして行います。

  • 背景色を付けたい部分を反転させる
  • テーブルのアイコンを押す
  • セル ⇒ セルのプロパティ
  • 高度な設定タブを開き色を指定

 

初心者だからこそWordpress有料テーマ を使うべき理由

無料テーマを使うことで時間の無駄遣いをしていませんか?

  • 思い通りのデザインにできない
  • なかなか稼げない
  • アクセス数が増えない

こんな悩みを抱えていませんか?

 

稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。

 

Wordpressの有料テーマができる5つのこと

  1. 検索上位を目指せる
  2. 見た目が綺麗でおしゃれになる
  3. 機能が豊富で出来ることが多い
  4. マニュアルなどのサポート
  5. 有名ブロガーも有料テーマを使っている

これまでにあげた5つの有料テーマの特徴を説明していきます。

1. 検索上位を目指せる

ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO(SearchEngine Optimizationの略)です。

 

  • 情報の信頼性
  • ユーザーへの役立つ情報であるか?
  • スマホ・PCなどでストレスなく使える

 

などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。

 

2. 見た目が無料テーマ以上に綺麗になる

シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。

有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。

 

出典:AFFINGER5(アフィンガー5)

 

3. 機能が豊富でできることが多い

今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。

4. マニュアルなどのサポート

なにかわからないことがあった場合、詳しく記載しているものがあるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。

5. 有名ブロガーも多数使用

稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。

 

もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。

カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。

おすすめ!WordPressテーマ
「ACTION(AFFINGER6)」

  • 高機能の最新テーマで大人気
  • デザイン変更でいろんな用途に使える
  • マニュアル完備
  • 各パーツがプロに作ってもらったみたいにアレンジ可能
  • バナーや囲い枠スライダーなど特殊なものが簡単に作れる。

 

※ AFFINGER6(ACTION)は AFFINGER5(WING)の後継版です。⇒ 違いについてはコチラの記事でどうぞ。