AFFINGER6で表（table）をお洒落にカスタマイズする方法（横スクロール方法も）

 

 

このような疑問に対して記事を書きました。

 

 

この記事を書いているわたしは、AFFINGERを使用して２年が経過しています。

 

最初はとても苦労したカスタマイズですが、２年間で蓄積したノウハウを出し惜しみなく解説していきます。

 

今回は、AFFINGER６を使用してテーブル（表）をお洒落にカスタマイズする方法について解説してきたいと思います。

 

 

それでは行ってみましょう。

 

AFFINGERのその他おすすめのカスタマイズ方法について解説しています。

AFFINGER６で「会話ふきだし」をお洒落ににカスタマイズする方法

続きを見る

 

 

AFFINGERで表（table）をお洒落にカスタマイズする方法

 

わたしが普段、とても活用している機能の一つに表（table）があります。

 

 

この表（table）をお洒落にできるだけでとてもブログがお洒落になるので、おすすめのカスタマイズです。

 

表（table）カスタマイズに必要なプラグイン

 

表（table）をお洒落にカスタマイズするためにプラグイン「Advanced Editor Tools]が必要となります。

 

 

このプラグインは「Classic Editor」の機能を拡張（強化）してくれるものなので、「インストール」→「有効化」　しておいてください。

 

表（table）の完成形を確認しましょう。

 

それではプラグイン Advanced Editor Toolsをインストールしたうえで、カスタマイズ前とカスタマイズ後を確認してみましょう。

 

カスタマイズ前

NO	１	２	３	４
種類	犬	猫	猿	アヒル
頭数	２頭	３頭	なし	なし

 

 

カスタマイズ後

NO	１	２	３	４
種類	犬	猫	猿	アヒル
頭数	２頭	３頭	なし

 

 

それでは早速カスタマイズの方法を確認していきましょう。

 

カスタマイズ４ステップ

 

 

step
1表を挿入

 

 

まずは、横５列×縦３行の表（table）を挿入してみましょう。

 

①「テーブルアイコン」→　②「テーブル」→　 ③「縦３×横５を選択」でOKです。

 

 

step
2セルを結合

 

①「結合させたいセルを選択」→　②「テーブルアイコン」→　③「セル」→　④「セルの結合をクリック」

 

これでセルを結合させることができます。

 

 

 

step
3センター配置

NO	１	２	３	４
種類	犬	猫	猿	アヒル
頭数	１頭	２頭	なし

 

表の中の文字をセンター揃えにします。

 

①「センター揃えにしたい範囲を選択」　→ 　②「中央揃えをクリック」で完了です。

 

 

step
4背景色を設定

 

表（table）の選択した範囲に背景色を設定していきます。（説明では、１行目の背景色を変更していきます）

 

①「表の範囲を選択」→ ②「表アイコン」→ ③「セル」→ ④「セルのプロパティ」→ ⑤「高度な設定」→⑥「背景色を設定」で完了です。

NO	１	２	３	４
種類	犬	猫	猿	アヒル
頭数	１頭	２頭	なし

 

表（table）の１行目背景色が設定されました。

 

この要領で２行目、３行目も背景色を設定していきます。

NO	１	２	３	４
種類	犬	猫	猿	アヒル
頭数	１頭	２頭	なし

 

参考に完成形の背景色はこちらになります。

 

これで表が完成しました。

 

 

表（table）カスタマイズの応用編

 

ここからは、少し高度なのですがカスタマイズ応用編についても解説していきたいと思います。

 

 

応用カスタマイズ

 

応用１：表（table）の列幅の調節

セルの列幅は簡単に調節することができます。

 

①「幅を調節する列を選択」→②「表のアイコン」→③「セル」→④「セルのプロパティ」→⑤「幅を○○％で入力」

 

 

％にしないと数値が反映しないので注意しましょう。

 

表に横スクロールの設定方法について

 

表の文字数が多くなりすぎて、レイアウトが崩れることがあります。

 

こんな時に、とーっても活躍するのが「横スクロール」機能です。

 

 

横スクロールは、表の文字が多すぎるなどでレイアウトが崩れる場合に表をスクロールさせレイアウト崩れを防げる機能です。

 

まずは完成形でイメージを確認してみましょう。

 

カスタマイズ前

NO	１	２	３	４	５	６	７
仕入れ先	ショップAAAA	ショップBBBB	ショップCCCC	ショップDDDD	ショップEEEE	ショップFFFF	ショップGGGG

カスタマイズ後

 

横スクロールの設定方法

横スクロール用のBOXが表示されます。

 

①「スタイル」→②「テーブル」→③「横スクロールをクリック」→④「でてきたBOX内に表を作成 or 表をBOX内に貼付け」

 

これで横スクロールの設定が完了です。

 

 

横スクロール（PC版）の設定

 

横スクロールは、基本設定はスマホ版になるので、PC画面でも横スクロールする場合はコードを追加する必要があります。

 

①「テキストモードに切替え」→　②「該当コード："scroll-box”の後に　半角スペース＋pc　を追加」

 

横スクロールのコード（scroll-box）の後に、半角スペース＋pcのコードを追加するだけで、PC画面でも横スクロールされます。

 

 

まとめ

 

今回はAFFINGER6を使って表（table）をお洒落にカスタマイズする方法を解説しました。

 

一見難しいと思われる表（table)のも、AFFINGERなら簡単にカスタマイズできてしまいます。

 

AFFINGER６は、テーマ選びで迷われている方にはおすすめできるテーマになります。

 

この他、おすすめのテーマについてはこちらの記事で紹介しています。

（初心者向き）WordPressブログの人気テーマ５選

続きを見る

 

これからもAFFINGERのおすすめのカスタマイズ方法について解説していきますね。

 

今回は以上です。