※ 当サイトではアフィリエイト広告を利用しています

無料ホームページWix ホームページ・ロゴ・チラシ

Wixで作成したホームページにエクセルのテーブル表を埋め込む方法

更新日:

 

こんにちは、WEBデザイナー兼

趣味で社会人バンドを

しているエミリです*

 

 

初心者の方がホームページを

作成するにはWixがおススメですよ

っと、以前からお伝えしています。

 

 

ただ、いくら簡単に作成できるとはいえ

こういう場合はどうやるの?という

お悩みも出てくるかと思います。

 

 

今回は、以下の様なお悩みを

見つけたので実際にエミリが

やり方を解説していきたいと思います。

 

Wix.comで以下のことは可能ですか?

任意のテーブル(表)の挿入に一番困っています。

テーブルアプリを使って、作ってみたのですが、幅の調整や色指定、文字の強弱、改行がうまくいきません。

一度エクセルを使用する方法をためしたのですが、反映した際にもっと崩れました。

仕方ないので表は画像にしてますが、スマホから見ると文字が小さくて悩んでおります。

Via.知恵袋

 

エクセルの表などをそのまま画像にして

ホームページに入れ込むとスマホで見た時に

文字が小さくて全然見えない!ってサイトは、

たまに見かけます。

 

 

やはりページを見に来てくださった方が

困らないように親切なコンテンツを

用意してあげる必要があります。

 

 

Wixには、テーブル表を作成する

アプリもついているようなのですが、

今回はお悩みに沿ってエクセルの表を

Wixに入れ込む方法をご紹介したいと思います。

 

 

お困りの方はぜひ参考にされてみてください。

 

 

エクセルの表をhtmlに変換しよう

 

まず、最初の手順としてはエクセルの表を

HTMLに変換する必要があります。

 

 

以下のページでエクセルで作成した

テーブル表を簡単にHTMLに変換できます。

>>Tables Generator

 

 

エミリは、以下の表をエクセルで

作成しました。

 

 

この表全体を選択してコピーし、

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テンプレートのカスタマイズ方法まとめ

このページでは、Wixで作成したホームページのカスタマイズ方法をまとめました。 随時更新しますので、ホームページ作成を検 ...

続きを見る

 

 

エミリへのお問い合わせはこちらから

エミリへのお問い合わせ

ホームページ作成やバンドのことでお悩みの方や、不明点などございましたら下記アドレスまでお気軽にお問合せ下さい!


<質問例>
・ホームページ作成のお悩み
(バンドのページでなくてもOKです。)

・ロゴ作成のお悩み
・チラシ作成のお悩み
・バンド人間関係のお悩み
・バンドメンバーに聞けないお悩み


等、どんな些細な事でもなんでもいいです!
あなたのちょっとしたサポートができれば幸いです。こちらのブログの感想も添えてくださると嬉しいです。とにかくどんな時も「楽しむ」ということを念頭に取り組んでいきましょう!

●以下、メールアドレス宛にご相談ください!
⇒info@bandemiri.com
●メールフォームからも受け付けてます!
⇒メールフォーム
  • この記事を書いた人

emiri

アラフォー。♀。WEBデザイナー。バンド歴15年くらい。パートはギターボーカル、シンセと渡り歩き、40歳手前でベースを始めました笑!音楽に年齢は関係ないので思い切り音楽ライフを楽しんでおります。エミリの音楽歴&影響を受けた音楽は >>詳しいプロフィールをご覧ください。

-無料ホームページWix, ホームページ・ロゴ・チラシ

Copyright© 音楽を通して人生を豊かにする方法 , 2023 All Rights Reserved.