ニートブログむらくもの野望

13歳で働いた元少年労働兵がアラサーニートで人生を生ききる為に『やれたらやる』ブログ。「もしかしたらこれやったら違う日になるかも」

ワードプレスブログ

【ワードプレスでテーブル表を使う】素人さんメモ!比較表や何かに使うWordPressで表をつくるやり方。(行列のみかた)

投稿日:

ワードプレス テーブル表 WordPress テーブル表の使いかた

比較表や何かの表を作りたいときにはテーブルという表を使う。ここでは万能プラグインの1アプリを使ってワードプレスでテーブル表を使うやり方。行や列の増やし方、色の付け方、セルの結合など。

プラグイン「TinyMCE Advanced」という万能エディットツール

bandicam-2016-10-07-11-50-36-084

「https://wordpress.org/plugins/tinymce-advanced/」

ワードプレス管理画面から「プラグイン」→「新規追加」→「TinyMCE Advanced」からインストール有効化でもOK

このプラグインは本当に万能だから入れておいて損はないのではないか。ワードプレス管理画面から「設定」→「TinyMCE Advanced」→好きなアプリをいつものエディターにセットすると、記事を書く際にソレが使えるようになる。

 

 

【基本】テーブル表の見かた(特に「行列」とはなんぞ?)

bandicam-2016-10-07-09-41-19-6381000000

このプラグインの名称から見た場合、「上下のコマ増減=行」であり「左右のコマ増減=列」となる。

※横並び=「行」、縦並び=「列」が正しいのは、「数学での行列の定義」だとか。※ここでは「列は左右」、「行は上下」という「プラグインの指定文から見た行列の定義」のために行がタテのラインで列がヨコのラインとしているよ。※「行を1行」と捉えればヨコなのだが、「行を1マス」と捉えると上下に増減することになるっぽいね。タブンね。テーブル表 行列の定義つまりこういうことなのですよ多分。「コマ数の増減」でみると逆転してしまうというお話。

①のアプリでテーブル表を作成。

bandicam-2016-10-07-10-14-41-215

プラグイン「TinyMCE Advanced」で追加したアプリから使う。

②は『テーブル表』

bandicam-2016-10-07-09-44-45-239

よく見るテーブル表。比較表などに用いる。レスポンシブ(自動可変)対応である。ブログテンプレートデザインがそうであった場合ではあると思うけど。

③は『列』で「左右に増えるコマ」

bandicam-2016-10-07-10-30-36-417

「列」は横に増減するラインのこと。※「列を1列」と捉えれば基本はタテなのだが(状況次第「縦列」「横列」あるように)、「列を1マス」と捉えると左右に増減することになるっぽいね。

④は『行』で「上下に増えるコマ」

bandicam-2016-10-07-10-31-01-885

「行」は縦に増減するラインのこと。※「行を1行」と捉えればヨコなのだが、「行を1マス」と捉えると上下に増減することになるっぽいね。

⑤は『セル』

bandicam-2016-10-07-10-03-32-358

「セル」はひとコマそれ自体のこと。

 

 

テーブル表の最低限の使い方

テーブル表の作り方

「テーブルを挿入」→ 行と列を任意のサイズで作成

bandicam-2016-10-07-10-42-10-047

完成

草タイプ炎タイプ水タイプ
フシギダネヒトカゲゼニガメ
チコリータヒノアラシワニノコ

これでOK。

 

「列」の増やし方

増やしたい場所を選択→ 「列」→ 右か左に選択

bandicam-2016-10-07-10-40-47-082

完成

シリーズタイトル草タイプ炎タイプ水タイプ
赤/緑フシギダネヒトカゲゼニガメ
金/銀チコリータヒノアラシワニノコ

これでOK。

 

「行」の増やし方

増やしたい場所を選択→ 「行」→ 上か下に選択

bandicam-2016-10-07-10-41-07-296

完成

初代ポケモン歴代御三家   
シリーズタイトル草タイプ炎タイプ水タイプ
赤/緑フシギダネヒトカゲゼニガメ
金/銀チコリータヒノアラシワニノコ

これでOK。

 

 

セルの結合

「このセルの列を4列分にする」

①セルの選択

②「セルの結合」→「列4行1」

初代ポケモン歴代御三家   
シリーズタイトル草タイプ炎タイプ水タイプ
赤/緑フシギダネヒトカゲゼニガメ
金/銀チコリータヒノアラシワニノコ

After(+文字中央揃え)

初代ポケモン歴代御三家
シリーズタイトル草タイプ炎タイプ水タイプ
赤/緑フシギダネヒトカゲゼニガメ
金/銀チコリータヒノアラシワニノコ

これでOK。これは「このセルの行を4列分にする」という意味になるかと。「初代ポケモン全種」みたいなテーブル表全体の見出しなどに使えるね。

 

「このセルの行を3行分にする」

①セルの選択

②「セルの結合」→「列1行3」

電池サイズ容量充電時間/2個または4個
単3電池Min. 2400 - 2500mAh約8時間
 Min. 1900 - 2000mAh約6時間
 Min. 950 - 1000mAh約3時間
単4電池Min. 900 - 950mAh約6時間
Min. 750 - 800mAh約5時間

After

電池サイズ容量充電時間/2個または4個
単3電池  Min. 2400 - 2500mAh約8時間
Min. 1900 - 2000mAh約6時間
Min. 950 - 1000mAh約3時間
単4電池Min. 900 - 950mAh約6時間
Min. 750 - 800mAh約5時間

これは「このセルの行を3行分にする」という意味になるかと。ここまでポケモンで来ておいてからのエネルギー表。「最初にもらえるポケモン」は「フシギダネ」、「ヒトカゲ」、「ゼニガメ」みたいなテーブルに使えるね。

 

 

色つけ

初代ポケモン歴代御三家
シリーズタイトル草タイプ炎タイプ水タイプ
赤/緑フシギダネヒトカゲゼニガメ
金/銀チコリータヒノアラシワニノコ
ルビー/サファイアキモリアチャモミズゴロウ
ダイヤモンド/パールナエトルヒコザルポッチャマ
ブラック/ホワイトツタージャポカブミジュマル
X/Yハリマロンフォッコケロマツ
サン/ムーンモクロウニャビーアシマリ

①色を変えたいセルを選択(ドラッグで複数選択可)

bandicam-2016-10-07-09-21-14-598

②セル →③セルプロパティ →④詳細 →⑤背景色

初代ポケモン歴代御三家
シリーズタイトル草タイプ炎タイプ水タイプ
赤/緑フシギダネヒトカゲゼニガメ
金/銀チコリータヒノアラシワニノコ
ルビー/サファイアキモリアチャモミズゴロウ
ダイヤモンド/パールナエトルヒコザルポッチャマ
ブラック/ホワイトツタージャポカブミジュマル
X/Yハリマロンフォッコケロマツ
サン/ムーンモクロウニャビーアシマリ

こんな感じ。

 

 

注意点

「スマホ不利」サイズ指定するとレスポンシブしない。

表の仕切りラインを動かすとサイズを指定できてしまうのだが(数値で打ち込むことも出来るが)、それをやるとスマホレスポンシブに対応しない。自動で表示ページ(ブラウザページ)のサイズに合わせて可変してくれるのがレスポンシブデザインだが、これだと美しくないし見づらい。

仕切り線を触ってしまうと…

bandicam-2016-10-07-09-07-15-764

サイズ値が挿入されてしまう。

bandicam-2016-10-07-09-05-56-648

ページが狭くなると…

bandicam-2016-10-07-09-06-15-469

本来のレスポンシブデザインならこうなる。

bandicam-2016-10-07-09-06-37-741

ということで、もしレスポンシブになっていなければ「テーブル表のサイズ値」をみてみよう。知らずに仕切り線に触れている可能性がある。

触っちゃったなと思ったらエディターの「戻るボタン(取り消し)」で戻るなどしよう。気付くのが遅いならセルやテーブルのプロパティから指定値を消すのだ。あるいは作り直すか。

ただし、

「セル内の文字数が多く、なおかつセル数が多い表の場合はレスポンシブしきれない」

という場合もある。

bandicam-2016-10-07-09-17-03-419

こんな感じに見切れてしまう箇所も。文字数やセル数を調整するしかないかな。

 

 

 

色々やるとこんな感じに。

初代ポケモン歴代御三家
シリーズタイトル草タイプ炎タイプ水タイプ
赤/緑フシギダネヒトカゲゼニガメ
金/銀チコリータヒノアラシワニノコ
ルビー/サファイアキモリアチャモミズゴロウ
ダイヤモンド/パールナエトルヒコザルポッチャマ
ブラック/ホワイトツタージャポカブミジュマル
X/Yハリマロンフォッコケロマツ
サン/ムーンモクロウニャビーアシマリ
いきなりだけどボクの好きなポケモン属性とか関係ない
リザードンミュウツーカイリュー
ピジョットゴウカザルムクホーク
ギラティナニョロボンライチュウ
バンギラスギャラドスピッピ

自由な表だね。

ニートに感謝したい場合はここにクリックを受け付ける用意がありますよ。


ニートに感謝したい場合はここにクリックを受け付ける用意がありますよ。

にほんブログ村 その他日記ブログ ニート日記へ
にほんブログ村

スポンサーリンク

スポンサーリンク

関連記事/広告もある(テスト)

-ワードプレスブログ
-,

Copyright© ニートブログむらくもの野望 , 2017 All Rights Reserved Powered by STINGER.