Bloggerでテーブル(表)を書く方法【スマホで横にスクロール】

こんばんは〜。

英検の勉強もせずにBloggerのカスタマイズをしているあいです。

多分、試験前に後悔するやつ。

Bloggerテーマ『QooQ』ではテーブル(表)の線が出ない？

テーブルを作成していた時に気づいたんですが、表示が残念😵💦

Bloggerでテーブル(表)を挿入するにはSpread Sheetで表を作ってから作成ビューに貼り付ける方法がよくオススメされています。

でも、私はスマホから書くのでコードが無駄に長くなるのが嫌！

なのでコード（下に記載）をHTMLビューで書いてみましたが何だか表示が変😂💦

↓テーブルのHTML例↓

<div class="scroll">
  <table>
  <caption>QOOQでテーブル（表）のテスト</caption>
    <tr>
      <th>題名</th>
      <th>語彙数</th>
      <th>あらすじ</th>
      <th>オススメ度</th>
    </tr>      
    <tr>
      <td>Edenbrooke</td>   
      <td>66,769</td>
      <td>ちょっとお転婆で、心優しい、でも自分に自信がない女の子が幸せになっていくストーリー</td>       <td>★★★★☆</td>
    </tr>
    <tr>
      <td>A Study in Charlotte</td>
      <td>79,315</td>
      <td>5代目ホームズは女子高生！ワトソンの子孫ジェームスと、シャーロック・ホームズの子孫シャーロット•ホームズが高校で出会い、事件を解決していくシリーズ第１弾。</td>      <td>★★★☆☆</td>
   </tr>
  </table></div>

↓初期設定のテーブル表示例↓

初期設定のままQooQでテーブル(表)を作るとこんな感じに、何もないテーブルができます。

bloggerって内部では今回追加された表と、以前からずっとあった写真のキャプションが同じ構造で作られてる。てことは何も考えずに今回の表についてデザインを設定すると、写真のキャプションにもモロに影響が出る、というわけ。

blogger新管理画面でQooQ、Tokyoを使う場合の注意点

QooQではあえて線が出ないように設定されているようです。

↓カスタマイズ後↓

QOOQでテーブル（表）のテスト

題名	語彙数	あらすじ	オススメ度
Edenbrooke	66,769	ちょっとお転婆で、心優しい、でも自分に自信がない女の子が幸せになっていくストーリー	★★★★☆
A Study in Charlotte	79,315	ホームズは女子高生！ワトソンの子孫ジェームスと、シャーロック・ホームズの子孫シャーロット•ホームズが高校で出会い、事件を解決していくシリーズ第１弾。	★★★☆☆

スマホから見ると横にスクロールするようにカスタマイズしてみました。

パソコンから確認していないので、パソコンからはどう表示されるか分からないです😅

Bloggerテーマ『QooQ』でテーブル(表)を横スクロールするようにする方法

参考記事

• 表（table）の作り方と装飾の変え方【HTML＆CSS】 
• blogger新管理画面でQooQ、Tokyoを使う場合の注意点
• Tableをスマホで見たときに、横スクロールで表示する方法
• HTMLのtable（テーブル）コンプリートガイド

上記のブログを参考にして、カスタマイズしてみました。

素人なので合ってるのかよく分からないけど、表になってるからいいかな〜。と。

使用される方は必ずバックアップをとってから、試してみてくださいね。

table:not([class]) {
  border-collapse: collapse;
}
table:not([class]) th, table td:not([class]) {
  border: solid 1px black;
  /*実線 1px 黒*/
}
@media (max-width: 480px) {
<!--スクロール_S-->
table{
    width:100%;
}
.scroll{
    overflow: auto;
    white-space:nowrap;
}
.scroll::-webkit-scrollbar{
    height: 15px;
}
.scroll::-webkit-scrollbar-track{
    background: #f1f1f1;
}
.scroll::-webkit-scrollbar-thumb{
    background: #bbb;
}
<!--スクロール_E-->
}
table:not([class]) td {
  padding: 3px 10px;
}
table:not([class]) th{
  color: #FFF;/*文字色*/
  background: #C19AC7;/*背景色*/
 padding: 10px !important;
}
caption {
caption-side: bottom; /* 下に */
  margin-top: 0.5em; /* 上の隙間 */
  color: gray; /* 文字色 */
  font-size: 0.9em;
}

  

このコードをテーマのHTML編集で個別アイテムのところに追加しました。

テーブルのチートコード

スマホからいちいちコードを書くのが面倒なので、下のコードをクリップボードに固定しています。

こんな感じでワンクリックでコードが書けます

 <div class="scroll">
  <table>
  <caption></caption>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
  </table></div>

書く時に<tr>/<th>/<td>の数を増やしたり、減らしたりしています。

スマホからブログを書く方はぜひ試してみてください☺️✨