以前に、スマートフォンで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)の列を固定させる方法の解説は終了する。