おはようございます!


このブログ、語学勉強の記録のために始めたはずなのにまったく語学の記録をつけてない😱


ということに、薄々お気づきの方がいらっしゃることでしょう。


本当にすみませんm(_ _)m



Bloggerで表を作成してみた

机に座って勉強!という体調まで戻らないのでKindleで洋書を読むことだけが英語に触れている時間です。



いっそのこと、Kindleで調べた単語を表にしてブログに載せたらいいんじゃない?



ってことで、表を作ってみたんですが


スマホからだと右側が切れて見れない😂😂😂


  • スプレッドシートからコピペで簡単
  • しかもスマホからみたら左右にスクロールしてくれる

そんな表がBloggerでもできる事が分かったので、やり方をご紹介します


スプレッドシートをコピー

スプレッドシートで自分の思うような表ができたら、それをまるっとコピーします。


Bloggerの作成ビューで貼り付けて、HTMLビューに切り替えます。


貼り付けた表のHTMLコードがズラッと書かれています。


<google-sheets-html-origin><table border=〜〜


その一番はじめに、


<div class="table-scroll">


という文字を追加します。


好みの問題で


<table border=〜〜 の中の

font-family: Arial; 


というフォントに関する記載部分を削除。


表の一番最後に記載されている


</table></google-sheets-html-origin>


の後に、</div>を付け加えます。


これだけで、スマホで見ても表が横にスクロールされる準備はOK!



表を横にスクロールさせるCSSを追加

スマートフォン表示で、画面に表示しきれないtableを横スクロールさせる方法」をそのまま使わせていただきました。


.table-scroll{
  overflow: auto; /*スクロールさせる*/
  white-space: nowrap; /*文字の折り返しを禁止*/
}

/* 以下、スクロールバーを追加 */
.table-scroll::-webkit-scrollbar{  
 height: 5px;
}
.table-scroll::-webkit-scrollbar-track{
 background: #333;
}
.table-scroll::-webkit-scrollbar-thumb {
 background: #999;
}

/* 以下、tableの指定 */
.table-scroll table{
    border-collapse:collapse;
    border-spacing:0;
  border-top:#ccc solid 1px;
  border-left:#ccc solid 1px;
}
.table-scroll table th,
.table-scroll table td{
  padding:10px 15px;
  font-weight:normal;
  border-right:#ccc solid 1px;
  border-bottom:#ccc solid 1px;
  font-size:12px;
}
.table-scroll table th{
  background:#eee;
  width:80px;
}


上記を、「テーマ」→「HTML編集」のCSSの部分に追加します。


※編集する前に必ずバックアップを取ったほうがいいです。



Bloggerテーマの「Smart」を使っている方なら


  /* 記事のタイトル・見出し・コンテンツ
    ---------------------------------------------------------------------------- */


と書かれている箇所辺りに追加したら、変更する時に楽かもしれません。

.width:200px; /*今回の設置を分かりやすくするためワザと狭い幅を指定。本来は不必要な指定です。*/

参考にした参考様サイトにある、上記の記載は削除しました。




まとめ

いかがでしょうか?


スプレッドシートに書きたいことを書いて


<div class="table-scroll">

</div>

を追加するだけで、スマホからでも見やすい表が作成出来ちゃいます。



めっちゃ簡単に出来てほっこりです😊✨