- 投稿 2020/02/17
- アフィリエイトブログ
以前に、スマートフォンでWordpressの表(table)を横スクロールできるようにする方法で、表(table)を横スクロールできるようにすることはできたのだが、いかんせんこれだと、スマホで横スクロールした時に表(table)が見にくいと思っていた。
ので、その解決方法を記しておく。
ここでは、Wordpressの表(table)の列を固定させる方法を紹介する。
WordPressの表(table)の列を固定させる方法
表の列を固定させるには、「CSSカスタマイズ」と「HTMLカスタマイズ」を行う必要がある。
まずは、CSSカスタマイズから紹介する。
CSSカスタマイズ
テンプレートが「カエテンWP-JOY」の方は、Wordpressの管理画面(ダッシュボード)に移動して、「外観」➡「その他オプション」へと進もう。
その他の方は、「外観」➡「テーマの編集」➡「style.css(子テーマ)」へと進もう。
テンプレートが「カエテンWP-JOY」の方は、「通常ページ用CSS <head>設定」の欄にCSSコードを入力しよう。
その他の方は、「style.css(子テーマ)」に入力。
CSSコードは下記のページを参考にさせて頂いた。
➡【コピペ簡単】ヘッダー固定、スクロールヒントを表示させるテーブル【WordPress】
このページには他にも、スクロールヒントを出す方法も載っているので参考になる。
CSSコードを入力した。
CSSコードを入力後は、「CSS:変更を保存」ボタンをクリックする。
これで、CSSカスタマイズは完了である。
HTMLカスタマイズ
HTMLカスタマイズ方法も、先程のサイトを参考にして行った。
私は、「上部見出しが必要ない場合」の方を使用させてもらった(上見出しを固定するHTMLだと、iPhoneで見た時ぐわんぐわんと動く動作があるようだ)。
➡【コピペ簡単】ヘッダー固定、スクロールヒントを表示させるテーブル【WordPress】
「投稿or固定ページのテキスト画面」にHTMLをコピペで入力しよう。
後は、いつも通り表を作成して行けば良い。
日常漫画 | 著者 | 出版社 | 巻数 | アニメ化 | コメント |
---|---|---|---|---|---|
![]() |
あらゐ けいいち | KADOKAWA | 全10巻 | あり | 面白いです。
A子 |
![]() |
山内泰延 | スクウェア・エニックス | 全7巻 | あり | ギャグ漫画です。
B子 |
![]() |
石黒正数 | 少年画報社 | 全16巻 | あり | 探偵もの?
C子 |
こんな感じになる。
実際に横スクロールしてみる。
列が固定できているのが確認できると思う。
以上で、Wordpressの表(table)の列を固定させる方法の解説は終了する。