【WordPress】記事内に「表(テーブル)」を使用する【超初心者】

 

記事のデザインの幅が広がります。

 

記事に文字以外の情報を入れて分かりやすくすることは大切です。

WordPressでは記事内に、画像音声データの挿入ができました。

関連:【WordPress】「メディア」を使用し記事に画像を挿入する【超初心者】

関連:【WordPress】「メディア」を使用して音楽などの音声データを記事に挿入する【超初心者】

 

また、見出しのデザインを変更することもできます。

関連:【WordPress】CSSとHTMLの知識なしでデザイン見出しを作成する【超初心者】

 

しかしまだまだ使ったことがない機能があります。

今回は「表」を使用していきたいと思います。


表を挿入する

まずプラグイン「TinyMCE Advanced」が導入されていることが前提です。

導入の方法は以下を参考にしてください。

関連:【WordPress】「プラグイン」を使う(TinyMCE Advancedの導入)【超初心者】

 

投稿画面のメニューから「テーブル」ボタンをクリックします。

 

テーブルから好きなサイズを選択します。

 

以上で表の挿入が完了です。

あとは自由に文字を入力するだけです。

 

簡単ですね。


表の編集

次は挿入した表を編集します。

まずは言葉の意味を確認しましょう。

 

  • セル・・・表のマス目のこと

  • 行・・・セルを横に並べたもの

  • 列・・・セルを縦に並べたもの

これらを編集します。

 

編集

表の編集をするのは難しくありません。

まずは編集したい場所を選択します。

セルを選択するときはカーソルを置くだけで大丈夫です。

行や列はドラッグで選択しましょう。

今回は1行目を選択しました。

「テーブル」ボタンから「セルのプロパティ」を選択します。

 

するとメニューのボックスが出てきます。

「一般」タブでは幅や高さの変更ができます。

ここに私がしばらくやらかしていた点があります。

幅や高さを設定する際は「%」で設定するようにしましょう。

数字(px)で設定してしまうと、見る画面の幅によっては入りきりません。

スマホだと確実に画面外に表がはみ出て見えなくなってしまいます。

%で設定することで画面の大きさによって変わってくれます。

 

次は「詳細」タブです。

「詳細」タブでは枠線や背景の色が変更できます。

 

早速「背景色」を変更してみます。

右側の四角のボタンをクリックします。

 

すると色の画面に移るので、ここから好きな色を選ぶだけです。

 

割と感覚で変更できるので色々変更してみてください。

以下はいろいろ変えた結果です。

セルの幅を設定し、文字を入力していくと2行にわたっていくことがあります。

改行すると勝手に高さが変わります。

 ひどいデザインです。
 画像を挿入することもできます。

高さは勝手に変わります。

 

 

センスがない・・・!

 

デザインセンスも練習できっと身に付きます。(願望)

センスは置いておいて、この表は以下の設定です。

 

  • 高さ・・・設定なし
  • 表全体の幅・・・100%
  • 左の列の幅・・・60%
  • 右の列の幅・・・設定なし
  • 枠線と背景の色・・・適当に

 

幅の設定を「%」ですることが大切です。


今回のまとめ

表の挿入と編集を行いました。

感覚的に操作できるのですが、1点注意が必要な点がありました。

幅を「%」で設定することです。

これにより画面の大きさによってサイズが自動で変わります。

それさえ注意すれば、あとは自分のセンスに合わせて変更しましょう。

 

センス欲しい・・・!

 

頑張りますよ!

ちなみにトップページの挑戦中リストも表でできています。

 

ここまでお読みいただき、ありがとうございました。

 

関連:知識ゼロからホームページ作成・公開するまでの手順と公開後の作業まとめ<画像付き>