[定点観測] 経営指標 企業ランキング2024.3.29 追加しました
PR

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

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

WordPress における表(table)作成

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

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

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

Gutenberg

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

2022/1/25 追記

Gutenberg が v12.4.1 にバージョンアップされた際、Excel上の表(複数セル)をカット&ペーストするには、前バージョンまで許可されていた「段落ブロック」への貼り付けが実質的にはできなくなった。

筆者が実際に作業したところ、「テーブルブロック」をWordPress上に呼び出して、そこにならExcel表を従来通りの形で張り付けることができた。

ちなみに、従来通り、段落ブロックに貼り付けようとしても、コマンド「貼り付け(Ctrl+V)」では、コマンド「プレーンテキストとして貼り付ける(Ctrl+Shift+V)」のように、書式なし(のように)でコピペされ、WordPress上では表形式(テーブル形式)にならない。

2024/4/12 追記

WordPress が Regina(v6.5.2) にバージョンアップ後、本サイトの採用テーマCocoon 2.7.2.6 の環境下では、上記にあるように、Excelからの直接的な「貼付け(Ctrl+V)」では、表形式のスタイルが失われ、いわゆる「書式なし」の形で貼り付けられてしまい、テーブル形式とはならない現象が再発した。

現状では、ワンステップ増えてしまうが、

「Ctrl+V」による貼り付け先を、WordPressのテーブルブロックではなく、クラシックブロック(正確にはクラシックエディタをGutenbergのブロックの様に呼び出すもの)に貼り付けた後、クラシックブロックを「ブロックに変換」メニューによってテーブルブロックに自動変換することで、従前どおり、Excel表をスタイル無しのシンプルな表形式ではあるものの、テーブルブロックとしてWordPressに貼り付けることができる。

❶ExcelからCtrl+Vで指定した範囲を、クラシックブロックに貼り付け

指標 閾値 コード 会社 会社値
SR MAX 1301 極洋 1,640.0
  Median 1381 アクシーズ -9.6
  MIN 1380 秋川牧園 -78.8
TSR MAX 1382 ホーブ 147.2
  Median 1381 アクシーズ -2.3
  MIN 1380 秋川牧園 -12.6
β MAX 1382 ホーブ 0.70
  Median 1377 サカタタネ 0.18
  MIN 1301 極洋 0.02

❷上記クラシックブロックのどこかをクリックして、メニューバーに「ブロックに変換」を画面表示させて選択する

❸「ブロックへ変換」を押下すると、対象範囲がテーブルブロックに変換される

指標閾値コード会社会社値
SRMAX1301極洋1,640.0
 Median1381アクシーズ-9.6
 MIN1380秋川牧園-78.8
TSRMAX1382ホーブ147.2
 Median1381アクシーズ-2.3
 MIN1380秋川牧園-12.6
βMAX1382ホーブ0.70
 Median1377サカタタネ0.18
 MIN1301極洋0.02

【実演】Excel→コピペ→WordPress

コピー元(Excel表)

Excel表

コピー先(WordPress – 段落ブロック)

指標 閾値 コード 会社 会社値 SR MAX 6236 NCHD 428.1   Median 6428 オーイズミ 8.4   MIN 6022 赤阪鉄 -1,065.0 TSR MAX 6254 野村マイクロ 620.9   Median 6143 ソディック 7.1   MIN 6444 サンデン -76.7 β MAX 6400 不二精機 2.51   Median 6490 ピラー 0.93   MIN 7758 セコニック -0.68

コピー先(WordPress – テーブルブロック)

指標閾値コード会社会社値
SRMAX6236NCHD428.1
 Median6428オーイズミ8.4
 MIN6022赤阪鉄-1,065.0
TSRMAX6254野村マイクロ620.9
 Median6143ソディック7.1
 MIN6444サンデン-76.7
βMAX6400不二精機2.51
 Median6490ピラー0.93
 MIN7758セコニック-0.68

実演動画

単純な表の貼付け

コード業種
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 + セル幅の手動修正

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

コメント