keepr’s diary(本&モノ&くらし)

ネット、読書、音楽、散歩、最近はイラストが趣味のおじさんです。趣味、商品、暮らしの疑問、感想を思いつくまま綴ります。

 【本サイトはアフェリエイト広告を利用しています】

【ブログ】はてなブログで、スプレッドシートから張り付けた表をスクロールさせる方法

こんにちは、keeprです。
表のスクロールはWord Press でないとできないかと思っていましたが、やってみると簡単でした。

                 
スクロール1 スクロール12 スクロール3 スクロール4 スクロール5 スクロール6 スクロール7 スクロール8 スクロール9
                 
                 
                 

 

上の表はGoogleスプレッドシートで作成したものを張り付けたもので、パソコンでもスマホでも画面には右の方が出ませんが、スクロールすると見ることができます。

今まで、スクロールする方法がわからなくて(できないと思っていました。)、スマホで全部表示できるように横幅を微妙に調整して掲載していました。

 

ところが、こちらの記事を参考にして試してみたら、スプレッドシートから張り付けた表でもスクロールすることができました。

 

www.mtioutput.com

 

参考にさせていただいた記事に記載してあるとおり、

デザインCSSダッシュボードーデザインー設定(スパナマーク)ーデザインCSS)に

#table-sc {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
overflow: auto;
white-space: nowrap;
}

 と追記し、記事内のテーブル(HTML編集)を

<div id="table-sc"></div>

で囲んだら簡単にできました。「エンジニアのアウトプット」さん、ありがとうございます。

 

ただブログのデザインテーマにより、もしかするとできないこともあるかもしれません。ちなみにこのブログのテーマはレスポンシブデザイン対応の「Stripe」です。

 

以上です。よろしかったら参考にしてみてください。

 

⇩ 自分が現在主に使っているアフェリエイトはこちらです。楽天市場AmazonYahoo!ショッピングのボタンBox(カード型のアフィリエイトリンク)が簡単にできる「かんたんリンク」がおすすめです。

もしも無料会員登録(もしもアフィリエイト)

 

⇩ 「バリューコマース」を最近始めて成果がすぐに出ました。特に「MyLinkBox」は自由度、広告主が多くおすすめです。

ウェブサイトで収入を得る!バリューコマースなら出来る!

プライバシーポリシー 免責事項