スマホで見たときはてなブログのMarkdown記法テーブルが見切れてしまうときの対処法

起こっていた現象

Markdown記法でテーブルを書いていたのですが、 スマホでみてみると右側が見切れてしまっていました。 今回はその時に行った対処法を紹介します！

対処法

スマホで見たときはテーブルを横方向にスクロールできるように設定していきます。

テーブルをdivタグで囲む

Markdown記法でテーブルを書いた場合、単純にdivで囲ってしまうとテーブルがテーブルと認識されなくなってしまいます。
なので、jQueryでテーブルをdivタグで囲むように設定します。

デザイン > カスタマイズ > ヘッダ内にあるタイトル下 に以下のコードを追加します。

$(function(){ 
  $('table').wrap('<div class="scrolled-table"></div>'); 
});

スクロールされるようにCSSを追記

デザイン > カスタマイズ > ヘッダ内のデザインCSS で見切れを防ぐため、テーブルがスクロールするようにCSSを追記します。
今回の場合は、スマホのみが対象になるのでメディアクエリを使っています。

@media (max-width: 680px) {
  .scrolled-table {
    overflow: scroll;
  }
}

結果

スマホで表示してみると、 しっかりと横方向にスクロールできるようになっています。
これで今まで見えなかった 好きな数字 列が見えるようになりました。