Shibablog(しばぶろ)

月収が10万しかないけど好きなことで生きていく

はてなブログでスマホだと表が見切れてしまう時の3つの対策!

f:id:sibalove:20180504003727j:plain

 

こんにちは!しばらぶです。

 

GWは京都に行って豆柴カフェで幸せを補給してきました。

 

さて、今回ですが、最近サブブログのほうでエクセルの表を記事に貼りつけたのですが、スマホから見てみると

 

f:id:sibalove:20180503212912p:plain

 

見切れてる!!!

ということに気づきました。(体重も全公開していきますw)

スライドしてみましたがスクロールできるわけでもなく、ちょっとこれはまずいなと思い、調べてみようと思った次第です。

 

そこで調べてはみたものの、なんだか専門用語が多くてちんぷんかんぷんでした。

f:id:sibalove:20180503210202j:plain

なるほどわからん

 

というわけで、今回は初心者向けはてなブログでエクセルの表を貼りつけたとき、見切れてしまう対策を解説していきたいと思います!

私自身が初心者なので至らない点もありますが、備忘録として残しておきます。

 

 

横幅の%を指定する

こちらのサイト様が参考になりました!

naifix.com

 

HTMLを少しいじってみることで何とかなりそうです。

HTMLときくと「なんだか難しそう」と思われるかもしれませんが、安心してください。私でもできたので、原因が同じならあなたもできるはずです!

(心配な方は始める前にHTMLをコピーしてメモ帳などに貼っておくと安心です)

 

そもそも、見切れてしまう原因は、表の幅をpxという長さで指定してしまっているからです。

これはエクセルから表をそのままコピー&ペーストしても、自動的にpxで数値が割り振られてしまいます。

なので、この数値をにして、100%におさまるようにすればよいのです。

 

方法

それでは先ほどのこの表↓の右端の列を画面に収まるように設定していきましょう。

f:id:sibalove:20180503212912p:plain

 

①記事の編集画面から「HTML編集」を選択します。

②表と列の幅が指定してある部分書き換えます。

f:id:sibalove:20180503221606p:plain

私の場合ですが、

 

<table width="565">

<tbody>
<tr>

<td width="84">日時</td>
<td width="72">体重(kg)</td>
<td width="72">BMI</td>
<td width="337">メモ</td>

 

と書いてある部分です。

日時、体重といった見出しの文字が目印になると思います。

565が表全体の横幅、84や72という数字が列の幅の長さの事です。

青文字の部分を書き換えていきます↓

 

<table width=100%>

<tbody>
<tr>

<td style="width: 10%">日時</td>
<td style="width: 10%">体重(kg)</td>
<td style="width: 10%">BMI</td>
<td style="width: 10%">メモ</td>

 

私の場合は4列で、メモの列を広くしたかったので、

10+10+10+70=100%

という感じにしてみました。

列の数や、取りたい幅の割合によって数字は調整してみてください。

 

結果

f:id:sibalove:20180503222706p:plain

 

収まりました!

しかし、う~ん。

収まってはくれましたが、10%にしたはずの日時が70%のメモとあまり変わらないのはなぜ…?

これでも一応文字は入ったのですが、メモのところがやけに縦長になってしまい、いまいちだったので他の方法を探します。

 

スクロールバーをつける

こちらのサイト様を参考にさせていただきました!

www.nishi2002.com

 

表の下にスクロールバーを表示させてみようと思います。

先ほどよりは少し手順が増えますが、横に長い表を入れるときには便利です。

(※先ほど100%の設定にした場合は元に戻しておかないと、スクロールする意味がないのでpxの値に戻しておいた方が無難です。)

 

方法

①記事の編集→「HTML編集」

②表のソース部分の上下にdivタグをつける

③デザインCSSにスクロールバーのソースを貼りつける

 

divタグってなんぞや、という声が聞こえてきそうです。

CSS?ソース?頼むから日本語で説明してくれー!という私のような方のために、できるだけ日本語で説明します(笑)

用語について詳しく説明すると頭がぐちゃぐちゃになってしまいそうなので、

「こうすればいいよ」っていうことだけ説明すると、

 

まずはHTML編集で表が書かれている部分を見つけます。

f:id:sibalove:20180503224746p:plain

 

<table~>~</table>というのが目印です。見つかりましたか?

 

見つかったら、その上と下にdivタグというのを書きます。

 

<div class="table-scroll">

<table width="565">

~~~省略~~~

</table>

</div>

 

画像だとこんな感じです↓

f:id:sibalove:20180503225755p:plain

ここまで来たらひとまず下書きを保存しておきましょう。

 

保存したら、ダッシュボード→デザイン→カスタマイズ→デザインCSSをクリックします。

f:id:sibalove:20180503231326p:plain

 

そこに次のコードを貼りつけます

 

/* 表に横スクロールバーを表示 */
@media (max-width: 640px) {
.table-scroll {
overflow-x: scroll;
}
}

 

赤字の部分全てをコピー&ペーストで大丈夫です。

 

できたら忘れずに「変更を保存する」のボタンを押してください。

これで完了です!

記事を確認してみてください。

 

結果

f:id:sibalove:20180503233459p:plain

無事にスクロールバーが表示されました!

 

しかし、一番下まで行かないとスクロールできないので、行が多いとスクロールするのもちょっと大変です。

2~3行の表ならこれでいいのかもしれませんが、私の場合ちょっとこれもいまいち…。

 

画像として貼りつけてしまう

私が扱おうとしている表が縦にも横にもそれなりに長い表なので、強硬手段に出ることにしました。

スクリーンショットでキャプチャを取ってしまおうという方法です(笑)

 

画像の場合は、はてなで見切れて表示されるということは無いので、エクセルで作った表をFnキー+Altキー+PrtScキーで画面のスクリーンショットをとり、ペイントできれいにすれば、その画像をアップして解決です。

 

元も子もないですが、縦にも横にも長い表の場合はこれが一番楽で、かつ見やすい結果になりました。

 

最後に

いかがだったでしょうか?

わたしは今回は最終的には画像をキャプチャするという強硬手段で解決させましたが、表のままでも、画面に収まるようにしたり、スクロールバーを表示させたりすることで見やすい記事になるのかなと思います。

今後、表を扱うことがあってもこれで安心です。

 

この記事が役に立つことができたら幸いです。

 

それでは今回はこのあたりで!

しばらぶでした!