webサイトにExcelの表を貼り付ける方法

QHMでは、「PukiWiki」を応用したプログラムで作られてるため、
「PukiWiki」で使えるプラグイン(おまじない)が、たくさん使えます。



で、その中で、表の作成ができるプラグインも、組み込まれてる為、
webサイトで、表の表現できます。

例えば、こんな感じ

項目名1項目名2項目名3
項目1項目2項目3





入力支援ツールから、表をクリックすると

|~項目名1 |~項目名2 |~項目名3 |
| 項目1 | 項目2 | 項目3 |


この様な形で、打ち込まれますので、
後は、デフォルメしていきながら、表を完成させます。



ただ、表を作成するに、デメリットがあって
簡単な、単純な表であれば、ある程度の作成に問題ないのですが、



複雑な表を作成するとなると、
表の「おまじない」が、分かりづらくなってきてしまいます。



特に、セルを結合したり、色を使って表現したりすると
表の「おまじない」が、ごちゃごちゃになって、わけが分からなくなってしまいます。



そこで、Excelで表を完成させて、webサイトに作成する方法です。
特に難しくはありません。



Excelで作成して、そのままwebサイトに貼り付けるだけです。




Excelの表を貼り付け方法

まず、お持ちのパソコンで、「Microsoft Excel」が使えるのが条件になります。
その上で、Excelに、「Wikiサポートアドイン」をインストールする必要があります。



こちらから、アドオンをダウンロードして、インストールして下さい。

インストール出来ましたら、必ず、 Excelの設定を行います。

  1. Excelを起動
  2. 「ツール」の「アドイン」をクリック
  3. 「Wikisupport」にチェックを入れ、「OK」

アドイン



後は、通常通り、Excelで、表を作成します。
色も反映しますので、必要であれば、色の装飾もします。



Excelで、作成が終わりましたら、作成した表を選択した状態にします。
Excelで、表を作成



「編集」のプルダウンメニューに「書式付きWiki形式でコピー」をクリックします。
クリックした時に、ペーストした状態になってます。

右クリックの中にも、「書式付きWiki形式でコピー」があります。



webサイトの編集画面に移って、貼り付けたい所にカーソルを合わせて
右クリックから、貼り付けを選択して、貼り付けます。

ペーストした表の、「おまじない」は以下の通りです。

|>|>|>|>|COLOR(#99CC00):CENTER:Office Excel  表計算ソフト 価格表|
|BGCOLOR(#99CC00):CENTER:品名|BGCOLOR(#CCFFFF):CENTER:価格|>|BGCOLOR(#CC99FF):CENTER:品名|BGCOLOR(#CCFFFF):CENTER:価格|
|BGCOLOR(#FFFF00):LEFT:Office Excel 2013|BGCOLOR(#CCFFFF):CENTER:200円|>|BGCOLOR(#FFCC99):LEFT:Office Excel 2010 アカデミック版|BGCOLOR(#CCFFFF):CENTER:200円|
|BGCOLOR(#FFFF00):LEFT:Office Excel 2010|~|>|BGCOLOR(#FFCC99):LEFT:Office Excel for Mac 2011|BGCOLOR(#CCFFFF):CENTER:100円|
|BGCOLOR(#FFFF00):LEFT:Office Excel 2010 優待版|BGCOLOR(#CCFFFF):CENTER:500円|>|BGCOLOR(#FFCC99):LEFT:Office Excel 2013 ダウンロード版|BGCOLOR(#CCFFFF):CENTER:700円|
|BGCOLOR(#FFFF00):LEFT:Office Excel 2013 アカデミック版|BGCOLOR(#CCFFFF):CENTER:200円|>|BGCOLOR(#FFCC99):LEFT:Office Excel 2010 ダウンロード版|~|
|BGCOLOR(#FFFF00):LEFT:Office Excel 2007|BGCOLOR(#CCFFFF):CENTER:800円|>|BGCOLOR(#FFCC99):LEFT:Office Excel for Mac 2011 英語版|BGCOLOR(#CCFFFF):CENTER:500円|
|BGCOLOR(#FFFFFF):CENTER:使いやすさ|>|>|>|COLOR(#3366FF):CENTER:新しいデザインや進化した機能|
|CENTER:画像スペース|>|>|>|BGCOLOR(#99CCFF):LEFT:Office が、さらにすっきりと使いやすくなって新登場、自然に使いこなせるから、あなたのやりたいことにスムーズに!|
|~|BGCOLOR(#FFFFFF):CENTER:ジャンル|BGCOLOR(#FFFFFF):CENTER:表計算|>|BGCOLOR(#FFFFFF):COLOR(#FF0000):CENTER:【訳あり】  《送料無料》 大特価品|
|~|BGCOLOR(#FFFFFF):CENTER:言語|BGCOLOR(#FFFFFF):CENTER:日本語|~|~|
|~|>|BGCOLOR(#FFFFFF):CENTER:キャンペーン情報|>|BGCOLOR(#C0C0C0):CENTER:最大50%OFF|
|~|>|>|>|BGCOLOR(#CCFFCC):COLOR(#FF6600):LEFT:データのフォーマットを変えたり、並べ方を変えたりといったことがより簡単になった、見た目はすっきりとしていますが、プロのような結果をすぐに出せるよう設計されています。|


これで、表の「おまじない」を、貼り付けることができます。



実際には、この様に表示されます。(表の内容は適当です)

Office Excel  表計算ソフト 価格表
品名価格品名価格
Office Excel 2013200円Office Excel 2010 アカデミック版200円
Office Excel 2010Office Excel for Mac 2011100円
Office Excel 2010 優待版500円Office Excel 2013 ダウンロード版700円
Office Excel 2013 アカデミック版200円Office Excel 2010 ダウンロード版
Office Excel 2007800円Office Excel for Mac 2011 英語版500円
使いやすさ新しいデザインや進化した機能
画像スペースOffice が、さらにすっきりと使いやすくなって新登場、自然に使いこなせるから、あなたのやりたいことにスムーズに!
ジャンル表計算【訳あり】 《送料無料》 大特価品
言語日本語
キャンペーン情報最大50%OFF
データのフォーマットを変えたり、並べ方を変えたりといったことがより簡単になった、見た目はすっきりとしていますが、プロのような結果をすぐに出せるよう設計されています。




貼り付けたら、横の幅を調整する必要がある場合があります。

調整の仕方は、

|260|80|100|180|80|c

この様に、横の枠の1つ1つを、pxで幅の指定をします。

数字を入れて、最後は、小文字の「c」にして、
おまじないの、先頭に記述します。

数字は、pxの単位です。






Excelで作成に当たり注意点

注意点:

Excelで作成に当たり、複雑な表を作成することは、可能です。

ですが、出来ない事があります。

  • 文字を太字にすること
  • 文字のフォントサイズ
  • リンクを反映できない
  • 画像を反映できない
  • セルの結合は、「縦、横」どちらか片方



表の作成で、フォントサイズや、リンクなどは、反映できません。
セルの結合と色の指定をした、表の作成になります。

必要であれば、webサイトに、貼り付けた後「おまじない」を、
変更して、フォントサイズや、リンクなどを修正して下さい。



セルの結合は、「縦、横」の両方を結合すると、
貼り付けた「おまじない」が崩れてしまいます。



画像を入れる場合も、ある程度、入れるスペースを確保しておいて、
貼り付け後に、画像を読み込みます。

画像をリンクにすることも出来ます。



まとめ
Excelで作成する場合は、「横、縦」どちらか片方にセルを結合する
枠の色、文字の色を指定します。

画像スペースは、予め画像の大きさを見越したスペースを確保する




大体、気をつける所は、このぐらいでしょうか