オカシンのブログ・育児体験記

二人の子持ちサラリーマンが副業としてブログをやっている成果と育児に関する事を記録しています

Bloggerで表を張り付けた時に左側が見切れる現象の修正方法

 

今日は朝1時間30分かけて2記事作成

会社の通勤時間と隙間時間にアフィリエイトの情報収集1時間くらい。ブログで表の使い方がわからなかったのでひたすらググッてました。

とりあえず

1.エクセルをホームページ形式で保存し、そのHTMLをコピペする方法

2.HTMLをコピペ

3.表を作れるサイトを利用する方法

4.グーグルスプレッドシートを使う方法

以上の方法がありそうなので、全部試してみることにしました。

結論

1番は試してみましたが全然ダメでした。

ホームページ形式で表示してブラウザで表示するところまではいいのですが、ブラウザの検証モードでHTMLを表示してコピペしてもうまくいきませんでした。

→もうちょっと調べたらエクセルをHTML形式に変換してくれるこちらのサイトエクセルシートをHTMLテーブルに変換しちゃう君 (ββ)を発見。

使ってみたのですが、色が反映されませんでした。

2番は表のHTMLを探してみたのですが、めんどくさそうなので却下。

3番はこちらのサイトテーブルタグ作成ツール - 無料ツール.netを利用させてもらいました。でも結合の方法がわからず断念。

4番が一番簡単でした。

グーグルスプレッドシートで表を作ってそのまま張り付けるだけ。

ただ、そのままだとスマホで見た時に対応していない場合があるので、

table-layout: fixed を table-layout: auto に変更。

あと、bloggerに張り付けた場合、下のように左側が見切れるという謎の減少が・・・

f:id:okashin111:20180527234315j:plain

この現象を解決するのに1時間くらいかかりました・・・

ググっても同じ症状の人が出てこなくて困りました。

結論を言うとHTML記述の画面でHTMLをコピペで貼りなおしたら治りました。

帰宅してからの作業時間は4時間くらいかな。

 

プライバシーポリシー