勉強したことをアウトプット

WordPress で 表 ( テーブル )を速く作る方法 ~縦横のマス目の 大きい数字をとって表を作る → セルの結合 をする ~

WRITER
 




この記事を書いている人 - WRITER -
詳しいプロフィールはこちら

 

 

こんにちは!めんか( @menkakaka )です。

 

WordPress で「 表 」を速く作る方法について考えてみました。

 

 

  1. 表の縦横のマス目( 行と列 )の 大きい数字をとって表を作る。
  2. 「セルの結合」をさせていく。

 

これで 行の追加や削除などをしてゴチャゴチャになることがない。

 

ダッシュボード画面にある( 1工程前に戻る ) 🔍 アイコンも駆使して効率的に作ることが出来ます。

 

「 お手本 」 と 「 これから作ろうとする テーブル 」を 1ページ内 で見ることが出来て便利です。

 

 

 

元になる表を作る

 

 

 

お手本はこれ。

 

 

 

 

 

「行」の一番多い所で13行

「列」の一番多い所で4列

 

 

 

 

 

13行×4列の表をまず作る。。。。のですが、

 

Worepress のテーブルは「10行×10列 」までしか最初 作れないので とりあえず「10行」×「4列」の表を作る。

 

 

 

 

 

「10行」×「4列」の表 出来ました。

 

 

 

 

 

これに「3行」上か下に追加すれば「13行×4列の表 」の出来上がり。

 

3行分どこの部分でも良いので ドラッグしたら「ツールバーのテーブルアイコン」から「 行を下 or 上に挿入 」を選択。

 

絵は4行になっている、失礼😅

 

 

 

「 13行×4列の表」ができました。

 

       
       
       
       
       
       
       
       
       
       
       
       
       

 

 

 

セルを結合させる

 

 

「 13行×4列の表」で、セルの結合をしていきます。

 

このとき、大体で良いのでお手本と形を合わせておくと混乱しません。

 

枠線上にカーソルを合わせると出てくる アイコンで枠線が移動します。

 

 

 

 

セルを結合したい範囲をドラックで範囲指定

「テーブルアイコン」から「セルの結合」を選択します。

 

 

 

 

 

こうして、どんどんセルの結合を繰り返します。

 

 

 

 

 

お手本画像のキャプチャでも撮って、貼っておくのも良いですね。

 

「ズーム」で表示を小さく縮小すると全体像が俯瞰できて尚 ◯ 。

 

 

 

 

 

間違えたら、( 1工程前に戻る )アイコンで すぐ前に簡単に戻れます。

 

 

 

 

 

 

「 13行×4列の表」完成

 

       
 
 
 
 
 
 
     
 
 
 
   
 

 

 

 

こうして、とりあえず体裁を整えながら作ったテーブルですが、もう一つやらなくてはいけないことがあるとのこと。

 

 

「表のプロパティ」画面で幅や高さの欄を空欄に戻す。

 

 

 

 

⇔ で 表をいじると「 幅 」「 高さ 」に  数字が入ってしまいます。

 

 

 

 

 

「表のプロパティ」で数値を無効にする。

 

 

 

 

数字を消して空欄に。。。

 

コレで特にスマホ表示にしたときの表記崩れがなくなります。

 

 

 

 

テーブルをパソコンで見たところ。

 

 

 

 

 

スマホで見たところ。

 

 

アドセンス広告でもいうところの「 レスポンシブ表示 」になったというわけですね。

 

 

 

 

 

 

 

 

 

 

 

 

この記事を書いている人 - WRITER -
詳しいプロフィールはこちら
スポンサードリンク




スポンサードリンク

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Copyright© めんかの 毎日が自由研究 , 2019 All Rights Reserved.