AFFINGER5(WING)の表カスタマイズイメージ画像

ツール・テーマ

AFFINGER5(WING)でつくる表(table)を【簡単に】カスタマイズする方法!

秋田です。

AFFINGER5(WING)の表は(割りと)淡泊・シンプルです。
他の機能・デザインが素晴らしいだけに人によってはちょっとがっかり、という人もいるかも知れません。

追加で「専用のプラグイン」を求める手もありますが・・・コスト負担が発生しますのでカスタマイズでいきたいと思います。
また、一般のプラグインの追加も避ける形でのカスタマイズです。

ズバリ・・・AFFINGER5(WING)で作成した表の標準形は下表のような感じになります。
商品A~といったタイトル部分を<th>商品A</th>といった記述にしてもシンプルなままの表となってしまいます。

矢印イメージ画像

商品A 商品B 商品C
・商品Aはこんな特徴です。
・価格
・商品Bはこんな特徴です。
・価格
・商品Cはこんな特徴です。
・価格

それを・・・
ほんの気持ちだけでも「表」らしくするためのカスタマイズです。

矢印イメージ画像

商品A 商品B 商品C
・商品Aはこんな特徴です。
・価格
・商品Bはこんな特徴です。
・価格
・商品Cはこんな特徴です。
・価格

 

今回の記事は

・AFFINGER5(WING)の表を簡単に見やすくする方法

です。
 

姉妹サイト【PR】
宝くじ・ロト・トト

550円の体質改善(成功体質・夢実現体質・宝くじ当選体質)ツール


 

上のツールを使って【お小遣い稼ぎ】

毎月堅実に「ほったらかし」で1万円

※PC好きな人なら毎年新機種が買える!

 

AFFINGER5(WING)の表を簡単に見やすくする方法

外観 ⇒ カスタマイズ ⇒ 追加CSS

ズバリ・・・以下のように「追加CSS」の欄にコピペするだけです。

AFFINGER5の表をカスタマイズイメージ画像

下記のコードをWPのダッシュボードの「外観」「カスタマイズ」「追加CSS」にコピペするだけで完了です。
確実に保存「公開済み」をクリックしてください。

table{
width: 100%;
}

th{
background-color: #e4f6ff;
text-align: center;
}

カラーコードの部分(#e4f6ff)は自分の好きな色に変えてください。
 

記事内への文字入力(具体的な記事作成)のやり方

表を作成するためのタグは・・・下記のようにシンプルな形を前提としています。
(ほんとシンプルにシンプルに、です)

<table>
<tbody>
<tr><th></th><th></th><th></th></tr>
<tr><td></td><td></td><td></td></tr>
</tbody>
</table>

 
ただ・・・
実際の記事内への入力方法ですが・・・実は・・・追加CSSでのカスタマイズでも表の見出し部分の文字は太くなりません。
(セル内でのセンタリングはできるようになりますが)

それで個別に見出し部分の文字を太字にすることが必要です。

 

※ここの部分を太字にします ※個別に指定してやります ※こんな感じになります
太字という装飾で太字にします <span class="huto">太字</span> こんな感じになります

でも、それだと・・・
毎回毎回、「太字」の指定を文字入力時点でするのは面倒なので・・・(AddQuicktagに)登録しておきましょう。

矢印イメージ画像

AddQuicktagへの登録【便利です】

■ プラグインでAddQuicktagが有効化されていることが前提です。

AddQuicktagの設定イメージ画像

秋田秀一
では、そのやり方(登録の仕方)ですが・・・

【ボタン名】
「テーブル」でも「表作成」でも「表」でもいいかと思います。(自由にネーミングしてください)

【開始タグ】
次の部分をコピペしてください。

<table>
<tbody>
<tr>
<th><span class="huto">A</span></th>
<th><span class="huto">B</span></th>
<th><span class="huto">C</span></th>
</tr>
<tr>
<td>・A</td>
<td>・B</td>
<td>・C</td>
</tr>
</tbody>

【終了タグ】
以下の1行でOKです。(もちろん開始タグの最後の1行部分をこっちにくっつけても構いません)

</table>

右側の3つのチェックを入れて「変更を保存」を確実にクリックしてください。
以上で完了です。

あとは、記事入力の際に好きな位置で(登録したテーブル・表の)タグを挿入するだけです。
 

まとめ

AFFINGER5(WING)表のカスタマイズイメージ画像
本来ならCSSをバッチリとカスタマイズして対応すべきだと思いますが・・・臨時的な対処編という形でのカスタマイズです。
それでも十分に実践に耐えると思います。

【まとめ】
・簡単なやり方(2ステップ)で見映えよくカスタマイズできます。
・【1ステップ】外観⇒カスタマイズ⇒追加CSSにコピペ。
・【2ステップ】実際に文字入力のタグをAddQuicktagに登録しておくと便利。

ほんとのひと手間で表作成が見違えるようにカスタマイズできます。
お試しください。
 

ここまで本当にありがとうございました。

 

スポンサードリンク



 

-ツール・テーマ

Copyright© 副業専門学校 , 2020 All Rights Reserved.