AFFINGER5【表作成時に相性のいい6つの記事装飾】使い方も

AFFINGER5の記事装飾を利用して、スタイリッシュで見やすい表を作る方法の紹介です。

表内での利用に便利な記事装飾と、その使い方を解説していきます。

こんな人のお役に立てる記事です。

小豆

AFFINGER5の記事装飾って、表内でも使えるのかな？
表との相性のいい記事装飾を知りたい。

AFFINGER5記事装飾を使えば表はもっと見やすくなる

AFFINGER5には、「これでもか！」というくらい豊富な数の魅力的な記事装飾機能が備わっています。

今回は、その中でも特に表作成との相性のいい記事装飾を紹介していきます。

というわけで、まずは以下の2つの表を見比べてみて下さい。

サンプルテキスト	車通勤	バス通勤	電車通勤
サンプルテキスト
サンプルテキスト	10,000円	20,000円	30,000円
サンプルテキスト	テキスト テキスト テキスト	テキスト テキスト テキスト	テキスト テキスト テキスト
サンプルテキスト	+ クリックして下さい 表内に長い文章を入力してしまうと、表のレイアウトも崩れてしまい見づらくなってしまう	+ クリックして下さい 表内に長い文章を入力してしまうと、表のレイアウトも崩れてしまい見づらくなってしまう	+ クリックして下さい 表内に長い文章を入力してしまうと、表のレイアウトも崩れてしまい見づらくなってしまう
サンプルテキスト	詳しくはコチラ	詳しくはコチラ	詳しくはコチラ

小豆

見た目が全然違う・・。
表のデザインって、けっこう重要なんだね。

確かにその通りだね。
デザイン一つで、表の見やすさが全然違ってくるんだ。

大福

基本となる表の作り方

今回この記事内で解説していくのは、表内での「AFFINGER5の記事装飾の使い方」。

というわけで、表そのものの作り方の解説は行っていきません。

【基本となる表の作り方】を知りたい人は、以下の記事を参考にしてください。

表作作成時に相性のいい記事装飾6つとその使い方

表作成時に利用したいAFFINGER5の6つの記事装飾がこちら。

step
1アイコン

AFFINGER5では、Font Awesomeのアイコンを使用することができます。

アイコンの詳しい使い方は、以下の記事内で解説しています。

関連AFFINGER5で使えるアイコンの増やし方【カスタマイズも】

step
2スター

タグ　→　その他パーツ　→　スター　→　任意のスターを選択

step
3アニメーション

テキストを入力　→　テキストを選択した状態で スタイル　→　アニメーション　→　任意のアニメーションを選択

step
4箇条書き

テキストを入力　→　テキストを選択した状態で スタイル　→　リスト　→　任意のリストを選択　→　リストアイコンをクリック

step
5スライドボックス

テキストを入力　→　テキストを選択した状態で タグ　→　ボックスデザイン　→　スライドボックス

step
6ボタンリンク

タグ　→　カスタムボタン　→　ミニ

スマホでの見た目を意識した表作りが重要

現在、ブログを訪れるユーザーの多くはスマホからの閲覧です。

たとえば、このブログの場合だと比率はこんな感じ。

これは直近1カ月のアクセス数ですが、実に全体の7割がスマホユーザーです。

というわけで、表作成時には、スマホでの表示のされ方を意識することが重要になってきます。

小豆

スマホでの見られ方を意識？？
具体的には、何をどうすればいいの？

基本的には、以下の2つのことを意識すれば大丈夫だよ。

大福

項目数が多い場合は縦長に

以下の2つの表のスマホでの表示を比較してみて下さい。

縦長の表	横長の表

画像はクリックで拡大できます

横長の表は、スマホの画面ではとにかく見づらいんです。

まぁ、スマホの画面は縦長なのだから当たり前ですよね。

でもこれ、気を付けているつもりでも意外とやってしまいがちなんです。

原因は単純で、記事の作成はパソコンで行うから。

小豆

パソコンの画面は横長だから、それに合わせて表を作ってしまうんだね。

その通り。
記事を書くときは、常にスマホでの見え方を意識する必要があるんだ。

大福

横長の表はスクロールを

そうはいっても、どうしても表が横長になってしまう時もあります。

そんな時に便利なのが、AFFINGER5の「横スクロール」機能。

この機能を使用すれば、スマホ閲覧時のみ表を横スクロールさせることが可能です。

詳しい使い方や、上記のようにPCでも横スクロールさせたい場合は、以下の記事を参考にしてください。

参考AFFINGER5｜横長の表をPCでも横スクロールさせる方法

まとめ：表作成に慣れよう

正直言えば、表の作成はちょっと面倒です。

僕自身、以前はなるべく表を使わないように避けているところがありました。

ただし、ユーザー目線での「見やすいブログ」にとって、表は必要不可欠な存在。

まずは、不格好な出来の表でもいいです。

数をこなしていく内に、自分の思い通りの表が作れるようになっていくはずです。

AFFINGER利用者向けオリジナル特典の販売

＼ AFFINGER6にも対応済み ／

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ＆役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

特典詳細ページへ移動する