●AFFINGER6で表を横スクロールする方法について知りたい。
今回はこんなお悩みに答えていきます。
本記事の信頼性
AFFINGER6購入後、表を使いたいけどやり方がわからない、、という方もいると思います。
僕自身AFFINGER6の操作方法を覚えるだけで時間がかかってしまいました。
今回はそんなAFFINGER6の操作がいまいちわからないという方向けに表を簡単に作成する方法を紹介します。
本記事を読めば3分程度でAFFINGERの表の作り方が理解できるので、最後までご覧ください。
※なお、当サイトはAFFINGER通常版からAFFINGER PACK3を購入し、収益が月6桁までグンと伸びました。収益をさらに伸ばしたい方は、参考に以下もどうぞ。
-
【AFFINGER PACK3】AFFINGER6 EX版を徹底レビュー【感想を公開】
続きを見る
それでは早速始めていきます。
目次
AFFINGER6で表を作るためにまずプラグインをインストールしよう
AFFINGER6で表を作るためにまずプラグインをインストールしよう
TinyMCE Advancedという無料プラグインをまずはインストールします。
プラグイン：TinyMCE Advancedをインストールする
メニューのプラグイン⇒新規追加で①のキーワードにTinyMCE Advancedを入力します。
プラグインが表示されるので、②の部分のインストールを押し、インストールが終われば有効化をクリックします。
ここまででAFFINGER6で表作成のためのプラグインの導入は完了です。
ココがポイント
TinyMCE Advancedというプラグインは投稿の編集画面で編集ボタンを増やして操作がしやすくなるプラグインです。
表作成のためのボタンや記事を装飾するためのボタンもこのプラグインで表示が可能。
AFFINGER6で表を簡単に作成する方法
AFFINGER6で表を簡単に作成する方法
それではAFFINGER5で表を作る方法について解説します。
AFFINGER6表完成イメージ
| A | B | C | |
| １ | |||
| ２ | |||
上記のような表が3分で作れちゃいます。
今回は4つの手順で紹介します。
AFFINGER6表の作成手順4つ
- ①ベースの表を作成する
- ②背景色を変える
- ③セルの結合・テーブル内の文字色を変える
- ④セルの行・列の幅を変更する
手順①：ベースの表を作成する
まずは行と列を指定して表を作成します。
先ほどのプラグインインストールし有効化すると投稿の記事編集画面で下記のようなボタンが出てきます。
AFFINGER5 表作成のアイコン
上記画像ですね。この部分をクリックします。
AFFINGER5表の作成手順
まずはテーブルで作成したい列×行を決めます。
例えば4×3のテーブルを作るとこうなります。
これでベースの表は完成です。
手順②：背景色を変える
背景色を変えたい時は、テーブルのセルを選択します。
AFFINGER5テーブルのセルを選択
その後上記のようにセルを選択したまま、テーブルのボタン⇒セル⇒セルのプロパティをクリックします。
セルのプロパティを変更する
高度な設定を押すと上記のような画面になるので、背景色の部分を変更すると色が変わります。
AFFINGER6 表背景色変更後
上記のようにセルの背景色変更が可能です。
手順③：セルの結合・テーブル内の文字色を変える
セル結合は②と同様に結合したいセルを選択します。
テーブルボタン⇒セル⇒セルの結合で選択したセルを結合できます。
AFFINGER5 テーブルセルを結合する
またテーブル内の文字色や太さなども変更できます。
AFFINGER5でテーブルのセル文字色を変更する
セルを選択した状態で①を押せばセルの文字色の変更が可能です。
セルを選択した状態で②を押すと選択したセルの文字が太字になります。
手順④：セルの行・列の幅を変更する
最後に作成した表の調整ですね。セルのサイズを変更したい時は以下で行います。
AFFINGER テーブルのセルサイズを変更する
テーブルボタン⇒セル⇒セルのプロパティ⇒幅・高さを変更します。
ここに入力する数字は％を入れないと機能しないので、％の入れ忘れに注意してください。
幅10％にすると下記のようになります。
表サイズ（通常時）
| A | B | C | |
| １ | |||
| ２ | |||
表サイズ（左端1列の幅を10％に変更）
| A | B | C | |
| １ | |||
| ２ | |||
AFFINGER6の表を横スクロールする作り方
AFFINGER6の表を横スクロールする作り方
スマホの画面だとテーブルを綺麗に表示できない、、なんてこともあります。
そんなときはテーブルのスクロールがおすすめです。
AFFINGER6 テーブルを横スクロールする方法
スタイル⇒テーブル⇒横スクロールをクリックします。
横スクロール用テーブルボックス
上記のような枠ができるのでこの中にベースのテーブルを作成します。
スクロールを使うと以下のようにできます。
| Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 |
| Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 | Affinger テーブル作成方法 |
もしうまくスクロールが行かない場合は表全体の幅の％がおかしいかも知れないので、うまく入るように調整しましょう。
横スクロールの表のプロパティを変更する
セルを選択してテーブルボタン⇒表のプロパティで表全体の幅を変更できます。
AFFINGER6の表カスタマイズ方法3つ
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>
上記のような感じですね。ちょっと変えるだけで横スクロールがパソコン表示でもできるのでトライしてみてください。
その③：初期設定で表の枠線・背景色を変える
初期設定で表の枠線や背景色を変えることも可能。
カスタマイズ⇒オプションカラー⇒table(表)で移動してください。
AFFINGER5 表のカスタマイズ方法（色：枠線）
上記のような感じですね。表の枠線やセルの色をお好みで変更することができるので変えてみましょう。
なお、『このブログの色良いな』てときは『Colorpick Eyedropper』を使えば調査が可能です。
詳細な使い方は、【無料】Colorpick Eyedropperの使い方【Google chrome拡張機能】で解説しているので参考にしてみてください。
まとめ：AFFINGER6なら表を簡単に作成可能【見やすい記事を作ろう】
まとめ：AFFINGER6なら表を簡単に作成可能【見やすい記事を作ろう】
今回はAFFINGER6で表を作成する方法・カスタマイズ方法について解説しました。
文字だらけの文章は読みにくく感じてしまいますが、表を活用すれば読みやすい記事になります。
ブログ記事は見やすさにこだわって作っていけば、アクセス数も増えます。表を作成して見やすさ・読みやすさを向上してみてください。
>>ブログで読みやすい文章の書き方のコツ10個を徹底解説【初心者向け】
本記事が参考になれば幸いです。最後まで読んで頂きありがとうございました。
それでは本日はこの辺りで！
-
【特典付き】AFFINGER6の評判は？本当の口コミを徹底レビュー
続きを見る
関連記事AFFINGER6とTHE THORを徹底比較！各項目別に違いを解説
