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代目ホームズは女子高生!ワトソンの子孫ジェームスと、シャーロック・ホームズの子孫シャーロット•ホームズが高校で出会い、事件を解決していくシリーズ第1弾。</td> <td>★★★☆☆</td>
</tr>
</table></div>
↓初期設定のテーブル表示例↓
初期設定のままQooQでテーブル(表)を作るとこんな感じに、何もないテーブルができます。
bloggerって内部では今回追加された表と、以前からずっとあった写真のキャプションが同じ構造で作られてる。てことは何も考えずに今回の表についてデザインを設定すると、写真のキャプションにもモロに影響が出る、というわけ。
blogger新管理画面でQooQ、Tokyoを使う場合の注意点
QooQではあえて線が出ないように設定されているようです。
題名 | 語彙数 | あらすじ | オススメ度 |
---|---|---|---|
Edenbrooke | 66,769 | ちょっとお転婆で、心優しい、でも自分に自信がない女の子が幸せになっていくストーリー | ★★★★☆ |
A Study in Charlotte | 79,315 | ホームズは女子高生!ワトソンの子孫ジェームスと、シャーロック・ホームズの子孫シャーロット•ホームズが高校で出会い、事件を解決していくシリーズ第1弾。 | ★★★☆☆ |
スマホから見ると横にスクロールするようにカスタマイズしてみました。
パソコンから確認していないので、パソコンからはどう表示されるか分からないです😅
Bloggerテーマ『QooQ』でテーブル(表)を横スクロールするようにする方法
素人なので合ってるのかよく分からないけど、表になってるからいいかな〜。と。
使用される方は必ずバックアップをとってから、試してみてくださいね。
書く時に<tr>/<th>/<td>の数を増やしたり、減らしたりしています。
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>
スマホからブログを書く方はぜひ試してみてください☺️✨