![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_60/https://tecchanblogs.com/wp-content/uploads/2022/01/komatta_man2-270x300.png)
●AFFINGER6で表を横スクロールする方法について知りたい。
今回はこんなお悩みに答えていきます。
本記事の信頼性
AFFINGER6購入後、表を使いたいけどやり方がわからない、、という方もいると思います。当サイトもAFFINGER6の操作方法を覚えるだけで時間がかかってしまいました。
今回はそんなAFFINGER6の操作がいまいちわからないという方向けに表を簡単に作成する方法を紹介します。
本記事を読めば3分程度でAFFINGERの表の作り方が理解できるので、最後までご覧ください。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_60/https://tecchanblogs.com/wp-content/uploads/2022/01/アイコン4.jpg)
超特化祭2024実施中
期間 2023/12/23 ~ 2024/ 1 / 10
.
なんと2024年1月10日まで超お得なキャンペーン実施中です。以下対象商品がお得にゲットできます。
.
.
ACTION PACK3は2万円以上お得に。
.
AFFINGER6のキャンペーンは1年に1回このタイミングくらいです。AFFINGER6 EX版が欲しい方はこの機会に検討してみてください。
.
\期間限定キャンペーン中/
\PACK3の詳細なら/
それでは早速始めていきます。
目次
AFFINGER6で表を作るためにまずプラグインをインストールしよう
![AFFINGER5で表を作るためにまずプラグインをインストールしよう](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_974,h_635/https://tecchanblogs.com/wp-content/uploads/2020/10/286-1024x668.jpg)
AFFINGER6で表を作るためにまずプラグインをインストールしよう
TinyMCE Advancedという無料プラグインをまずはインストールします。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_920,h_334/https://tecchanblogs.com/wp-content/uploads/2020/06/アフィンガー5表2-1024x372.jpg)
プラグイン:TinyMCE Advancedをインストールする
メニューのプラグイン⇒新規追加で①のキーワードにTinyMCE Advancedを入力します。
プラグインが表示されるので、②の部分のインストールを押し、インストールが終われば有効化をクリックします。
ここまででAFFINGER6で表作成のためのプラグインの導入は完了です。
ココがポイント
TinyMCE Advancedというプラグインは投稿の編集画面で編集ボタンを増やして操作がしやすくなるプラグインです。
表作成のためのボタンや記事を装飾するためのボタンもこのプラグインで表示が可能。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_60/https://tecchanblogs.com/wp-content/uploads/2022/01/アイコン4.jpg)
AFFINGER6で表を簡単に作成する方法
![AFFINGER5で表を簡単に作成する方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_974,h_736/https://tecchanblogs.com/wp-content/uploads/2020/06/4331-1024x774.jpg)
AFFINGER6で表を簡単に作成する方法
それではAFFINGER5で表を作る方法について解説します。
AFFINGER6表完成イメージ
A | B | C | |
1 | |||
2 |
上記のような表が3分で作れちゃいます。
今回は4つの手順で紹介します。
AFFINGER6表の作成手順4つ
- ①ベースの表を作成する
- ②背景色を変える
- ③セルの結合・テーブル内の文字色を変える
- ④セルの行・列の幅を変更する
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_60/https://tecchanblogs.com/wp-content/uploads/2022/01/アイコン4.jpg)
手順①:ベースの表を作成する
まずは行と列を指定して表を作成します。
先ほどのプラグインインストールし有効化すると投稿の記事編集画面で下記のようなボタンが出てきます。
![AFFINGER5 表作成のアイコン](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_495,h_217/https://tecchanblogs.com/wp-content/uploads/2020/06/アフィンガー5表1.jpg)
AFFINGER5 表作成のアイコン
上記画像ですね。この部分をクリックします。
![AFFINGER5表の作成手順](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_825,h_467/https://tecchanblogs.com/wp-content/uploads/2020/06/アフィンガー5表3.jpg)
AFFINGER5表の作成手順
まずはテーブルで作成したい列×行を決めます。
例えば4×3のテーブルを作るとこうなります。
これでベースの表は完成です。
手順②:背景色を変える
背景色を変えたい時は、テーブルのセルを選択します。
![AFFINGER5テーブルのセルを選択](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_974,h_158/https://tecchanblogs.com/wp-content/uploads/2020/06/アフィンガー5表5-1024x166.jpg)
AFFINGER5テーブルのセルを選択
その後上記のようにセルを選択したまま、テーブルのボタン⇒セル⇒セルのプロパティをクリックします。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_435,h_297/https://tecchanblogs.com/wp-content/uploads/2020/06/アフィンガー5表4.jpg)
セルのプロパティを変更する
高度な設定を押すと上記のような画面になるので、背景色の部分を変更すると色が変わります。
AFFINGER6 表背景色変更後
上記のようにセルの背景色変更が可能です。
手順③:セルの結合・テーブル内の文字色を変える
セル結合は②と同様に結合したいセルを選択します。
テーブルボタン⇒セル⇒セルの結合で選択したセルを結合できます。
![AFFINGER5 テーブルセルを結合する](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_622,h_430/https://tecchanblogs.com/wp-content/uploads/2020/06/アフィンガー5表6.jpg)
AFFINGER5 テーブルセルを結合する
またテーブル内の文字色や太さなども変更できます。
![AFFINGER5でテーブルのセル文字色を変更する](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1100,h_263/https://tecchanblogs.com/wp-content/uploads/2020/06/アフィンガー5表7-1.jpg)
AFFINGER5でテーブルのセル文字色を変更する
セルを選択した状態で①を押せばセルの文字色の変更が可能です。
セルを選択した状態で②を押すと選択したセルの文字が太字になります。
手順④:セルの行・列の幅を変更する
最後に作成した表の調整ですね。セルのサイズを変更したい時は以下で行います。
![AFFINGER テーブルのセルサイズを変更する](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_584,h_409/https://tecchanblogs.com/wp-content/uploads/2020/06/アフィンガー5表8.jpg)
AFFINGER テーブルのセルサイズを変更する
テーブルボタン⇒セル⇒セルのプロパティ⇒幅・高さを変更します。
ここに入力する数字は%を入れないと機能しないので、%の入れ忘れに注意してください。
幅10%にすると下記のようになります。
表サイズ(通常時)
A | B | C | |
1 | |||
2 |
表サイズ(左端1列の幅を10%に変更)
A | B | C | |
1 | |||
2 |
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_60/https://tecchanblogs.com/wp-content/uploads/2022/01/アイコン4.jpg)
AFFINGER6の表を横スクロールする作り方
![AFFINGER5の表を横スクロールする作り方](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_974,h_650/https://tecchanblogs.com/wp-content/uploads/2020/06/lion-male-having-rest-lying-mountain-1024x683.jpg)
AFFINGER6の表を横スクロールする作り方
スマホの画面だとテーブルを綺麗に表示できない、、なんてこともあります。
そんなときはテーブルのスクロールがおすすめです。
![AFFINGER5 テーブルを横スクロールする方法](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_633,h_586/https://tecchanblogs.com/wp-content/uploads/2020/06/アフィンガー5表9.jpg)
AFFINGER6 テーブルを横スクロールする方法
スタイル⇒テーブル⇒横スクロールをクリックします。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_920,h_117/https://tecchanblogs.com/wp-content/uploads/2020/06/アフィンガー5表10-1024x130.jpg)
横スクロール用テーブルボックス
上記のような枠ができるのでこの中にベースのテーブルを作成します。
スクロールを使うと以下のようにできます。
Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 |
Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 |
もしうまくスクロールが行かない場合は表全体の幅の%がおかしいかも知れないので、うまく入るように調整しましょう。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_664,h_461/https://tecchanblogs.com/wp-content/uploads/2020/06/アフィンガー5表11.jpg)
横スクロールの表のプロパティを変更する
セルを選択してテーブルボタン⇒表のプロパティで表全体の幅を変更できます。
AFFINGER6の表カスタマイズ方法3つ
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_974,h_650/https://tecchanblogs.com/wp-content/uploads/2020/06/lion-resting-near-tree-1024x683.jpg)
AFFINGER6の表カスタマイズ方法3つ
最後にAFFINGER6の表をカスタマイズする方法について解説します。
以下3つです。
AFFINGER6表カスタマイズ方法3つ
①テーブル内のセルに画像の挿入も可能
②パソコン表示で表の横スクロールをする
③初期設定で表の枠線・背景色を変える
1つずつ見ていきましょう。
その①:テーブル内のセルに画像の挿入も可能
テーブルを作成後、セルを選択して『メディアを追加』で画像の挿入も可能です。
ココに注意
画像が大きすぎると表が崩れたりするので、画像の調整は必要です。
Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 |
![]() | |||
上記のような感じですね。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_60/https://tecchanblogs.com/wp-content/uploads/2022/01/アイコン4.jpg)
その②:パソコン表示で表の横スクロールをする
先ほどご紹介した横スクロールは基本的にスマホ表示の際に横スクロールになります。
パソコン表示だと幅が画面を越えないと横スクロールしてくれません。
そういった時でもHTMLコードを少しいじればパソコン表示でも簡単に横スクロールが可能です。
html
<div class="scroll-box">
</div>
AFFINGER6で横スクロールを導入するよ上記のようなコードになります。これを下記のように変えればパソコン表示でも変更が可能です。
html <div class="scroll-box pc"> </div>
上記のような感じですね。ちょっと変えるだけで横スクロールがパソコン表示でもできるのでトライしてみてください。
その③:初期設定で表の枠線・背景色を変える
初期設定で表の枠線や背景色を変えることも可能。
カスタマイズ⇒オプションカラー⇒table(表)で移動してください。
![AFFINGER5 表のカスタマイズ方法(色:枠線)](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1040,h_507/https://tecchanblogs.com/wp-content/uploads/2020/06/table2.jpg)
AFFINGER5 表のカスタマイズ方法(色:枠線)
上記のような感じですね。表の枠線やセルの色をお好みで変更することができるので変えてみましょう。
なお、『このブログの色良いな』てときは『Colorpick Eyedropper』を使えば調査が可能です。
詳細な使い方は、【無料】Colorpick Eyedropperの使い方【Google chrome拡張機能】で解説しているので参考にしてみてください。
AFFINGER6でさらにブログを伸ばすために【便利なツール3選】
![AFFINGER6でさらにブログを伸ばすために【便利なツール3選】](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_974,h_650/https://tecchanblogs.com/wp-content/uploads/2020/08/business_woman_inside_lightbulb_with_flash_light_concept_of_new_creative_idea_innovation_or_solution_for_business_entrepreneurship_or_startup_idea_creation_or_discovery1-1024x683.jpg)
AFFINGER6でさらにブログを伸ばすために【便利なツール3選】
AFFINGER6で表をいい感じに作成できた方は、さらにブログを伸ばしていくために便利なツールを3つほどご紹介します。
どれも導入していない方は、検討してみてくださいね。
その①:Rank Tracker(検索順位チェックツール)
Rank TrackerはSEO検索順位チェックツールのことです。
狙ったキーワードがGoogleなどの検索結果で何位に表示されるかをチェックできるツールになります。
![その①:Rank Tracker(検索順位チェックツール)](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_974,h_475/https://tecchanblogs.com/wp-content/uploads/2021/03/rank-tracker53-1024x499.png)
その①:Rank Tracker(検索順位チェックツール)
上記のように狙ったキーワードの動向を日々自動でチェックでき、改善・対策などブログ運営を効率的に進めることができます。
キーワード順位チェックツールは、GRCやNobilista(ノビリスタ)
など他ツールもあるのでまずは無料のお試し利用から始めましょう。
-
Rank Tracker(SEO検索順位チェックツール)の登録方法・使い方をレビュー
続きを見る
お試し利用の場合、Nobilista(ノビリスタ)は1週間無料体験+クレジットカード登録など面倒な作業も不要なのでとりあえず使ってみるのがおすすめです!
その②:キーワードスカウターST
キーワードスカウターSTではライバルがいないお宝キーワードを発見できるツールです。
ブログアフィリエイトで稼ぐのに最も重要なキーワード選定は、本来キーワード入力⇒ドメインパワー計測⇒競合に勝てそうか、ライバルは多くないかなど確認手順があるため非常に時間がかかります。
その非効率な時間を効率化してくれるのが魅力です。一度の買い切り5000円ほどでかなりの時間短縮になったので満足度が高かったです。
その③:COMPASS
COMPASSはSEOキーワードの分析ツールです。以下の機能が備わっています。
COMPASSでできること
- キーワード選定
- 穴場キーワードの発掘
- 検索順位チェック
キーワード分析系のツールは似たようなものや機能が若干違いますが、公式からの購入者限定もあるので、お得にスタートできます。
その他ブログツールは以下でも解説してるので気になった方はチェックしてみてください。
-
ブログアフィリエイト運営におすすめの必須ツール19選【初心者向け】
続きを見る
まとめ:AFFINGER6なら表を簡単に作成可能【見やすい記事を作ろう】
![まとめ:AFFINGER6なら表を簡単に作成可能【見やすい記事を作ろう】](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_974,h_871/https://tecchanblogs.com/wp-content/uploads/2021/03/AFFINGER-1-1024x916.jpg)
まとめ:AFFINGER6なら表を簡単に作成可能【見やすい記事を作ろう】
今回はAFFINGER6で表を作成する方法・カスタマイズ方法について解説しました。
文字だらけの文章は読みにくく感じてしまいますが、表を活用すれば読みやすい記事になります。
ブログ記事は見やすさにこだわって作っていけば、アクセス数も増えます。表を作成して見やすさ・読みやすさを向上してみてください。
>>ブログで読みやすい文章の書き方のコツ20個を徹底解説【初心者向け】
本記事が参考になれば幸いです。最後まで読んで頂きありがとうございました。
それでは本日はこの辺りで!
-
AFFINGER6の評判は本当?利用者のガチ評判を徹底レビュー
続きを見る
関連記事AFFINGER6とTHE THORを徹底比較!各項目別に違いを解説