さんログ

色々と発信する雑記ブログ。食レポ、おすすめ発信や情報、メンタル/不思議系など。

タイトルのテキスト
タイトルのテキスト
タイトルのテキスト

【ブログ初心者】はてなブログで表をスクロールさせる方法

f:id:sanrisesansan:20200624230406p:plain

今回は「はてなブログ」でスマホ画面時に表がはみ出した場合のスクロール方法を説明します。

この記事で、スマホ画面ではみ出てしまう表をはみ出ないように調整できます。ぜひ参考にしてみてください。

【イメージ画像】は、こんな状態から、

f:id:sanrisesansan:20200624213347j:plain

完成系は、

f:id:sanrisesansan:20200624213351j:plain

こんな感じになります。

 


スポンサードリンク
 

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

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

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

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

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

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

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

僕の場合、ブログで使用する表はEvernoteで作成しています。

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

f:id:sanrisesansan:20200624211904p:plain

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

f:id:sanrisesansan:20200624213347j:plain

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

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

(1)CSSコードをデザインCSSに貼り付ける

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

この2ステップでスクロールにすることができます。実際にやってみたので説明していきます。

(1)CSSコードをデザインCSSに貼り付ける

f:id:sanrisesansan:20200624215720p:plain

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

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

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

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

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

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

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

<div class=“scroll”>

表のHTML

</div>

 

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

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

 

f:id:sanrisesansan:20200624223340j:plain

f:id:sanrisesansan:20200624223342j:plain

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

f:id:sanrisesansan:20200624213351j:plain
このようにスクロールバーが表示されて横にスクロールすることができます。

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

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

f:id:sanrisesansan:20200624224701j:plain


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

さいごに

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

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

最後まで読んでいただき、ありがとうございます。

関連記事

www.sunrise033.com

 

この記事が良いと思ったら、ポチっ!してくれると嬉しいです!

 ブログ村ランキング」参加中!

ブログランキング・にほんブログ村へ