【Cocoonテーマ】レスポンシブテーブル挙動を調整。スマホのみ横スクロールするように。シンガポール航空ベトナム航空タイ国際航空マレーシア航空セブパシフィック航空エアアジア空港ラウンジレビューガジェットブログ運営Cocoon(コクーン)2020年JGC修行を始めます(詳細はこちらをクリック)2019年に買ってよかったもの10選+2(旅行&ガジェット)年を越してしまいました。昨年はイチロー・上原が引退し、令和元年となり、天皇陛下がおかわりになり、消費税が増税。私はあまり変化がありませんが、購入したものくらいは整理してみました。詳細はこちらホームブログ運営Cocoon(コクーン)【Cocoonテーマ】レスポンシブテーブル挙動を調整。スマホのみ横スクロールするように。Cocoon(コクーン)2019.10.25スポンサーリンクブログの記事投稿では、閲覧していただく方に情報がすんなりと読めるように、テーブル・リストなどを多く使うことを心がけています。ドンちゃん表現は文章だけじゃないわよ。私個人としても、スペック的な情報を文章でひたすら書かれたWebメディアを見ても情報が頭に入ってこないです(古いPCメディアに多い印象)。HTMLを書くのが楽になるエディタを使っているのでHTMLテーブルで投稿すること自体は苦にはしていませんが、表示させる内容で折り返し部分を考えたりとか、PC、タブレット、スマホの見た目が異なる部分には悩みを持っています。このブログではWordPressのテーマにコクーン(Cocoon)を使っていますが、設定1つでレスポンシブ対応にすることが可能です。今回は、それに+αでスマホのみをレスポンシブを対応させたく少しCSSを調整してみました。最後にHTMLテーブルのレスポンシブ対応とは要はパソコン、タブレット、スマホなどデバイスを問わずに、HTMLテーブルの内容を読みやすくすることです。レスポンシブ化してないテーブルはスマホだとちょっと見づらいこともいまやスマホで情報を閲覧する方のほうが多い時代ですので、横幅不足を解消するアプローチをプロのクリエイターさんなどがいろいろ考えられているようです。次の記事にベーシックな内容をまとめました。ワードプレスでの表(テーブル)作り方(Cocoonテーマ寄り)ワードプレスでの表(テーブル)の作り方をご紹介します。基本的なHTML情報をわかりやすく書いてみました。Cocoonテーマ寄りです。changbeer.site2020.01.25コクーン(Cocoon)のテーブルレスポンシブ設定方法コクーンはデフォルトでは、HTMLテーブルの内容を横スクロールさせる設定が備わっています。デフォルトはOFFで使いたい人が自分で設定して使うことが出来ます。横スクロール表示対応のレスポンスでテーブル設定方法です。チェックボックスをONにするだけスポンサーリンク以下は、スマートフォンでテーブルを見た場合。次はPC上でテーブルを見た場合。PCの場合スマホのみテーブルレスポンシブを対応させる方法コクーンの設定では、すべてのメディアクエリでスクロールさせるレスポンシブ設定となります。私は普段のHTMLテーブルで使用している列数を5つ程度に絞っています。PCやタブレットはレスポンシブ設定はオフでもよいかな?と思ったので、珍しくCSSで調整してみます。普段、PC閲覧の場合は折り返さない列、折り返させる列を意識しています。nowrap;”(テキストを折り返さない設定)」が入っていました。これを一旦元の「テキストを折り返す設定」に戻します。normal;}これでPCの場合は設定前の状態に戻りました。レスポンシブテーブルに追加設定でPCは横スクロールなしにその後、640px以下で再び「テキストを折り返さない設定」を入れます。}}レスポンシブテーブル見出し非固定ここまででスマホのみ横スクロールする結果が得られました。使っているうちに見出しが横にあるテーブルが左に流れすぎていったときに、どの見出しを見ていたのか迷子になるような気が...見出しを固定する手段はないのか...と探したところ、、、おぉあったあった感謝。max-content`の対応が進んだことで、CSSのみで行・列ヘッダ固定テーブルを容易に実装できるようになりました。...qiita.comCSSのposition属性を使うと出来るようです。次の設定を加えました。}}レスポンシブテーブル見出し固定うまくいきました。横に設定した見出し(thタグ)が追随してくれます。一部のブラウザでは動かないようです。IEはダメ、この辺は割り切り。最終的にCSSに入れた情報は次の通り。最後にCocoonテーマにおけるレスポンシブテーブルの設定で、PC、タブレットはレスポンシブさせずに、スマホのみ(640px以下)にする方法について自分のメモ代わりに記事投稿しました。最近、ようやくCSSをいじる余裕が出てきました。HTML/CSSは明るいほうではないのでゆるく触っていきます。Text」について触れましたが、次の書籍で基本的な操作を身につけました。Cocoonアフィリエイトタグ・リンク貼り方。Cocoonテーマでのアフィリエイトタグの貼り方、使い方・コツを共有します。クラシックエディタ、ブロックエディタそれぞれに分けた方法を共有します。テキスト、バナー、ボタン、アプリ型リンクとか。changbeer.site2019.12.23Cocoon(コクーン)wordpressスポンサーリンクご覧いただき感謝です。記事の品質がブースト的に向上するボタンは次の通りです。TwitterFacebook0はてブ1Pocket0LINEコピーこのブログを購読してみるスポンサーリンクスポンサーリンクスポンサーリンクブログの購読はこちらバジェットな旅行記ロク、主に東南アジアを中心とした旅行ブログです。写真多め、見やすい記事をお届けします。Feedlyへ登録するチャンビアバジェットな旅行記ロクカテゴリー別人気記事Cocoonテーマのヘッダーとロゴ。画像幅を理解してピッタリと。2019.03.312019.11.25Cocoonテーマの初期設定。サグラダファミリア的マニュアルを攻略せよ。Cocoonアフィリエイトタグ・リンク貼り方。2019.08.032019.12.23検索順位チェックツール【GRC】導入。日々の変動チェックはボタン一発。【コロン島】現地アイランドホッピング、観光ツアーを解説。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。スポンサーリンクサイト内検索Translationカテゴリー別人気記事Cocoonテーマのヘッダーとロゴ。画像幅を理解してピッタリと。2019.03.312019.11.25Cocoonテーマの初期設定。サグラダファミリア的マニュアルを攻略せよ。Cocoonアフィリエイトタグ・リンク貼り方。(Wordpress)2019.03.142020.01.25【Cocoon】ブログ半年で始めるトップページのカスタマイズ。固定ページ挿入で個性化を図る。2018.12.102020.01.16Cocoon初心者のためのエディタ活用の手引き。ブログ見た目いじりはそっちのけ2019.05.262020.01.25【Cocoonテーマ】レスポンシブテーブル挙動を調整。スマホのみ横スクロールするように。Slider3」(Wordpress/Cocoon環境)2019.09.142019.10.08ブログで使うWPテーマに恵まれた。Cocoonの魅力を語っていく。2018.11.162019.09.01このブログを書いている人チャンビア海外旅行・搭乗したフライトは数知れず。記憶を辿るのがもはや不可能となりブログを開始。2018年SFC解脱、2019年は謎にフィリピン航空へステータスマッチでマブハイマイル・プレミアエリートに。オリンピックイヤー2020年はJGC修行を予定しています。ツイッターは日常を投稿、インスタは写真中心に更新しているので気が向いたらフォロー嬉しいです。検索トップサイドバースポンサーリンクサイト内検索カテゴリー別人気記事Cocoonテーマのヘッダーとロゴ。画像幅を理解してピッタリと。2019.03.312019.11.25Cocoonテーマの初期設定。サグラダファミリア的マニュアルを攻略せよ。Cocoonアフィリエイトタグ・リンク貼り方。(Wordpress)2019.03.142020.01.25【Cocoon】ブログ半年で始めるトップページのカスタマイズ。固定ページ挿入で個性化を図る。2018.12.102020.01.16Cocoon初心者のためのエディタ活用の手引き。ブログ見た目いじりはそっちのけ2019.05.262020.01.25【Cocoonテーマ】レスポンシブテーブル挙動を調整。スマホのみ横スクロールするように。Slider3」(Wordpress/Cocoon環境)2019.09.142019.10.08ブログで使うWPテーマに恵まれた。Cocoonの魅力を語っていく。2018.11.162019.09.01このブログを書いている人チャンビア海外旅行・搭乗したフライトは数知れず。記憶を辿るのがもはや不可能となりブログを開始。2018年SFC解脱、2019年は謎にフィリピン航空へステータスマッチでマブハイマイル・プレミアエリートに。オリンピックイヤー2020年はJGC修行を予定しています。ツイッターは日常を投稿、インスタは写真中心に更新しているので気が向いたらフォロー嬉しいです。document.documentElement&&this.addEventListener("touchstart",function(a){1===a.touches.length&&(e=a.touches[0].pageX,t=a.touches[0].pageY,i=!0,this.addEventListener("touchmove",s,!1))},!1)}),this}}(jQuery);タイトルとURLをコピーしました。