Adobe Muse でテーブル（表）を挿入する【その①】

コードを書かないことを前提にしているAdobe Museでは、

感覚的・視覚的にサイトが簡単に制作できるかわりに、

ウィジェットにない機能を挿入するのが難しいときがあります

インターネット等で調べてHTMLコードで挿入しようにも、

うまくいかないこともしばしばです。

例えば、同じAdobe製品のDreamweaverで制作したテーブル（表）を

HTML形式で貼り付けてみても、テーブル（表）の表示にならず、

ただのテキストになってしまいます。

また、図形やテキストを用いてテーブル（表）の体裁を整えてみても、

プレビューやパブリッシュした際にズレてしまうことも

今回は、Adobe Museにテーブル（表）作成機能が実装されていない現在、

私が試してみたテーブル（表）の挿入方法をまとめてみたいと思います

エクセルを使用してHTMLコードを作成する方法

まず、Microsoft Officeのエクセルで表を作成します。

「エクセルシートをHTMLテーブルに変換しちゃう君(ββ)」

　　<http://styleme.jp/tool/xls2html/ >にエクセルで作成した表を

　　コピーして貼り付けし、HTMLコードを生成します。

　 (1) 「STEP1. エクセルとかからCSV(TSV)をコピーして貼り付け」します。

　　　※エクセルシートに作成した表をコピー＆ペーストで大丈夫です。

　(2) 「STEP2. オプションを選択して変更」を設定し、「▼変換▼」ボタンをクリックします。

　　　※「カラープロファイルの設定」にあるテーブル（表）をクリックすると

　　　　カラーコードが選択できます。

　　　※大きいサイズの画像はこちら

　(3) 「STEP3. HTMLタグをコピーして使う」からHTMLコードを取得します。

　【取得したコード例】　

<tr>
<th>FAX番号</th>
<td> xxx-xxx-xxx</td>
</tr>
</tbody>
</table>　　　

Adobe Museで制作中のサイトページを開き、テーブル（表）の

HTMLコードを貼り付けします。

貼付けしたHTMLコードを開き、追加設定をお好みで記述して完成です。

【コード例】（※赤字は追加記述した箇所）

</style>
<table>
<tbody>
<tr class="nrow">
<th>　会社名　</th>
<td>　株式会社○○○○　<br />
　（旧：株式会社△△△△）　</td>
</tr>
<tr>
<th>　代表取締役　</th>
<td>　山田　太郎　</td>
</tr>
<tr class="nrow">
<th>　電話番号　</th>
<td>　xxx-xxx-xxx　</td>
</tr>
<tr>
<th>　FAX番号　</th>
<td>　xxx-xxx-xxx　</td>
</tr>
</tbody>
</table>　

これで、Adobe Museにテーブル（表）挿入ができました

注意事項

上記の方法で、Adobe Muse にテーブル（表）を挿入できましたが、

この方法だとある問題が発生してしまうことがあります。

それは、異なるスタイルのテーブル（表）を複数配置できない

という問題です。

同じスタイルのテーブル（表）を複数使用する分には問題ないのですが、

スタイルが異なるテーブル（表）を同じページに複数貼り付けると、

表のスタイルが勝手に統一されて変わってしまうのです。

【例】

①Adobe Muse でデザインしているときの表示

　　　

②Adobe Muse でプレビュー・パブリッシュしたときの表示

このように、デザインでHTMLコードを挿入しているときは大丈夫なのに、

いざプレビュー・パブリッシュをしてみると表示が変わってしまうのです。

同じスタイルのテーブル（表）を作成するにはとても簡単な方法ですが、

異なるスタイルのテーブル（表）を作成して複数配置したい際は、

この方法以外で作成することをオススメします！　

それでは、次回はもうひとつのテーブル（表）の作成方法を記載します

JUNK BOX

文系女子によるパソコン技術向上と趣味を兼ねたブログ

Adobe Muse でテーブル（表）を挿入する【その①】

エクセルを使用してHTMLコードを作成する方法

注意事項