はてなブログで表をスクロールさせる|コピペで簡単に表が見やすくなるコード

officeエクセルやグーグルスプレッドシートで貼り付けた表やテーブル。

スマホ表示にしたときに、はみ出して見れないなどといったことがないように、大きくなった表には横スクロールをつけましょう。

使い方(簡易)

  1. CSSコードを「デザイン」に貼り付ける
  2. HTMLコードを、記事の表コードの前後に設定する

コードを貼る前(変更前)にするべきこと

今回は、「デザインCSS」にコードを貼っていきます。
つきましては、見出しのデザインコードを貼る前に、必ず現段階の「デザインCSS」を保存しておいてください。

もし失敗してブログデザインが崩れてしまったら、元に戻すのに大変な時間を食います。

経験者は語ります。

場所はPCのメモでも、GoogleKeepでも、iOSのメモでも、なんでもよいので、ご自身が使いやすいところに保存ください。

個人的には、保存ボタンを押さなくても記入するだけで保存してくれる、Google,iOSなどのクラウドサービスがおすすめです。

表をスクロールさせる設定

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

以下のCSSコードを、

【ダッシュボード】➡【デザイン】➡【カスタマイズ(=真ん中のスパナマーク)】➡【デザインCSS】に貼り付けます。

/***スプレッドシート表示***/
#table-sc {
overflow-x: scroll;
overflow: auto;
white-space: nowrap;
}
}

CSSコード解説

1行目: ボックスの範囲内に内容が収まらない部分の表示をx方向(横)スクロールして表示

2行目:ブラウザにより表示が変わる(基本的にはスクロールできる状態に)
3行目: ボックスサイズに収まらない場合に自動改行しない

overflow

CSS の一括指定プロパティ。要素の内容が多すぎてブロック内に収まらない場合の望ましい動作を両方向について設定します。

auto

ユーザー環境に依存。内容がブロック内に収まる場合はそのまま表示されますが、デスクトップブラウザーで内容があふれる場合、スクロールバーを表示します。

white-space

スペースや改行などの空白部分をどのように表示させるかを決める。

white-spaceで指定できる値

 

 

  半角スペースや改行、tab テキストの折り返し 文末の半角スペースや
改行、tab
normal
HTMLコード内で改行(enter)や半角スペース、タブが連続入力されても、
ブラウザ表示では1つの空白文字にまとめられる
自動で折り返し
除去
nowrap 折り返しされない
pre
連続で入力した空白や改行が
ブラウザでの表示に反映される
折り返しされない
そのまま反映
pre-wrap 自動で折り返し
pre-line 連続で並ぶ半角スペースやtabは1つの空白文字にまとまるが、
改行(enter)は反映される
自動で折り返し 除去

引用|CSSのwhite-spaceの使い方

-webkit-overflow-scrolling : touchについて

少し古い記事には、スクロールのコードとして-webkit-overflow-scrolling : touchが紹介されていますが、現在ではこのコードは不要といえます。

「-webkit-overflow-scrolling : touch」というのはiOS Safariに対してのコードです。

今まではoverflow: scrollを設定したときに、iOS Safariではデフォルトだとやや遅めにスクロールが反応し余韻が残るようなになってるので、「-webkit-overflow-scrolling : touch」CSSを書く必要がありました。

しかし現在ではこの指定がなくても、スムーズにスクロールできる仕様となりましたので、このコードは不要になったのです。

参考|Apple Developer Documentation

まだこのコードがCSSに残っている場合は、サクッと消してOKです!

CSSコードを貼っただけでは、テーブルはスクロールしません。

記事編集でHTMLを設置する必要があります。

次の章では、その方法をお伝えします。

HTMLコードを記事に設定する

記事の編集で、テーブル(表)のHTMLのコードを、以下のHTMLコードで挟む(囲む)ように設置します。

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

グーグルスプレッドシートの場合、htmlは<google-sheets-html-origin>から始まり、</google-sheets-html-origin>で終わります。これを目印に<div id="table-sc"></div>で挟んでください。

これで、横幅が狭くテーブルがはみ出した時は自動的に横スクロール機能が使えるようになります。

このブログは「AFFINGER」を使用しています

はてなブログにての動作デモンストレーションはこちらご参照ください。

HTMLコード解説

divタグには横スクロールの命令するクラス【 sc-table (任意)】を指定します。

横スクロールの反映確認方法

見たままモードでは変化が反映されませんが、プレビューで確認してみますと、スクロールバーが表示され、ユーザーのウェブページに合ったサイズにてテーブルが収まります。

表をはてなブログの編集モードで変更できる?

この貼り付けた表の記載文字内容は、はてなブログの見たままモードの編集でも可能です。
カラー変更やセルのサイズ変更については、HTMLにて変更できます。

この表はレスポンシブですが、表をクリックすると四角のマークが現れ、これを動かすことで見たままモードで表の全体的な大きさが変更できます。

まとめ

管理人の場合、表やテーブルはグーグルスプレッドシートで作成し、コピペで貼り付けています。はてな記法でも表は作れますが、エクセルやスプレッドシートの作業が慣れているので、コピペで貼り付けています。

スプレッドシートで作成した表のカラー変更やセル結合なども反映されます。フォント種類につきましては、テーマデザインの環境に引っ張られることがあります。グーグルスプレッドシートで作成した表やテーブルなどをはてなブログに埋め込む方法は、別記事にまとめます。

現在ははてなブログではなく、ワードプレスでブログ活動を行っております。はてなブログProを選択しなかった理由をまとめましたので、はてなブログProを検討中の方、ブログ収益化を検討中の方はぜひご参照ください。

https://samurai0505.com/hatenapro-wordpress/
はてなブログProに契約しなかった理由|本気でブログをするならワードプレス一択

2022/10/15

この記事では、はてなブログ無料版から、有料版に移行しなかった理由をお伝えします。 本気でブログ収益化を目指そうと思い、はてなブログ無料から有料版「はてなブログPro」への移動を考えましたが、様々な方面 ...

はてなブログ画像リンクを一括変更する|Search Regexの使い方徹底解説

2022/8/20

はてなブログからワードプレスへ引っ越した方は、画像も移動してきたことでしょう。 この記事では、はてなブログからワードプレス移動した画像のリンクを一括で変更する手順を、画像付きでお伝えします。 今回使用 ...

はてなキーワードのリンクを、ワードプレスで消す方法を徹底解説|失敗談あり

2022/8/20

はてなブログ(無料版)からワードスレスへ引っ越したときに大変だった「はてなキーワードのリンク」。 はてなブログ無料版にて執筆して公開しますと、本文中の言葉が「はてなキーワード」と認識され、キーワードペ ...

はてなブログで表をスクロールさせる|コピペで簡単に表が見やすくなるコード

2022/8/20

officeエクセルやグーグルスプレッドシートで貼り付けた表やテーブル。 スマホ表示にしたときに、はみ出して見れないなどといったことがないように、大きくなった表には横スクロールをつけましょう。 使い方 ...

はてなブログで一部のサイドバーのみを、スマホで非表示にするコードを公開

2022/8/20

スマホでは不要なサイドメニュー非表示にして、スマホの表示をスッキリさせましょう。

このサイトはアフィンガーを使用しています

WING(AFFINGER6 ver)

デザイン簡単、SEO対策と広告収入UPの機能が標準装備。さらに美しく、パワフルに。「稼ぐ」に特化したテーマ。

WING(アフィンガー6)公式サイト

2022年最新!おすすめレンタルサーバー

月額料金がライトプランで220円〜(税込)なので、コスパよく爆速なサイト運営が可能に!

管理画面は使いやすくなっているので、これからはじめてサイト運営をする方にもおすすめです!

Twitterでも口コミ良好!

スターサーバー公式サイト

  • B!