AFFINGER5

【備忘録】WPでテーブル(表)の作成

どもども!

めだゆんです!(@medayoonblog)

今回は久々にWP(ワードプレス)の記事。

テーブルでの表作成についてです!

[toc]

はじめに

ボクは皆さんご存知のとおり、キャンプギアやガジェットのレビュー記事をダレトクに書き連ねているわけなんですけれども…!

めだゆん
誰が興味あるねん!

レビュー系の記事を書いていると必ずと言っていいほど表の記載があるわけなんですね。

 

そこでまだ全くWPについて熟知していない「WPでのテーブル(表)作成どないしたらいいねん難民」の方向けに、初心者にまばらに毛が生えたであろう私めだゆんがテーブル(表)作成について解説していきます!

 

テーブル(表)作成って何?

一応、これは恒例(記事の文字数稼ぐパターン)のやつなので説明していきますが、

 

OfficeのWordでは表の挿入をすればいいという一般的な作業なのに、WPになると頭がパニックになって

めだゆん
一体どうしたらいいんだ・・・。

と膝から崩れ落ちそうになった経験があったのでこの記事を書いております。

 

テーブル(表)作成にはAdvanced Editor Tools(TinyMCE Advanced)のプラグインが必要!

Advanced Editor Toolsって?

Advanced Editor Toolsとはエディタメニュー・ツールバーを拡張しカスタマイズが可能なプラグインです。

文章作成時に役立つ任意のクイックメニューをトップページ下のツールバーに表示することが出来ます。

今回、テーブル(表)作成にあたって、Advanced Editor Toolsを使用していますので導入がお済みでない方はこの機会に是非インストールしてみてください。

 

テーブル(表作成)とりあえずやってみよう。

おそらくここはスキップしても問題ないところではございますが、それでは商売が成り立ちませんのでもちろん詳しく書いていきます。

STEP1.

▼まずはトップページのツールバーから【テーブル】を選択

STEP2.

一番上の格子状のマークがついた【テーブル】にカーソルを合わせると表示させたい表の選択範囲を選択できるのでそちらでお好みのサイズを選択します。

GOAL

自分が頑張って表示させた表を見ながら「WPを使いこなせているオレどう・・・!??」と自分に酔いしれて完成!

テーブル(表作成)とりあえずいじってみよう。

表が出来て自分に酔いしれたのちは、「このままのキミも素敵だよ」と褒めてあげても良いんですが、せっかくなんでもう少し見栄えを整えていきましょうか。

ヘッダーセルで見出しの見栄えを良くする

STEP1.

▼例として「YOU アンド ME」をヘッダーに指定してみます。

まずはヘッダーに指定したいセルを選択しておきます。

【テーブル】→【セル】→【セルのプロパティ】

の順に選択。

STEP2.

次に

【セルの種類】→【ヘッダーセル】

を選択。

中央揃えや左右寄せがしたい場合は

【セルの種類】の下にある【横配置】【縦配置】からお好みで。

GOAL

見栄えの良いヘッダーが完成しましたね♪

どこがだね・・・?
めだゆん
YOU アンド ME
ボクは キャンプが 恋人

※ヘッダーに指定されたセル内の項目は自動的に太字に変換されます。

ここまでくるとチラチラと「カラム」ってワードが目にちらついて見て見ぬふりをしている方も数名いらっしゃると思いますので調べるの面倒だと思いますから代わりにボクがお答えしておきます。

カラムとは

ソフトウェア操作において表作成などで縦列をカラム(Column)という。

サンプルの表においては「YOUカラム」「アンドカラム」「MEカラム」と表現することになるね。

ちなみに横列をロウ(Row)というよ。

めだゆん
エクセルなんかでは普通に使う用語みたい。知らんかった⤵

セルの色を変えてみる

STEP1.

任意のセルの範囲(ここではYOUアンドME)を選択します。

先ほどと同様に

【テーブル】→【セル】→【セルのプロパティ】

の順に選択。

 

STEP2.

次に

【高度な設定】→ 枠線の色,背景色 

任意のカラーを選択します。

GOAL

完成だね。すごいカラーセンスであることは否めないね!

表の枠線を変更してみる

ここからは枠線を変更してきますよ!

枠線のスタイルを変更する

セルのプロパティ の 高度な設定 から【Border style】の項目を開くと11種類のラインスタイルが変更できます。

順番に見ていきましょうか。

 

Select...:任意のスタイルを入力

俺の屍を超えていけ

 

Solid:実線

俺の屍を超えていけ

 

Dotted:点線

俺の屍を超えていけ

 

Dashed:破線

俺の屍を超えていけ

 

Double:二重線

俺の屍を超えていけ

 

Groove:線をくぼませる

俺の屍を超えていけ

 

Ridge:線を隆起させる

俺の屍を超えていけ

 

Inset:セルをくぼませる

俺の屍を超えていけ

 

Outset:セルを隆起させる

俺の屍を超えていけ
めだゆん
Grooveより下4つはほぼ同じに見えるな⤵

なし

俺の屍を超えていけ

 

Hidden:隠すって意味らしい。

俺の屍を超えていけ

 

 

枠線の太さを変える

先ほどからお伝えしている手順で【高度な設定】まで移行する。

▼スタイルの項目に

; border: 〇px ◇◇◇

注意ポイント

〇には数字を入力する。

◇にはラインスタイルを入力する。

「 : 」と「 px 」の後ろに半角スペースを入力すること。

例:線の太さが5pxの実践を入力する場合

➡ border: 5px Solid

 

画像も挿入できる

セルの中に画像を添付するだけ!

 XBOX ワイヤレスコントローラー

【X BOXワイヤレスコントローラー】レビュー!接続設定からProコン比較まで

おわりに

皆さんもテーブル(表)を作成して、ステキなブログ運営を!

【AFFINGER5】ヘッダーメニューの設定方法

キーワードプランナー登録方法【2021年版最新】

-AFFINGER5
-,