＜ZELOカスタマイズ記⑯＞テーブル（表）の作成方法と、見出し固定＆横スクロール設定したはなし

Blogger ZELO カスタマイズ ブログ

Bloggerには、表を作成する機能が備わってないみたいですね。
まあそもそもブログなんて「文章を書くためのもの」なんだから、そらそーだよね。

でも使えると便利なこともあるので、テーブル対応できるようにカスタマイズ！

やりたいことはふたつ。
  1. 表を貼るごとに色などを指定しなくてもいいように、CSSで表の設定をしたい
  2. スマホなどで入りきらない幅の表は、横スクロールされるようにしたい

まずはビフォーアフターから見ていきましょう。


ビフォーアフター

ビフォー

ワードプレスだとこう↓

Wordpressのときに使っていたテーブルの書式

HTMLをそのままブロガーに使ったらこう↓



いつもエクセルからこのサイト（エクセルシートをHTMLテーブルに変換しちゃう君）を使って表を作っていたのだけれど、CSSはワードプレスに依存してたんで、HTMLだけブロガーに移したらこうなっちゃったの図。。


アフター

Bloggerでテーブルを作成する（CSSカスタマイズ）



Bloggerでテーブル（表）を使う方法



上記のサイトによると、
  1. Googleスプレッドシートで表を作成して
  2. コピーして
  3. ブログに貼り付ければ
書式も含めてキレイに表示されるそうです。

しかも、HTML作成画面じゃなく、テキスト入力画面のほうでいいみたい。


やってみた↓
BloggerにGoogleスプレッドシートをコピペしただけ


確かにラクチンだけど、

  • 記事の横幅より右にはみだしちゃってるし、
  • HTMLがすんごいことになってたよ。。。

（こんなカンジ↓）
BloggerにGoogleスプレッドシートを貼り付けたときのHTML

上が変換サイトで作成した素のtable。
下がgoogleスプレッドシートでコピペした部分。


やっぱり、

  1. 素のテーブルタグを貼り付けるだけで
  2. 見出し部分の書式がが表示される
ってゆーのが理想かな。


Bloggerでのtableタグ設定方法

tableをCSSでカスタマイズ（デフォルト）


  1. tableのデフォルト書式
  2. 横幅が広い表の横スクロール
どちらも、Wordpress（Cocoon）時代からお世話になっていたぽんひろさんのサイトで解決できそう。
やってみます！



①HTMLをひらく

※かならずバックアップをとってからカスタマイズしてください。

テーマ
　→　「・」がたてに３つ並んでいるメニューを選択
　→　HTMLを編集


②CSSを貼り付ける

フキダシとパンクズリストの間あたりに以下のコードを入れました。
（赤字はぽんひろさんのCSSから変更した部分）

/************************************
** 横長テーブル
************************************/
.table{
  white-space: nowrap;
  line-height:1.6;
}
.table table{
  border:none;
  border-left:1px solid #BDBDBD;
  border-right:1px solid #BDBDBD;
  border-bottom: 1px solid #BDBDBD;
    border-collapse: collapse;
  word-break: break-all;
  table-layout: fixed;
  display:block;
  overflow:scroll;
}
.table th{
  background:#FFF8E1 !important; /* 見出し背景色 */
  color: #212121;/* 見出し文字色 */
  font-weight: 900 !important;/* 見出し文字太さ */
  font-size:14px !important; /* 見出し文字サイズ */
}
.table td{
  font-size: 14px !important; /* 文字サイズ */
  color:#212121; /* 文字色 */
}
.table thead th:first-child,.table tbody th:first-child{
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 1;
  border:none;
}
.table tr{
  border-top:1px solid #BDBDBD;
  border-bottom:none !important;
}
.table tr:last-child{
  border-bottom:1px solid #BDBDBD;
}
.table th, .table td {
  vertical-align:middle !important;
  border: none !important;
  background:#fff;
  text-align:center;
  padding:12px !important;
}
.table img{
  margin:0;
  padding:0;
  max-width:70px !important; /* 画像最大サイズ */
}
/* スマホ */
@media screen and (max-width: 560px) {
  .table th{
    font-size:11px !important; /* スマホ見出し文字サイズ */
  }
  .table td{
    font-size: 11px !important; /* スマホ文字サイズ */
  }
  .table thead th:first-child,.table tbody th:first-child{
    white-space:normal;
    min-width:80px; /* スマホ見出し横幅 */
  }
  .table th, .table td {
    padding:8px !important;
  }
  .table img{
    max-width:50px !important; /* スマホ画像最大サイズ */
  }
}


----------
変更点
----------
  1. div指定するときに忘れちゃうから、ショートコードは「p-sticky-table」から、シンプルに「table」のみに変更（18箇所）
  2. ボーダーカラー（線の色）をマテリアルデザインの#BDBDBDに変更（５箇所）
  3. 見出しの背景色を薄いサブカラー（#FFF8E1）に変更（１箇所）
  4. 見出しのフォントカラーを#212121に変更（１箇所）
  5. 文字色も見出しと同じ#212121に変更（１箇所）
  6. 見出し文字サイズを14に変更（１箇所）
  7. 見出し文字の太さを900に変更（１箇所）
  8. 文字サイズも見出しと同様に14に変更（１箇所）

③保存


ちなみにスマホで表示させるとこんなカンジになります↓
カスタマイズしたtableをスマホ表示してみた画像


※記事を書く時の注意

記事を書く時には、エクセルからHTML（table）に変換するサイトを使用しています。
（書式のCSSなしで作成）

そのテーブルを貼る際に、

<div class="table">
テーブルのHTML
</div>

とゆーdivタグで囲むこと。

そうすることで、記事ごとにテーブルの書式を指定しなくっても、CSSを呼び出して変換してくれます。
サイトの統一感にも効果的ですね☆

0 件のコメント :

コメントを投稿

関連記事