PR AFFINGER6 ブログ運営 ワードプレス

AFFINGER6で見栄えのいい表を作る方法を画像と動画で徹底解説!【初心者さん向け】

2023年9月13日

おすすめ記事一覧

AFFINGER6 ブログ運営

2024年7月18日

【ブログアフィリエイト即戦力8大特典あり!】AFFINGER6初心者さん向けレビューでおすすめポイントを確認!

ブログアフィリエイトを強力に後押しする8大独自特典付きAFFINGER6レビューを大公開!自身の経験をもとにSEO効果など具体例を挙げて初心さん向けに優しく解説しています!

ReadMore

ブログ運営

2024年7月18日

【お友達5000円以上割引】エックスサーバーで超お得にサーバー契約&ドメインを取得する方法を解説!

お友達紹介プログラムを利用してエックスサーバーを超お得な割引価格で契約する方法と独自ドメインを永久無料で取得する方法を画像を使って徹底解説!キャンペーン時にはお友達紹介プログラムの倍の報酬でさらにお得になるセルフバックの方法も合わせて解説!

ReadMore

ブログ運営 ワードプレス 悩み

2024年7月18日

【ブロガー100人アンケート】ブログの収益化は何記事・何か月で出来る?現実とノウハウを徹底分析!

収益化にかかる期間はどれくらい?何記事で出来るの?ブロガー100人アンケートの結果と実体験から徹底的に分析!

ReadMore

ブログ運営 ワードプレス

2024年7月18日

【初心者必見】ワードプレスの無料テーマと有料テーマ、メリット・デメリットを徹底解説

ワードプレスで作ったサイトの見た目をガラッと変える『テーマ』には有料と無料が存在。それぞれのメリット・デメリットについて初心者さん向けに分かりやすく徹底的に解説します。

ReadMore

ブログ運営 ワードプレス

2024年7月18日

【戦略】ブログの方向性(3つのWHAT)とキーワード選定方法

漠然とブログを始めてみたいと思っている方はどんなジャンルで記事を書いていこうかということがまだ定まっていないかもしれません。 かく言う私もブログを最初に始めた時は、とりあえず始めてみてなんでもいいから興味のあることを記事にしたり、買った商品のレビュー記事を書いていました。 そのようないわゆる『雑記ブログ』でも稼げるようにはなるのですが、ある程度ブログの方向性を決めておくと稼げるようになるまでの時間が早かったり最終的な収益額も多くなることがあります。 というわけで今回の記事ではブログの方向性を決めるための3 ...

ReadMore

ブログ運営

2024年7月18日

キーワードプランナーを無料で使う方法を画像と動画で徹底解説!【初心者必見】

キーワードプランナーを無料で使う方法を画像と動画を使って初心者さん向けに優しく詳しく解説!

ReadMore

字幕動画解説

ブログを運営しているみなさんは記事内に表を入れるなどの工夫をしているでしょうか。

説得力のある情報をブログの記事にのせることはSEO上も大切です。

きちんとしたを作ってユーザーに分かりやすく情報を伝える努力をすることをおすすめします。

そこで今回の記事ではAFFINGER6を使っているブログで見栄えのいい表を作る方法を画像と動画を使って初心者さん向けに優しく詳しく解説してみたいと思います。

解説ポイント

  • AFFINGER6ブログで表を作る準備
  • AFFINGER6ブログで見栄えの良い表を作る方法
  • TablePressは必要?
表なんてボクにはムズかしいかも…。
後輩ネコ
後輩ネコ
とのぽん
とのぽん
大丈夫!簡単に作れるから安心して!
最新情報も反映可能!AIで記事作成する方法教えます 作業時間7割削減! SEO対策済みの記事生成プロンプト付き!

準備

AFFINGER6で表を作る準備

  • プラグイン『Advanced Editor Tools』のインストール&有効化
  • クラシックブロックのツールバーの設定

AFFINGER6を作る準備として上記の作業をしていきます。

Advanced Editor Toolsのインストール&有効化

まずはAFFINGER6を提供しているONSPEEDさんでも公式に利用を推奨しているワードプレスプラグイン『Advanced Editor Tools』をインストール&有効化しましょう。

上の画像を見ながらプラグインを有効化してみてください。

クラシックブロックのツールバーの設定

続いてAdvanced Editor Toolsの設定からクラシックブロックのツールバーの設定をしていきます。

  • インストール済みプラグイン一覧のAdvanced Editor Toolsの『設定』をクリック
  • 『クラシック版の段落とクラシックブロックのツールバー』で、ツールバーに表のアイコン(テーブル)を追加

と操作しいきましょう。

元からツールバーにテーブルが表示されていれば設定の必要はありません。

テーブルをツールバーに追加したら『変更を保存』をクリックして設定を保存し、AFFINGER6で表を作る準備は完了です。

参考
【初心者】ワードプレスプラグイン『Advanced Editor Tools』の使い方を優しく解説【スクショ・動画】

皆さんはブログで記事を書く際に記事(文字)装飾を使っているで ...

続きを見る

見栄えの良い表を作る方法

表の作り方解説

  • 表の作り方
  • 表のカスタマイズ(外観を一括設定する方法)

ここからはいよいよ、AFFINGER6をテーマとして使っているブログで見栄えの良い表を作る方法を解説していきます。

『表の作り方』の項目では、基本的な表の作り方と記事内で(その場で)表をカスタマイズする方法を解説します。

また、『表のカスタマイズ』の項目では、あらかじめ表のデザインを一括で設定しておいて記事内で同一デザインの表を簡単に呼び出す方法を解説します。

時間がない人は先に『表のカスタマイズ』から見てもOK。

表の作り方

ここでは基本的な表の作り方と、記事内に設置した表をその場でカスタマイズしていく方法を解説していきます。

基本的な表の作り方

記事の新規作成画面に入ったら、

  • 段落ブロック右側にある『+』マークをクリック
  • よく使うブロック一覧からクラシックブロックを選択し記事内に挿入

します。

よく使うブロック一覧にクラシックブロックがない場合は検索バーに『クラシッブロック』と打ち込むか『すべて表示』から選択してくださいい。

クラシックブロックを挿入したら、

  • ツールバーにある『テーブル(表のマーク)』をクリック
  • ドロップダウンにある『テーブル』にカーソルを合わせた状態で右に表示されるマスから挿入したい表のサイズを決めてクリック

しましょう。

ここまでの操作で線だけのシンプルな表が挿入されます。

あとはセルをクリックして文字や数値を入力していけば表を作ることが可能です。

以下では文字装飾などによる表の体裁の整え方を簡単に見ていきます。

中央揃え

セル内に文字を入力すると始めは左揃えの状態になっています。

これを中央揃えにするには

  • 対象の文字が入力されたセルをクリックした状態でツールバーの『中央揃えボタン』をクリック

すればOK(文字入力前でも可)。

複数セルを左クリック長押し(ドラッグ)して範囲選択して範囲内のセルを一括で中央揃えすることも可能です。

文字装飾

AFFINGER6では記事内に挿入したクラシックブロックの『スタイル』ボタンから様々な文字装飾が行えます。

基本的に表の中の文字も、この『スタイル』を使って装飾可能となっています。

セル内の文字を選択して、ツールバーのスタイルから好みの文字装飾を施してみましょう

複数セルを範囲選択して一括で文字装飾を行うことも可能となっています(上の画像参照)。

他にもアニメーションなど様々なスタイルが使用できます。ちょっと目を引く表を作ることもできそうですね。

表のプロパティ設定

表のプロパティ設定は表の枠線や大きさなどの全体設定を行う機能です。

一般設定と高度な設定について使えそうな設定のみ解説していきます。

一般設定

表を記事内に挿入したら、

  • 表内のどこでもいいのでクリックして表を選択した状態にして
  • ツールバーの『テーブル(表のマーク)』をクリックし
  • ドロップダウンから『表のプロパティ』をクリック

しましょう。

一般設定タブをクリックしましょう。

ここでは表の幅(記事の幅に対する割合)や表の高さなどを一括で設定できます。

試しに表の高さを変更(画像にあるように300pxに)してみます。

表の高さが300pxに変更されました。

高度な設定

続いて表のプロパティの高度な設定について。

高度な設定では表の外枠の線のカスタマイズや枠線の色・表の背景色の一括設定が可能です。

まずは『高度な設定』タブをクリックしましょう。

Border style

試しに表の外枠線のスタイルをドットにしてみます。

『Border style』から『Dotted』を選択し、『OK』をクリックします。

やや分かりにくいですが上の画像のように表の外枠線がドット(点線)になりました。

スタイル・枠線の色・背景色は記事作成画面では反映されない場合があるので、その場合はプレビューで確認しながら作業してください。

枠線の色

枠線の色を変えてみましょう。

上の画像のように、カラーパレットから好みの色を選択して『OK』をクリックし、続けて『OK』をクリックします。

上の画像のように表の外枠線の色が変更されました。

スタイル・枠線の色・背景色は記事作成画面では反映されない場合があるので、その場合はプレビューで確認しながら作業してください。

背景色

表の背景色を変更してみましょう。

外枠線の色の時と同様に、

  • カラーパレットから好みの色を選択して『OK』をクリック
  • 続けて『OK』をクリック

します。

上の画像のように表の背景色が変更されました。

スタイル・枠線の色・背景色は記事作成画面では反映されない場合があるので、その場合はプレビューで確認しながら作業してください。

セルの設定

ここではのセルの結合・分割方法とプロパティ設定について見ていきます。

結合と分割

結合

  • 表内の隣り合う複数のセルをドラッグで範囲選択
  • ツールバーの『テーブル(表のマーク)』をクリック
  • ドロップダウンの『セル』にカーソルを合わせて右側に表示される『セルの結合』をクリック

すれば選択されたセルが結合されます(上の画像参照)。

分割

結合されたセルをクリックして選択した状態で、

  • ツールバーの『テーブル(表のマーク)』をクリック
  • ドロップダウンの『セル』にカーソルを合わせて右側に表示される『テーブルセルの分割』をクリック

することで結合されていたセルが分割されます。

あらかじめ文字や数値が入力されていたセルは元どおりにはなりません(上図参照)。

プロパティ設定

セルのプロパティではセルごとに幅や高さ枠線の色背景色などの詳細設定が可能です。

ここでは試しにセルの背景色を変更してみます。

  • 背景色を変更したいセルをクリックして選択
  • ツールバーの『テーブル』から『セル』⇒『セルのプロパティ』とクリック
  • 『高度な設定』タブをクリック
  • 『背景色』のカラーパレットで好みの色を選択して『OK』をクリック

しましょう。

行の設定

続いて、表の行の設定について。

行の上下挿入・削除・コピー・貼り付け、プロパティ設定(外観などの設定)が可能ですが。

ここでは例として上下挿入とプロパティ設定について解説します。

上下に挿入
  • 表内の設定したい行をクリックして選択
  • ツールバーの『テーブル(表のマーク)』をクリック
  • ドロップダウンの『行』にカーソルを合わせて、右側に表示された『行を上(または下)に挿入』をクリック

の操作をすると指定行の上下に新たな行を挿入できます。

プロパティ設定
  • 表内の設定したい行をクリックして選択
  • ツールバーの『テーブル(表のマーク)』をクリック
  • ドロップダウンの『行』にカーソルを合わせて、右側に表示された『行のプロパティ』をクリック

と操作すると行のプロパティ設定画面が表示されます。

プロパティ設定画面では行単位での外観の一括設定が可能です。

試しに行の背景色の変更をしてみましょう。

  • 『高度な設定』タブをクリック
  • 背景色のカラーパレットから好みのカラーを選択
  • 『OK』をクリック

すれば背景色が変更されます。

カラム(列)の設定

続いてカラム(列)の設定について。

カラムに関してはプロパティ設定はないので、左右挿入についてだけ触れます。

左右に挿入
  • 表内の設定したいカラム(列)をクリックして選択
  • ツールバーの『テーブル(表のマーク)』をクリック
  • ドロップダウンの『カラム』にカーソルを合わせて、右側に表示された『列を左(または右)に挿入』をクリック

すると左(または右)に新たな列が挿入されます。

応用

カラム(列)の挿入を行うと元のカラムが2分割されるので、これを利用します。

上の画像のように、挿入したカラム(列)と元のカラム(列)の第1行のセルを範囲選択し、セルの結合をします。

これを利用すると比較系の記事に掲載する表などでより情報量の多い表を作ることができます。

表のカスタマイズ(外観から一括設定)

これまでの解説は表を作成してから行やカラム、セルなどを個別に設定・カスタマイズしていく方法でした。

ただ、カラーのカスタマイズなどをいちいちイチからやっているとかなり面倒ですよね。

そこで、ワードプレスの外観のカスタマイズ機能から一括で見た目等の設定をしておいて記事作成時の表のカスタマイズの面倒を減らす設定をしていきましょう。

未設定時に記事に挿入される表は枠線が黒で背景が白の味気ないもので、その場でカスタマイズするのは面倒ですよね。そこで外観のカスタマイズで背景色やヘッダーの設定をしておくと、記事に挿入される表がはじめから設定したものになっているので便利です。

ワードプレス管理画面サイドバーより『外観』⇒『カスタマイズ』と進みましょう。

右側のライブビュー画面にあらかじめ公開してある記事の表(デフォルトのもの)を表示させて、どのように見た目が変わるか確認しながら作業を進めましょう。

サイドバーから『オプション(その他)』⇒『table(表)』と進みます。

『ヘッダーセクション未設定時の横一列目に反映する』にチェックを入れると『ヘッダーセクションの背景色』が一番上の行に設定されます。

『ヘッダーセクションの背景色』は『外観』⇒『カスタマイズ』⇒『全体カラー設定』で指定した『キーカラー』が採用されています。ブログの統一感のためにもヘッダーセクションの背景色はキーカラーがおすすめですが、全く違うカラーに変更してもOKです。

その他の設定はお好みで変更してみてください。

最後に『公開』をクリックして設定は完了です。

TablePressは必要?

結論

  • エクセルで作成した表をインポートしたいなら必要
  • より表のデザインをカスタマイズしたいなら必要

ワードプレスにはTablePressという表を作ることに特化したプラグインがあります。

表を作るならこのプラグインというくらい様々なサイトでおすすめされている人気のプラグインです。

AFFINGER6+Advanced Editor Tools(エディターツールプラグイン)で作成できる表と比べるとTablePressによって作れる表の方がクオリティは高いです(カスタマイズはそれなりに面倒ですが)。

TablePressではエクセルで作成した表をインポートして表示させることもできるので、この機能を使いたいという場合はTablePressを別途インストールしてもいいでしょう。

ただ、簡易的な表を作る目的ならAFFINGER6+Advanced Editor Toolsだけで十分で、むしろあまりプラグインを増やさない方が良いのでTablePressをインストールするのはおすすめしません

AFFINGER6で表を作る方法まとめ

  • プラグイン『Advanced Editor Tools』をインストールして設定
  • クラシックブロックから表を挿入&設定する
  • よりカスタマイズしたい、エクセルをインポート場合はプラグイン『TablePress』を使う

AFFINGER6で表を作る場合は上記のような点を意識してみてください。

より見やすくカスタマイズされた表を作りたい場合はTablePressを使いましょう。

操作に慣れるのに少しだけ時間がかかるかもしれませんがより視覚にうったえる表ができるはずです。

僕は簡単な表が作れればいいや。
後輩ネコ
後輩ネコ
とのぽん
とのぽん
自分の目的に合わせて選択してみよう。
  • この記事を書いた人
  • 最新記事

とのぽん

ブログアフィリエイトで月収10万円達成ブロガー。 ネコとお酒が好きなアラフォーサラリーマンのとのぽんです。 メインは資産ブログ形成ノウハウの発信ですが、その他40代ならではの悩みをみなさんと共有して解決していければと思います。

-AFFINGER6, ブログ運営, ワードプレス
-,