- 投稿 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子 |
|
石黒正数 | 少年画報社 | 全１６巻 | あり | 探偵もの？
C子 |
こんな感じになる。
実際に横スクロールしてみる。
列が固定できているのが確認できると思う。
以上で、Wordpressの表（table）の列を固定させる方法の解説は終了する。
