広告 AFFINGER

AFFINGER5【コピペで使える表10選】カスタマイズ方法も紹介

2020年7月7日

表作成

AFFINGER5で使える表のサンプルデザインを10個作成しました。

使い方は簡単!コピペするだけ。

自分の好みに合わせてカスタマイズする方法も紹介しています。

 

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

小豆
小豆
AFFINGER5の使い方にはだいぶ慣れてきたけど、表だけが思い通りに作れない。
コピペで使える表のリストがあると嬉しいんだけどなぁ。

【AFFINGER5】コピペで使える表とその使い方

記事内ではAFFINGER5で使える10種類の表を紹介しています。

より好みに合わせて使えるよう、1つの表を異なる4パターンごとに分けました。

 

こんな感じで紹介していきます。


  • 表イメージ

         
         

  • コピペで使える表のコード


  • テキストなしのコード


  • 列の幅をスッキリさせたコード


  • さらに列の幅をスッキリさせたコード


 

注意事項

AFFINGER5の設定で表のカスタマイズをしている場合は、表示されるデザインが異なります。

表のカスマイズ設定

たとえば、同じコードをコピペした場合でもこんな違いが出ます。

表のカスタマイズ設定をしていない場合

  見出し1 見出し2
見出しA テキスト テキスト

 

表のカスタマイズ設定をしている場合

  見出し1 見出し2
見出しA テキスト テキスト

 

表のカスタマイズ設定は以下の手順で確認できます。

WordPressメニュー外観カスタマイズオプションカラーtable(表)

 

 

表の作成にはプラグイン【TinyMCE Advanced】を使用しています。

プラグイン

コピペで使える表10選【4パターンごと紹介】

デザインの異なる表を10種類、4パターンごと紹介していきます。

自分のブログに合わせやすいデザインを選んでコピペして使ってください。

10種類の表サンプル

  1. 装飾なしの表
  2. 交互に色のついた表
  3. カラーヘッダーの表【行】
  4. カラーヘッダーの表【列】
  5. モノトーンの表【行】
  6. モノトーンの表【列】
  7. カラフルな表【行】
  8. カラフルな表【列】
  9. 枠線なしの表 モノトーン
  10. 枠線なしの表 カラフル
大福
大福
コピーしたコードは、必ずテキストエディタに貼り付けてね。

 

❶ 装飾なしの表

  見出し1 見出し2 見出し3
見出しA テキストA テキストB テキストC
見出しB テキストD テキストE テキストF
見出しC テキストG テキストH テキストI

 

  • テキストなしの表
       
       
       
       

 

  • 列の幅をスッキリさせた表
  見出し1 見出し2 見出し3
見出しA テキストA テキストB テキストC
見出しB テキストD テキストE テキストF
見出しC テキストG テキストH テキストI

 

  • さらに列の幅をスッキリさせた表
  見出し1 見出し2 見出し3
見出しA テキストA テキストB テキストC
見出しB テキストD テキストE テキストF
見出しC テキストG テキストH テキストI

 

❷ 交互に色のついた表

  見出し1 見出し2 見出し3
見出しA テキストA テキストB テキストC
見出しB テキストD テキストE テキストF
見出しC テキストG テキストH テキストI

 

  • テキストなしの表

 

  • 列の幅をスッキリさせた表

 

  • さらに列の幅をスッキリさせた表

 

❸ カラーヘッダーの表【行】

  見出し1 見出し2 見出し3
見出しA テキストA テキストB テキストC
見出しB テキストD テキストE テキストF
見出しC テキストG テキストH テキストI

 

  • テキストなしの表

 

  • 列の幅をスッキリさせた表

 

  • さらに列の幅をスッキリさせた表

 

❹ カラーヘッダーの表【列】

  見出し1 見出し2 見出し3
見出しA テキストA テキストB テキストC
見出しB テキストD テキストE テキストF
見出しC テキストG テキストH テキストI

 

  • テキストなしの表

 

  • 列の幅をスッキリさせた表

 

  • さらに列の幅をスッキリさせた表

 

⑤ モノトーンの表【行】

  見出し1 見出し2 見出し3
見出しA テキストA テキストB テキストC
見出しB テキストD テキストE テキストF
見出しC テキストG テキストH テキストI

 

  • テキストなしの表

 

  • 列の幅をスッキリさせた表

 

  • さらに列の幅をスッキリさせた表

 

❻ モノトーンの表【列】

  見出し1 見出し2 見出し3
見出しA テキストA テキストB テキストC
見出しB テキストD テキストE テキストF
見出しC テキストG テキストH テキストI

 

  • テキストなしの表

 

  • 列の幅をスッキリさせた表

 

  • さらに列の幅をスッキリさせた表

 

❼ カラフルな表【行】

  見出し1 見出し2 見出し3
見出しA テキストA テキストB テキストC
見出しB テキストD テキストE テキストF
見出しC テキストG テキストH テキストI

 

  • テキストなしの表

 

  • 列の幅をスッキリさせた表

 

  • さらに列の幅をスッキリさせた表

 

❽ カラフルな表【列】

  見出し1 見出し2 見出し3
見出しA テキストA テキストB テキストC
見出しB テキストD テキストE テキストF
見出しC テキストG テキストH テキストI

 

  • テキストなしの表

 

  • 列の幅をスッキリさせた表

 

  • さらに列の幅をスッキリさせた表

 

❾ 枠線なしの表 モノトーン

  見出し1 見出し2 見出し3
見出しA テキストA テキストB テキストC
見出しB テキストD テキストE テキストF
見出しC テキストG テキストH テキストI

表の枠線を白に設定しています。
サイトの背景色が白以外の場合は、枠線が表示されます。

 

  • テキストなしの表

 

  • 列の幅をスッキリさせた表

 

  • さらに列の幅をスッキリさせた表

 

❿ 枠線なしの表 カラフル

  見出し1 見出し2 見出し3
見出しA テキストA テキストB テキストC
見出しB テキストD テキストE テキストF
見出しC テキストG テキストH テキストI

表の枠線を白に設定しています。
サイトの背景色が白以外の場合は、枠線が表示されます。

 

  • テキストなしの表

 

  • 列の幅をスッキリさせた表

 

  • さらに列の幅をスッキリさせた表

コピペした表のカスタマイズ方法

コピペした表をカスタマイズする方法をまとめました。

表のカスタマイズ

  1. セルの色を変更
  2. 行の追加と削除
  3. 列の追加と削除
  4. 太字の見出しを細字に

 

セルの色を変更

セルのカラーを変更

  1. 色を変更したいセルにカーソルを合わせる
  2. テーブルアイコンセルセルのプロパティ高度な設定背景色
  3. 背景色にHTMLカラーコードを入力

同時に複数のセルの色を変更したいときは、色を変更したいセルを全て選択した状態で背景色の設定を行います。

 

行の追加と削除

行のプロパティ

  1. 行を追加したいセルにカーソルを合わせる
  2. テーブルアイコン
  3. 「行を上に挿入」「行を下に挿入」「行を削除」から任意のものを選択

 

列の追加と削除

列のプロパティ

  1. 列を追加したいセルにカーソルを合わせる
  2. テーブルアイコン
  3. 「列を左に挿入」「列を→に挿入」「列を削除」から任意のものを選択

 

太字の見出しを細字に

AFFINGER5の設定で「縦一列目を太字にする」「横一列目を太字にする」にチェックが入っていると、見出しの文字が自動的に太字になります。

設定の確認方法

WordPressメニュー外観カスタマイズオプションカラーtable(表)

 

見出しテキストが太字

  見出し1 見出し2
見出し1 テキスト テキスト

太字になっている見出しの文字を細字に戻したいときは、以下の操作を行います。

太字から細字へ変換方法

太字から細字へ

テキストエディタに切り替え、細字に戻したいテキストを<span style="font-weight: lighter;">テキスト</span>で囲います。

 

まとめ:思い通りの表を作ろう

現在僕は、AFFINGER5使用歴2年目。

AFFINGER5は機能が豊富過ぎて、使い始めの頃は全然使いこなせませんでした。

その中でも苦戦したのが表の作成。

というわけで、今回はコピペで簡単に使える表を作成しました。

僕同様に表の作成に苦戦しているAFFINGER5ユーザーさんのお役に立てれば嬉しいです。

 

小豆
小豆
コピペではなく、思い通りの表を自分で作れるようになりたい。

こんな人には、こちらの記事が参考になるはずです。

見やすい表の作り方
AFFINGER5見やすい表の作り方【手順を全て解説】

続きを見る

 

 

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

\ AFFINGER6にも対応済み /

オリジナル特典バナー

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

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

  • AFFINGER5利用者向けカスタマイズ集 9選
  • AFFINGER利用者向けカスタマイズ&役立つテクニック 14選

 

2022年1月1日より期間限定で割引販売いたします。
・利用者向けカスタマイズ集 9選:2,980円 → 2,480円
・カスタマイズ&役立つテクニック 14選 4,980円 → 3,980円

 

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

Sponsored Links

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴5年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-AFFINGER