AFFINGER6簡単な表の作成方法を解説【表を横スクロールする作り方も】

困ってる人

●AFFINGER6を使用しているけど、表の作り方がわからない。。誰か教えてください。

●AFFINGER6で表を横スクロールする方法について知りたい。

今回はこんなお悩みに答えていきます。

本記事の信頼性

AFFINGER6購入後、表を使いたいけどやり方がわからない、、という方もいると思います。当サイトもAFFINGER6の操作方法を覚えるだけで時間がかかってしまいました。

今回はそんなAFFINGER6の操作がいまいちわからないという方向けに表を簡単に作成する方法を紹介します。

本記事を読めば3分程度でAFFINGERの表の作り方が理解できるので、最後までご覧ください。

表の作成は超簡単です。3分程度でサクッと見ていきましょう。

超特化祭2024実施中

期間 2023/12/23 ～ 2024/ 1 / 10

.

なんと2024年1月10日まで超お得なキャンペーン実施中です。以下対象商品がお得にゲットできます。

.

特化祭2024

.

ACTION PACK3は2万円以上お得に。

.

AFFINGER6のキャンペーンは1年に1回このタイミングくらいです。AFFINGER6 EX版が欲しい方はこの機会に検討してみてください。

.

＼期間限定キャンペーン中／

公式サイトはこちら

＼PACK3の詳細なら／

口コミ・評判はこちら

それでは早速始めていきます。

AFFINGER6で表を作るためにまずプラグインをインストールしよう

AFFINGER6で表を作るためにまずプラグインをインストールしよう

TinyMCE Advancedという無料プラグインをまずはインストールします。

プラグイン：TinyMCE Advancedをインストールする

メニューのプラグイン⇒新規追加で①のキーワードにTinyMCE Advancedを入力します。

ここまででAFFINGER6で表作成のためのプラグインの導入は完了です。

僕みたいにプログラミングができない人こそ入れたいプラグインです。

AFFINGER6で表を簡単に作成する方法

AFFINGER6で表を簡単に作成する方法

それではAFFINGER5で表を作る方法について解説します。

AFFINGER6表完成イメージ

上記のような表が3分で作れちゃいます。

今回は4つの手順で紹介します。

一つずつやれば問題なくできるので、一緒にやっていきましょう。

手順①：ベースの表を作成する

まずは行と列を指定して表を作成します。

先ほどのプラグインインストールし有効化すると投稿の記事編集画面で下記のようなボタンが出てきます。

AFFINGER5 表作成のアイコン

上記画像ですね。この部分をクリックします。

AFFINGER5表の作成手順

例えば4×3のテーブルを作るとこうなります。

これでベースの表は完成です。

手順②：背景色を変える

背景色を変えたい時は、テーブルのセルを選択します。

AFFINGER5テーブルのセルを選択

セルのプロパティを変更する

高度な設定を押すと上記のような画面になるので、背景色の部分を変更すると色が変わります。

AFFINGER6 表背景色変更後

上記のようにセルの背景色変更が可能です。

手順③：セルの結合・テーブル内の文字色を変える

セル結合は②と同様に結合したいセルを選択します。

AFFINGER5 テーブルセルを結合する

またテーブル内の文字色や太さなども変更できます。

AFFINGER5でテーブルのセル文字色を変更する

セルを選択した状態で①を押せばセルの文字色の変更が可能です。

セルを選択した状態で②を押すと選択したセルの文字が太字になります。

手順④：セルの行・列の幅を変更する

最後に作成した表の調整ですね。セルのサイズを変更したい時は以下で行います。

AFFINGER テーブルのセルサイズを変更する

ここに入力する数字は％を入れないと機能しないので、％の入れ忘れに注意してください。

幅10％にすると下記のようになります。

表サイズ（通常時）

表サイズ（左端1列の幅を10％に変更）

上記手順で表作成は完了です。お疲れ様でした。

AFFINGER6の表を横スクロールする作り方

AFFINGER6の表を横スクロールする作り方

スマホの画面だとテーブルを綺麗に表示できない、、なんてこともあります。

そんなときはテーブルのスクロールがおすすめです。

AFFINGER6　テーブルを横スクロールする方法

横スクロール用テーブルボックス

上記のような枠ができるのでこの中にベースのテーブルを作成します。

スクロールを使うと以下のようにできます。

もしうまくスクロールが行かない場合は表全体の幅の％がおかしいかも知れないので、うまく入るように調整しましょう。

横スクロールの表のプロパティを変更する

セルを選択してテーブルボタン⇒表のプロパティで表全体の幅を変更できます。

AFFINGER6の表カスタマイズ方法3つ

AFFINGER6の表カスタマイズ方法3つ

最後にAFFINGER6の表をカスタマイズする方法について解説します。

以下3つです。

1つずつ見ていきましょう。

その①：テーブル内のセルに画像の挿入も可能

テーブルを作成後、セルを選択して『メディアを追加』で画像の挿入も可能です。

Affinger テーブル作成方法	Affinger テーブル作成方法	Affinger テーブル作成方法	Affinger テーブル作成方法

上記のような感じですね。

自由自在に画像を並べること可能ですよ。

その②：パソコン表示で表の横スクロールをする

先ほどご紹介した横スクロールは基本的にスマホ表示の際に横スクロールになります。

パソコン表示だと幅が画面を越えないと横スクロールしてくれません。

そういった時でもHTMLコードを少しいじればパソコン表示でも簡単に横スクロールが可能です。

 html
<div class="scroll-box">
</div>

AFFINGER6で横スクロールを導入するよ上記のようなコードになります。これを下記のように変えればパソコン表示でも変更が可能です。

 html
<div class="scroll-box pc">
</div>

上記のような感じですね。ちょっと変えるだけで横スクロールがパソコン表示でもできるのでトライしてみてください。

その③：初期設定で表の枠線・背景色を変える

初期設定で表の枠線や背景色を変えることも可能。

AFFINGER5 表のカスタマイズ方法（色：枠線）

上記のような感じですね。表の枠線やセルの色をお好みで変更することができるので変えてみましょう。

詳細な使い方は、【無料】Colorpick Eyedropperの使い方【Google chrome拡張機能】で解説しているので参考にしてみてください。

AFFINGER6でさらにブログを伸ばすために【便利なツール3選】

AFFINGER6でさらにブログを伸ばすために【便利なツール3選】

AFFINGER6で表をいい感じに作成できた方は、さらにブログを伸ばしていくために便利なツールを3つほどご紹介します。

どれも導入していない方は、検討してみてくださいね。

その①：Rank Tracker（検索順位チェックツール）

Rank TrackerはSEO検索順位チェックツールのことです。

狙ったキーワードがGoogleなどの検索結果で何位に表示されるかをチェックできるツールになります。

その①：Rank Tracker（検索順位チェックツール）

上記のように狙ったキーワードの動向を日々自動でチェックでき、改善・対策などブログ運営を効率的に進めることができます。

キーワード順位チェックツールは、GRCやNobilista（ノビリスタ）など他ツールもあるのでまずは無料のお試し利用から始めましょう。

お試し利用の場合、Nobilista（ノビリスタ）は1週間無料体験+クレジットカード登録など面倒な作業も不要なのでとりあえず使ってみるのがおすすめです！

その②：キーワードスカウターST

キーワードスカウターSTではライバルがいないお宝キーワードを発見できるツールです。

その非効率な時間を効率化してくれるのが魅力です。一度の買い切り5000円ほどでかなりの時間短縮になったので満足度が高かったです。

>>キーワードスカウターST公式サイトはこちら

その③：COMPASS

COMPASSはSEOキーワードの分析ツールです。以下の機能が備わっています。

COMPASSでできること

• キーワード選定
• 穴場キーワードの発掘
• 検索順位チェック

キーワード分析系のツールは似たようなものや機能が若干違いますが、公式からの購入者限定もあるので、お得にスタートできます。

>>COMPASS公式サイトはこちら

その他ブログツールは以下でも解説してるので気になった方はチェックしてみてください。

まとめ：AFFINGER6なら表を簡単に作成可能【見やすい記事を作ろう】

まとめ：AFFINGER6なら表を簡単に作成可能【見やすい記事を作ろう】

今回はAFFINGER6で表を作成する方法・カスタマイズ方法について解説しました。

ブログ記事は見やすさにこだわって作っていけば、アクセス数も増えます。表を作成して見やすさ・読みやすさを向上してみてください。

>>ブログで読みやすい文章の書き方のコツ20個を徹底解説【初心者向け】

本記事が参考になれば幸いです。最後まで読んで頂きありがとうございました。

それでは本日はこの辺りで！

>>AFFINGER6のカスタマイズ方法まとめに戻る

関連記事AFFINGER6とTHE THORを徹底比較！各項目別に違いを解説