テーブル(表)、スマホで見るとハミ出る/自動計算したいを解決【WordPress】

wordpress

今回のテーマはテーブル(表)についてで、解決したいのは以下の2点です。

  • 長い文字列が表の中にあって、スマホで表示すると、画面から飛び出て不格好
  • 数字を表に入力しているが計算がめんどくさいので自動計算させたい

本記事はwordpressのプラグイン「TablePress」を使った実例と対処法について説明しています。

スマホから飛び出るテーブル(表)

まずは一つ目の問題についての解決です。
実際残念なときのテーブル動作と、直したときのテーブル動作をこのページ内でそのまま表現していますので、確認してみてください。

実際の表示例

野菜お値段個数重さ栽培日栽培地
ピーマン99999910000001000003000/12/31北海道,山形県,東京都,長野県,京都,島根県,福岡県,鹿児島県
たまねぎ8888444444421192/10/5アメリカのグランドキャニオンの底とか

PCから閲覧されてる方には、文字が改行されて見にくいなぁと思うぐらいでしょうか。スマホから閲覧すると表がはみ出てるし、スクロールは固定されない(360度ページが動く)と思われてると思います。PCで見られている方は是非スマホからも見てください。原因はこちらになります。

テーブルの中に改行できない文字列があり、画面サイズ以上の文字数が入っている

上記のテーブルの中の数字日付が、改行できないタイプのものです。(画面サイズ以上の列を追加しても同様の事象が発生するみたいです。未確認

確かに数字や日付は改行されると何のことかよくわからなくなるので、改行できないように作りこまれているんでしょう。

対処方法

横にスクロールさせるというのが一番綺麗だと思います!手順は2手です。
(数値の改行もできるかもしれないですが、桁数とか見にくくなるのでオススメできません)

cssを追加します。(該当のページへの反映だけでよければ、投稿記事編集中に下にスクロールしていけば、「カスタムCSS」という項目があります。)
以下のコードをそのままコピペしてCSSに追加してください。

.scroll{
    overflow: auto;
    white-space:nowrap;
}

続いて、テーブルのブロック二つのカスタムhtmlブロックで囲みます

# 初めのカスタムHTMLへ入力するもの
<div class="scroll">

# 後ろのカスタムHTMLへ入力するもの
</div>

下記のような感じでOK

コレで、表示が下記のように綺麗になります。

野菜お値段個数重さ栽培日栽培地
ピーマン99999910000001000003000/12/31北海道,山形県,東京都,長野県,京都,島根県,福岡県,鹿児島県
たまねぎ8888444444421192/10/5アメリカのグランドキャニオンの底とか

テーブル(表)の中の数値を自動計算したい

Excelのように自動計算できたら、行追加しても再度計算しなくてもいいのに。という悩みがTablePress」のプラグインでは一発解決します。公式サイト(リンク付いてます)では全ての関数が紹介されてます。(※英語に強い人はソチラをどうぞ)

手入力ケースと自動計算ケースを設定内容と合わせて紹介します。

手入力で実施していた場合のケース

TablePressで下記要領でテーブルを作成していると

  • 1行目:項目
  • 2ー5行目:計算すべき数値
  • 6行目:手動で計算した結果

そのまま、以下のように表示されます。

1行目加算減算乗算除算平均合計
2行目11994256410
3行目2-1004410072
4行目3-5044200128
5行目4-59441000-55
6行目10-102564326155

追加情報があると、再計算しなおしなので大変です。

Excelのように自動計算処理をさせる

では、数式と関数を使ってみるとどうなるか。Excelと記法はほぼ同じなので、フィーリングで書いてもだいたい大丈夫です。さきほど作成したテーブルの6列目のみ変更します。

そうすると以下のように計算された状態で表示されます。

1行目加算減算乗算除算平均合計
2行目11994256410
3行目2-1004410072
4行目3-5044200128
5行目4-59441000-55
6行目104082564326155

利用時の注意事項

範囲指定

合計値を1行目に表示するような形にし、「=sum(G2:G100)」と、今後行が増えたとしても、設定を変えないで良いように準備していても、存在しないセルを指定するとエラーになります。セルは存在しているものしか利用できないことに注意してください。

減算

上記の表計算を見てもらうと分かりますが、セルの値が「マイナス」の時、減算処理をすると「足し算」になります。

3桁ごとのカンマ区切り

元々の表計算で「,」(カンマ)を利用されていた場合は削除が必要です。セルの中に存在すると計算ができません。

高度なエディター

数式との併用が不可。(もしかしたら使えるかもしれません。使い方ご存じの方はコメントください)


いかがでしたでしょうか。CSSを使えるようになると、ブログの作成スピードが上がり、出来映えが非常に良くなります。当サイトを参考にされている方はCSSやHTMLについて初心者ではないでしょうか。検索で得た知識はすぐ忘れてしまいますが、本で覚えた知識は忘れにくいもの電子書籍は駄目です)なので、1冊手元に置いてみてはいかがでしょう。

こちらの書籍はカラーで印刷されていて、非常に読みやすい書籍となっています。ブログを本格的に初めていくためにも、まずは楽しんで読める書籍からスタートしてみてはいかがでしょう。

コメント