かんたんシャープレシオ【2021年6月】更新しました

WordPressへExcelをかんたんに貼付ける(超初心者向け)

WordPressにExcelを手早く貼り付ける考える

WordPress における表(table)作成

効率的に blog 作成するために、Excel で作成・加工した表をそのまま WordPress に貼り付けられると便利。

Excelで制作者がイメージをもってデザインした表がそのままできるだけノーコードで blog にアップできると嬉しい。

初心者が、function.php を書き換えたり、HTML/CSS のコードを触ることもない方法が存在するかを確認。

Gutenberg

段落ブロックにそのままExcelからコピーを貼付け(Ctrl+V)

単純な表の貼付け

コード業種
1製造業
11プロセス
12ディスクリート
2非製造業
21建設
22サービス
23情報

シンプルにそのままうまくいった。
後はテーブルブロックの機能選択により、以下のデザイン変更が可能。

  • 表のセル幅を固定
  • ヘッダーセクション
  • フッターセクション

単純な表の貼付け + 表のセル幅を固定

コード業種
1製造業
11プロセス
12ディスクリート
2非製造業
21建設
22サービス
23情報

シンプルにそのままうまくいった。
この機能は、複数の列を同じ幅にして、等分に画面表示する。

セル結合した表の貼付け

業種
 製造業
  プロセス
  ディスクリート
 非製造業
  建設
  サービス
  情報

残念ながら、セル結合した表は崩れてしまう。

列幅が広い表の貼付け

コード業種摘要
1製造業 
11プロセス一般的に総合原価計算を用いて原価計算がなされる。在庫生産、見込み生産の体制が組まれることが多い。
12ディスクリート一般的に個別原価計算を用いて原価計算がなされることが理想とされる。受注生産の体制が組めることがベストである。
2非製造業 
21建設 
22サービス 
23情報 

<投稿幅を超える表幅の場合で、自動で横スクロールする設定になっている>
自動で横スクロール機能が効く。
作者が横スクロールさせるイメージで表を作成したいなら便利。
→このサイトは、WordPress無料テーマの『Cocoon』が提供する自動横スクロール機能を使用している。

<投稿幅を超える表幅の場合で、自動では横スクロールする設定になっていない>
全幅に収まるように、セル内の文字列が自動改行される。
作者が自動改行させて全部表示させるイメージで表を作成したいなら便利。

列幅が広い表の貼付け + 表のセル幅を固定

コード業種摘要
1製造業 
11プロセス一般的に総合原価計算を用いて原価計算がなされる。在庫生産、見込み生産の体制が組まれることが多い。
12ディスクリート一般的に個別原価計算を用いて原価計算がなされることが理想とされる。受注生産の体制が組めることがベストである。
2非製造業 
21建設 
22サービス 
23情報 

自動で横スクロール機能が効く(Cocoon 機能より)。
しかし、文字列が表からはみ出す。

列幅が広い表の貼付け + エディタ内で改行

コード業種摘要
1製造業 
11プロセス一般的に総合原価計算を用いて原価計算がなされる。
在庫生産、見込み生産の体制が組まれることが多い。
12ディスクリート一般的に個別原価計算を用いて原価計算がなされる
ことが理想とされる。受注生産の体制が組めることが
ベストである。
2非製造業 
21建設 
22サービス 
23情報 

Excelを貼付け後、エディタ(Gutenberg)内で、改行(Shift+Enter)してみた。
作者の思い通りの改行が実現できるが、手間がかかる。
スマホでは、自動で横スクロール機能が発動する(Cocoon 機能より)。

列幅が広い表の貼付け + エディタ内で改行 + 表セル幅の固定

コード業種摘要
1製造業 
11プロセス一般的に総合原価計算を用いて原価計算がなされる。
在庫生産、見込み生産の体制が組まれることが多い。
12ディスクリート一般的に個別原価計算を用いて原価計算がなされる
ことが理想とされる。受注生産の体制が組めることが
ベストである。
2非製造業 
21建設 
22サービス 
23情報 

セル幅は等分になるが、当分列幅より長い文字列は、横スクロールが自動で発動したうえに表からはみ出してしまう。
スマホでは、自動で横スクロール機能が発動する(Cocoon 機能より)。

列幅が広い表の貼付け + Excelで改行された表の貼付け

コード業種摘要
1製造業 
11プロセス一般的に総合原価計算を用いて原価計算がなされる。
在庫生産、見込み生産の体制が組まれることが多い。
12ディスクリート一般的に個別原価計算を用いて原価計算がなされる
ことが理想とされる。受注生産の体制が組めることが
ベストである。
2非製造業 
21建設 
22サービス 
23情報 

予め、Excel側で、該当セル内の文字列を手作業で改行(Alt+Enter)した表を貼付け。
上記と同様の結果が得られ、作者の思い通りの改行が実現できるが、同じく手間がかかる。
スマホでは、自動で横スクロール機能が発動する(Cocoon 機能より)。

プラグイン TinyMCE Advanced を使用して表を貼付け

ここでは、TinyMCE Advanced がインストール・設定済みであることを前提に、このプラグインによる Excel 表の貼付け動作を確認する。

段落ブロックの代わりに、「クラシック版の段落」を選択して、そこにExcel 表を貼り付ける。

単純な表の貼付け

コード業種
1製造業
11プロセス
12ディスクリート
2非製造業
21建設
22サービス
23情報

シンプルにそのままうまくいった。
これは、列幅が狭い表だからうまくいったように見えるだけ。
このプラグインは、Excelの表貼付けでは、自動で幅設定値(width)がなされる。
上表の場合は、プロパティで確認すると、「width: 120pt」が割り当てられている。

貼付け後、プラグインのテーブル機能から装飾・デザイン変更が可能。
その機能の中には、セル幅を調整するものを存在する。

ここでは、表をクリックする際に、「枠線に触れない」という作法を守っておく。
→枠線をアクティブにすることによって、セルの幅と高さが自動設定されてしまうため。

単純な表の貼付け + セル幅の自動設定

コード業種
1製造業
11プロセス
12ディスクリート
2非製造業
21建設
22サービス
23情報

上記の方法で、Excel 表を貼り付けた後、「テーブル▶表のプロパティ」から幅に設定されている「120pt(上表の場合)」を削除、つまり空欄にする。

→セル幅(列幅)の設定が解除されたことにより、表が投稿幅(全幅)に自動調整される。
この場合、表のどれか一つのセルの幅設定を無効にすることで、表全体の幅設定を無効化できる。

セル結合した表の貼付け + セル幅の手動修正

業種
 製造業
  プロセス
  ディスクリート
 非製造業
  建設
  サービス
  情報

表形式は崩れずに貼り付けることはできた。
Excel 表を貼り付けた後、「テーブル▶表のプロパティ」「12px」を設定した。

列幅が広い表の貼付け

コード業種摘要
1製造業 
11プロセス一般的に総合原価計算を用いて原価計算がなされる。在庫生産、見込み生産の体制が組まれることが多い。
12ディスクリート一般的に個別原価計算を用いて原価計算がなされることが理想とされる。受注生産の体制が組めることがベストである。
2非製造業 
21建設 
22サービス 
23情報 

表のプロパティを確認すると、上表については、自動でセル幅に「850」が設定されている。

<投稿幅を超える表幅の場合で、自動で横スクロールする設定になっている>
自動で横スクロール機能が効く。
作者が横スクロールさせるイメージで表を作成したいなら便利。
→このサイトは、WordPress無料テーマの『Cocoon』が提供する自動横スクロール機能を使用している。

<投稿幅を超える表幅の場合で、自動では横スクロールする設定になっていない>
全幅に収まるように、セル内の文字列が自動改行される。
作者が自動改行させて全部表示させるイメージで表を作成したいなら便利。

列幅が広い表の貼付け + セル幅の自動設定

コード業種摘要
1製造業 
11プロセス一般的に総合原価計算を用いて原価計算がなされる。在庫生産、見込み生産の体制が組まれることが多い。
12ディスクリート一般的に個別原価計算を用いて原価計算がなされることが理想とされる。受注生産の体制が組めることがベストである。
2非製造業 
21建設 
22サービス 
23情報 

Excel 貼付け後、枠線をダブルクリックまたはドラッグすることで、セルサイズの自動設定機能をアクティブにする。

自動で横スクロール機能が効く(Cocoon 機能より)。
しかし、セルの高さが無意味に高く設定されてしまった。

列幅が広い表の貼付け + セル幅の手動修正

コード業種摘要
1製造業 
11プロセス一般的に総合原価計算を用いて原価計算がなされる。在庫生産、見込み生産の体制が組まれることが多い。
12ディスクリート一般的に個別原価計算を用いて原価計算がなされることが理想とされる。受注生産の体制が組めることがベストである。
2非製造業 
21建設 
22サービス 
23情報 

自動で横スクロール機能が効く(Cocoon 機能より)。
「テーブル▶表のプロパティ」から、個々の列の適切な幅サイズを入力しようとしても、表全体のセル幅しか設定できない。

列幅が広い表の貼付け + エディタ内で改行

コード業種摘要
1製造業 
11プロセス一般的に総合原価計算を用いて原価計算がなされる。
在庫生産、見込み生産の体制が組まれることが多い。
12ディスクリート一般的に個別原価計算を用いて原価計算がなされる
ことが理想とされる。受注生産の体制が組めることが
ベストである。
2非製造業 
21建設 
22サービス 
23情報 

Excelを貼付け後、エディタ(TinyMCE Advanced)内で、改行(Shift+Enter)してみた。
制作者の思い通りの改行が実現できるが、手間がかかる。
そのうえ、表のプロパティから列幅を手動で設定変更しても、表全体の全幅表示は変わらない。
スマホでは、自動で横スクロール機能が発動する(Cocoon 機能より)。

列幅が広い表の貼付け + Excelで改行された表の貼付け

コード業種摘要
1製造業 
11プロセス一般的に総合原価計算を用いて原価計算がなされる。
在庫生産、見込み生産の体制が組まれることが多い。
12ディスクリート一般的に個別原価計算を用いて原価計算がなされる
ことが理想とされる。受注生産の体制が組めることが
ベストである。
2非製造業 
21建設 
22サービス 
23情報 

予め、Excel側で、該当セル内の文字列を手作業で改行(Alt+Enter)した表を貼付け。
上記と同様の結果が得られ、制作者の思い通りの改行が実現できるが、同じく手間がかかる。
そのうえ、表のプロパティから列幅を手動で設定変更しても、表全体の全幅表示は変わらない。
スマホでは、自動で横スクロール機能が発動する(Cocoon 機能より)。

まとめ

超初心者が、WordPressで blog などを制作するうえで、Excel 表を手早く設定するやり方として、貼り付けたいExcel 表のタイプから下記のとおり。

  • シンプルな表 → 2.1. Gutenberg – 単純な表の貼付け
  • 表幅が画面幅より大きい表 → 2.8. Gutenberg – Excelで改行された表の貼付け
  • セル結合がある表 → 3.3. TinyMCE Advanced + セル幅の手動修正

もちろん、静的テーブルを作成するのにうってつけの「TablePress」などの専用プラグインの使用や、HTML/CSS をコーディングする方が目的の表を作るのには最適であると考える。

あくまで、超初心者が最初に試みる手段の中から、目的別の解決策を整理したものである。

コメント