AFFINGER

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

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

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

 

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

 

本記事の信頼性

AFFINGER5を当サイトでは使用しています。初心者でも簡単に表を作れるように丁寧に説明できます。

 

AFFINGER5購入後、表を使いたいけどやり方がわからない、、という方もいると思います。

 

僕自身AFFINGER5の操作方法を覚えるだけで時間がかかってしまいました。

 

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

 

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

 

本記事はAFFINGER5での表作成方法になります。まだブログテーマを導入してなくて迷ってる方は下記記事を参考にしてみて下さい。

 

ブログテーマ
WordPressブログのおすすめ有料テーマ
【2021年】WordPressブログのおすすめ有料テーマ7つを徹底比較

続きを見る

 

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

 

 

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

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

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

 

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

 

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

 

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

 

プラグインが表示されるので、②の部分のインストールを押し、インストールが終われば有効化をクリックします。

 

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

 

ココがポイント

TinyMCE Advancedというプラグインは投稿の編集画面で編集ボタンを増やして操作がしやすくなるプラグインです。

表作成のためのボタンや記事を装飾するためのボタンもこのプラグインで表示が可能。

 

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

 

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

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

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

 

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

 

AFFINGER5表完成イメージ

ABC

 

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

 

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

 

AFFINGER5表の作成手順4つ

  • ①ベースの表を作成する
  • ②背景色を変える
  • ③セルの結合・テーブル内の文字色を変える
  • ④セルの行・列の幅を変更する

 

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

 

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

 

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

 

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

 

AFFINGER5 表作成のアイコン

AFFINGER5 表作成のアイコン

 

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

 

AFFINGER5表の作成手順

AFFINGER5表の作成手順

 

まずはテーブルで作成したい列×行を決めます。

 

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

 

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

 

手順②:背景色を変える

 

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

 

AFFINGER5テーブルのセルを選択

AFFINGER5テーブルのセルを選択

 

その後上記のようにセルを選択したまま、テーブルのボタン⇒セル⇒セルのプロパティをクリックします。

 

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

 

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

 

AFFINGER5 表背景色変更後

 

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

 

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

 

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

 

テーブルボタン⇒セル⇒セルの結合で選択したセルを結合できます。

 

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

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

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

 

テーブルボタン⇒セル⇒セルのプロパティ⇒幅・高さを変更します。

 

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

 

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

 

表サイズ(通常時)

ABC

 

表サイズ(左端1列の幅を10%に変更)

ABC

 

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

 

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

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

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

 

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

 

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

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

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

 

スタイル⇒テーブル⇒横スクロールをクリックします。

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

以下3つです。

 

AFFINGER5表カスタマイズ方法3つ

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

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

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

 

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

 

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

 

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

 

ココに注意

画像が大きすぎると表が崩れたりするので、画像の調整は必要です。

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

カスタマイズ⇒オプションカラー⇒table(表)で移動してください。

 

AFFINGER5 表のカスタマイズ方法(色:枠線)

AFFINGER5 表のカスタマイズ方法(色:枠線)

 

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

 

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

 

なお、『このブログの色良いな』てときは『Colorpick Eyedropper』を使えば調査が可能です。

 

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

 

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

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

 

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

 

文字だらけの文章は読みにくく感じてしまいますが、表を活用すれば読みやすい記事になります。

 

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

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

 

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

 

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

 

関連記事
AFFINGER5の評判・メリットデメリットを徹底解説【実際に使った感想をレビュー】

続きを見る

 

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

 

 

-AFFINGER

© 2021 tetsu Powered by AFFINGER5