kindle unlimited 読み放題 キャンペーン中!2ヶ月使ってたった199円!

【Cocoonテーマ】レスポンシブテーブル挙動を調整。スマホのみ横スクロールするように。

Cocoon(コクーン)
スポンサーリンク

ブログの記事投稿では、閲覧していただく方に情報がすんなりと読めるように、表・リストなどを多く使うことを心がけています。

ドンちゃん
ドンちゃん

表現は文章だけじゃないわよ。

私個人としても、スペック的な情報を文章でひたすら書かれたWebメディアを見ても情報が頭に入ってこないです(古いPCメディアに多い印象)。

HTMLを書くのが楽になるエディタを使っているのでHTMLテーブルで投稿すること自体は苦にはしていませんが、表示させる内容で折り返し部分を考えたりとか、PC、タブレット、スマホの見た目が異なる部分には悩みを持っています。

このブログではWordPressのテーマにコクーン(Cocoon)を使っていますが、設定1つでレスポンシブ対応にすることが可能です。

今回は、それに+αでスマホのみをレスポンシブを対応させたく少しCSSを調整してみました。

スポンサーリンク

HTMLテーブル(表)のレスポンシブ対応とは

要はパソコン、タブレット、スマホなどデバイスを問わずに、HTMLテーブルの内容を読みやすくすることです。

レスポンシブ化してないテーブルはスマホだとちょっと見づらいことも

レスポンシブ化してないテーブルはスマホだとちょっと見づらいことも

いまやスマホで情報を閲覧する方のほうが多い時代ですので、横幅不足を解消するアプローチをプロのクリエイターさんなどがいろいろ考えられているようです。

上記の記事を要約すると…

  1. ヘッダーの行と列を入れ替えたりとか、
  2. 行の内容からList-itemを作ったりとか、
  3. スクロールさせたり、、、とか大変なんですね

WordPressで表(テーブル)の作り方

今回の主旨ではないので詳細は割愛します。

WordPressの新しいエディタ(Gutenberg)には標準搭載されていますね。私は、まだ Gutenbergはオフ状態ですが、同じような方は「TinyMCE Advanced」を使うとビジュアルエディターで表が作れます。

これはこれで楽なんでしょうが、テーブルタグ(table, caption, th, td, thead, tbody… etc)の意味を覚えて使い分けたほうがSEO的に良い感触を得ています。
エディタで作るHTMLテーブル

エディタで作るHTMLテーブル

こんな感じでSublime Text+Emmetを使っています。これに慣れたらビジュアルエディターで色々触るのが逆に億劫になります。

スポンサーリンク

コクーン(Cocoon)のテーブルレスポンシブ設定方法

コクーンはデフォルトでは、HTMLテーブル(表)の内容を横スクロールさせる設定が備わっています。デフォルトはOFFで使いたい人が自分で設定して使うことが出来ます。

Wordpress Cocoonテーマのレスポンシブテーブル設定

WordPress Cocoonテーマのレスポンシブテーブル設定

Wordpress Cocoonテーマのレスポンシブテーブル設定

WordPress Cocoonテーマのレスポンシブテーブル設定 チェックボックスをONにするだけ

以下は、スマートフォンでテーブルを見た場合。

レスポンシブテーブル(表) スマートフォンの場合

レスポンシブテーブル(表) スマートフォンの場合

次はPC上でテーブルを見た場合。

レスポンシブ PCの場合

レスポンシブ PCの場合

スマホのみテーブルレスポンシブを対応させる方法

コクーンの設定では、すべてのメディアクエリでスクロールさせるレスポンシブ設定となります。

ただ、私は普段のHTMLテーブルで使用している列数を5つ程度に絞っています。PCやタブレットはレスポンシブ設定はオフでもよいかな?と思ったので、珍しくCSSで調整してみます。

普段、PC閲覧の場合は折り返さない列、折り返させる列を意識しています。

デベロッパーツールで見たところ、コクーンのレスポンシブ設定をONにした後にth, tdタグに「white-space: nowrap;”(テキストを折り返さない設定)」が入っていました。これを一旦元の「テキストを折り返す設定」に戻します。

.scrollable-table th, .scrollable-table td {
    /* テキストを折り返す設定 */
    white-space: normal;
}
これでPCの場合は設定前の状態に戻りました。(スクロール設定自体は有効でしょうが、この一文で求めていた結果は得られた)
Cocoon レスポンシブテーブルに追加設定でPCは横スクロールなしに

Cocoon レスポンシブテーブルに追加設定でPCは横スクロールなしに

その後、640px以下で再び「テキストを折り返さない設定」を入れます。

/* 640px以下*/
@media screen and (max-width: 640px) {
    .scrollable-table th, .scrollable-table td {
        /* テキストを折り返さない設定 */
        white-space: nowrap;
    }
}

レスポンシブテーブル見出し非固定

レスポンシブテーブル見出し非固定

ここまででスマホのみ横スクロールする結果が得られました。ただ、使っているうちに見出しが横にあるテーブルが左に流れすぎていったときに、どの見出しを見ていたのか迷子になるような気が…

見出しを固定する手段はないのか…と探したところ、、、おぉあったあった感謝。

CSSのposition属性を使うと出来るようです。次の設定を加えました。

@media screen and (max-width: 640px) {
 .scrollable-table th {
  /* ヘッダーを固定する設定 */
   position: -webkit-sticky;
   position: sticky;
   left: 0;
   z-index: 1;
 }
}
レスポンシブテーブル見出し固定

レスポンシブテーブル見出し固定

うまくいきました。横に設定した見出し(thタグ)が追随してくれます。

一部のブラウザでは動かないようです。IEはダメ、この辺は割り切り。

最終的にCSSに入れた情報は次の通り。

/* Cocoonテーマでレスポンシブ設定の追加CSS --- ここから */
.scrollable-table th, .scrollable-table td {
    /* テキストを折り返す設定 */
    white-space: normal;
}

/* 640px以下*/
@media screen and (max-width: 640px) {
    .scrollable-table th {
        /* ヘッダーを固定する設定 */
        position: -webkit-sticky; 
        position: sticky;
        left: 0;
        z-index: 1; 
    } 
    .scrollable-table th, .scrollable-table td {
        /* テキストを折り返さない設定 */
        white-space: nowrap;
    }
}
/* Cocoonテーマでレスポンシブ設定の追加CSS --- ここまで */

CSSの適用方法は2通り

  • 全体にカスタマイズ
    • 「外観」→「テーマの編集」→子テーマのCSSに追加
  • 一部の記事だけ
    • 各記事にオプションでCSSに追加

最後に

Cocoonテーマにおけるレスポンシブテーブルの設定で、PC、タブレットはレスポンシブさせずに、スマホのみ(640px以下)にする方法について自分のメモ代わりに記事投稿しました。

最近、ようやくCSSをいじる余裕が出てきました。あまりHTML/CSSは明るいほうではないのでゆるく触っていきます。

ブログ内でエディタ「Sublime Text」について触れましたが、次の書籍で基本的な操作を身につけました。

噂どおり、「恋に落ちるエディタ」です♪
タイトルとURLをコピーしました