【iPhoneユーザー必見!】プライム会員でAmazon ミュージック Unlimitedを月額980円にする手順

ブログ初心者必見!はてなブログで表(テーブル)をスクロールする方法解説

悩み人

はてなブログで表をスクロールさせる方法ないかな?

そんな疑問にお答えします。

どうも、ブログ運営者のポチ(@sunrise_033)です。

この記事では、「はてなブログ」でスマホ画面時に表のスクロール方法を解説します。

この方法で「表をはみ出ないように」調整できますよ。

表を多用する記事に活用してみてください。

この状態から

f:id:sanrisesansan:20200624213347j:plain

完成系はこれ!

f:id:sanrisesansan:20200624213351j:plain

こんな感じになります。

スクロールさせることでスマホから読んでくれる読者に見やすくすることにもつながるのでぜひ活用してみましょう。

この記事を書いた人
「高コスパ」大好きブロガー:日の出ポチ

「日常のお得なもの」「グルメ」をテーマにしたブログ2つを運営

当ブログの特徴Amazonサービス・Yahooトラベル・節約Wi-Fi・ダイソー・ワークマン

月間54,000PV/収益5桁達成

目次

参考にさせていただいた記事

今回、参考にさせていただいた記事はこちらになります。

 スマートフォン表示ではみ出したtableをスクロールさせるCSS

HTMLやCSSコードの説明なども詳しく解説されていますので、ぶっちゃけこの記事を読めばと思います。

一応はてなブログでも設置できたので、自身のブログでも説明していきます。

なお、コードは上記サイトからコピぺ出来ます。

スマホではみ出すとこうなる

個人的には、ブログで使用する表はEvernoteで作成しています。

で、表を貼り付けてPC画面では

f:id:sanrisesansan:20200624211904p:plain

このように収まってるのですが、スマホ画面では、

f:id:sanrisesansan:20200624213347j:plain

このようにはみだしてしまします。これをスクロール表示にしていきます。

表をスクロールにする方法

手順
  • CSSコードをデザインCSSに貼り付ける
  • 記事のHTMLに直接コードを貼り付ける

この2ステップでスクロールにすることができます。

ポチ

実際にやってみたので説明していきます。

①CSSコードをデザインCSSに貼り付ける

f:id:sanrisesansan:20200624215720p:plain

上記の参考サイトからCSSコードをコピペして、デザインカスタマイズ(スパナマーク)デザインCSSに貼り付けます。

②記事のHTMLに直接コードを貼り付ける

こちらも上記サイトからコピぺするのですが、下の部分だけをメモアプリかなにかにコピぺします。

<div class=“scroll”>
</div>

HTMLコードの一番上の部分と、一番下の部分です。

これを自身の記事に「HTMLモード」で表のHTMLの上下に貼り付けます。

イメージだと こんな感じです。

<div class=“scroll”>

表のHTML

</div>

表のコードをはさむ形で貼り付けます。

貼り付ける場所は記事作成画面HTML編集から貼り付けます。

f:id:sanrisesansan:20200624223340j:plain
f:id:sanrisesansan:20200624223342j:plain

画像で説明するとこんな感じです。うまく貼り付けると、


このようにスクロールバーが表示されて横にスクロールすることができます。

見たままモードで「横幅」を調整することもできる

はてなブログの場合「見たままモード」で表の横幅を330px以下にすれば、スマホ画面に収まります。

f:id:sanrisesansan:20200624224701j:plain

ただしこの場合、PC画面でも同じ横幅になっていまうので、見栄えが良くないかもしれません。

解説は以上です。

基本、コピぺして貼り付けて出来るので簡単に「スマホ画面での表のはみ出し」をスクロールにすることができました。

HTMLコードはメモアプリやユーザー辞書に貼り付けておくと便利ですよ。

「ブログ村ランキング」参加中!
PVアクセスランキング にほんブログ村


この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (1件)

コメントする

目次