「はてなブログ」でスマホ画面時に表のスクロール方法を説明します。この方法で「表をはみ出ないように」調整できます。表を多用する記事に活用してみてください。
【イメージ画像】は、こんな状態から、
完成系は、
こんな感じになります。
参考にさせていただいた記事
今回、参考にさせていただいた記事はこちらになります。
スマートフォン表示ではみ出したtableをスクロールさせるCSS
HTMLやCSSコードの説明なども詳しく解説されていますので、ぶっちゃけこの記事を読めばと思います。
一応はてなブログでも設置できたので、自身のブログでも説明していきます。
なお、コードは上記サイトからコピぺ出来ます。
スマホではみ出すとこうなる
僕の場合、ブログで使用する表はEvernoteで作成しています。
で、表を貼り付けてPC画面では
このように収まってるのですが、スマホ画面では、
このようにはみだしてしまします。これをスクロール表示にしていきます。
表をスクロールにする方法
①CSSコードをデザインCSSに貼り付ける
↓
②記事のHTMLに直接コードを貼り付ける
この2ステップでスクロールにすることができます。実際にやってみたので説明していきます。
①CSSコードをデザインCSSに貼り付ける
上記の参考サイトからCSSコードをコピペして、「デザイン」→「カスタマイズ（スパナマーク）」→「デザインCSS」に貼り付けます。
②記事のHTMLに直接コードを貼り付ける
こちらも上記サイトからコピぺするのですが、下の部分だけをメモアプリかなにかにコピぺします。
<div class=“scroll”>
</div>HTMLコードの一番上の部分と、一番下の部分です。
これを自身の記事に「HTMLモード」で表のHTMLの上下に貼り付けます。
イメージだと こんな感じです。
<div class=“scroll”>
表のHTML
</div>表のコードをはさむ形で貼り付けます。
貼り付ける場所は、「記事作成画面」→「HTML編集」から貼り付けます。
画像で説明するとこんな感じです。うまく貼り付けると、
このようにスクロールバーが表示されて横にスクロールすることができます。
見たままモードで「横幅」を調整することもできる
はてなブログの場合「見たままモード」で表の横幅を330px以下にすれば、スマホ画面に収まります。
ただしこの場合、PC画面でも同じ横幅になっていまうので、見栄えが良くないかもしれません。
さいごに
基本、コピぺして貼り付けて出来るので簡単に「スマホ画面での表のはみ出し」をスクロールにすることができました。
HTMLコードはメモアプリやユーザー辞書に貼り付けておくと便利です。
最後まで読んでいただき、ありがとうございます。
↓「ブログ村ランキング」参加中！
