こんにちは、WEBデザイナー兼
趣味で社会人バンドを
しているエミリです＊
初心者の方がホームページを
作成するにはWixがおススメですよ
っと、以前からお伝えしています。
ただ、いくら簡単に作成できるとはいえ
こういう場合はどうやるの？という
お悩みも出てくるかと思います。
今回は、以下の様なお悩みを
見つけたので実際にエミリが
やり方を解説していきたいと思います。
Wix.comで以下のことは可能ですか？
任意のテーブル（表）の挿入に一番困っています。
テーブルアプリを使って、作ってみたのですが、幅の調整や色指定、文字の強弱、改行がうまくいきません。
一度エクセルを使用する方法をためしたのですが、反映した際にもっと崩れました。
仕方ないので表は画像にしてますが、スマホから見ると文字が小さくて悩んでおります。
Via.知恵袋
エクセルの表などをそのまま画像にして
ホームページに入れ込むとスマホで見た時に
文字が小さくて全然見えない！ってサイトは、
たまに見かけます。
やはりページを見に来てくださった方が
困らないように親切なコンテンツを
用意してあげる必要があります。
Wixには、テーブル表を作成する
アプリもついているようなのですが、
今回はお悩みに沿ってエクセルの表を
Wixに入れ込む方法をご紹介したいと思います。
お困りの方はぜひ参考にされてみてください。
エクセルの表をhtmlに変換しよう
まず、最初の手順としてはエクセルの表を
HTMLに変換する必要があります。
以下のページでエクセルで作成した
テーブル表を簡単にHTMLに変換できます。
エミリは、以下の表をエクセルで
作成しました。
この表全体を選択してコピーし、
Tables Generatorで
HTMLに変換していきます。
①「File」を選択
②「Paste table data」を選択
表示されたポップアップにコピーした
エクセル表を張り付けていきます。
①貼り付け部分
②「Load」を選択
すると、以下の様に表が表示され
HTMLが生成されます。
でも、これではなんとなく
デザイン的に残念です・・・
この、Tables Generatorの良いところは
テーマを選択して自動で
カスタマイズしてくれます。
①「Theme」を選択してみましょう
①「Colors」で好きな色を選びます。
②「Borders」で線を入れるか入れないか決定します。
③「Stripes」で表にストライプを入れるか決定します。
それぞれ、好きなスタイルを選択し
「×」クローズします。
そうすると、表がカスタマイズ
されて表示されます。
あとで色の変更・セル結合・
リンク挿入なども可能です。
変更したいセルを選択し、
メニューを選ぶと簡単に変更できます。
①変更したいセルの範囲を選択
②色を変更する場合、②赤枠の部分を選択し色を決定する
このようにして、カスタマイズが
完了したら生成されたHTMLを
コピーします。
①「Compact mode」をチェック
※ここをチェックしないと、cssがテーブルタグ内に挿入されず、Wixに張り付けてもカスタマイズが反映しません。
②「Copy to clipboard」をクリック
※クリックでコピーできます
③メモ帳か何かに張り付けておいてください
これで、エクセルのテーブル表を
HTMLに変換することが完了しました。
生成したhtmlをWixへ埋め込む
それでは、Wixに生成したコードを
埋め込んでいきます。
Wixに移動しHTMLコードを埋め込む
コンテンツを追加します。
①追加ボタン選択
②「その他」を選択
③「HTMLコード」を選択
HTMLコードの埋め込み用フレームが
出てきたら埋め込みたい部分に配置します。
配置が完了したらコードを
入力します。
①「コードを入力」を選択
②先ほどコピーしてメモ帳に張り付けたものを入力してください
③「適用」をクリック
すると以下の様に表示されます！
ただ、これだと表が小さすぎますね・・・
この表の横幅をグレー部分いっぱいに
表示させていきたいと思います。
①再度「コードを入力」を選択
②<table style=" のすぐ後に「width:100%;」と入力して「更新」をクリック
すると、きれいに表示されたかと思います。
あとは、スマホ版の方も調整して
公開すれば完了です！
エミリのページにも追加してみたので、
確認してみてください＊
https://emiriband.wixsite.com/hp01
まとめ
今回はWixにエクセルで作成した表を
埋め込むという方法を紹介しました。
一連の流れは以下になります。
①Tables GeneratorでエクセルのテーブルをHTMLに変換する
（カスタマイズも完成させておく）
②WixのHTMLコード埋め込みを利用し挿入する
③横幅を「width:100%;」で変更する
④スマホ版の見栄えを微調整する
困っている方は、
ぜひ参考にされてみてください。
また、初心者さん向けに
代行サポート＆指導サービスも始めました！
お手頃価格となっておりますので
お困りの方は、ぜひご利用いただければと思います★
まずは、無料相談でお悩みをお聞かせください！
【あなたにおすすめの記事】
■Wixでフィルターをかける方法！
-
-
wixcodeデータベースで訪問者がソートやフィルターをかけれる？
こんにちは、WEBデザイナー兼 趣味で社会人バンドを しているエミリです＊ 今回は、久々Wi ...
■ページ作成のポイントについて
-
-
ホームページをwixやjimdoで自作する上で気を付けたいこと
こんにちは、webデザイナー兼 バンドマンやアーティストの 応援をしているエミリです＊ 今回 ...
■wixカスタマイズまとめ
wixでツイッターを連動させたい！コンタクトフォームはどう設定するの？といったことを以下でまとめています。これからもどんどん追加していきます。リクエストも受け付けています！
-
-
Wixテンプレートのカスタマイズ方法まとめ
このページでは、Wixで作成したホームページのカスタマイズ方法をまとめました。 随時更新しますので、ホームページ作成を検 ...
