Cocoonコンテンツ内のテーブルを横スクロールにする

cocoonで比較表を作成する際に活用した方法を自分用にメモ。

Cocoonコンテンツ内のテーブルを横スクロールにする

テーブルをレスポンシブ対応の横スクロール方式にする方法をCocoonコンテンツ内で実施する手順。

1. WordPress管理画面にログインする。
2. 「Cocoon設定」を選択する。
3. 「本文」タブをクリックする。
4. 「レスポンシブテーブル」項目を見つける。
5. 「横幅の広いテーブルは横スクロール」を有効にする。

WordPressで横長の表を崩さずに挿入する方法（レスポンシブ対応表）

WordPressで横幅の広い表を挿入しても表示が崩れない横スクロール表を実装するための手順。

functions.phpにコードを追加

//横スクロールレスポンシブテーブル用の要素の追加
add_filter('the_content', function ($the_content) {
  $the_content = preg_replace('/<table/i', '<div class="scrollable-table"><table', $the_content);
  $the_content = preg_replace('/<\/table>/i', '</table></div>', $the_content);
  return $the_content;
});

• 注意点：このコードはPHP 5.4以上のバージョンで動作します。無名関数を使用しているため、古いバージョンのPHPではエラーが出る可能性があります。

style.cssにスタイルを追加

横幅の広い表がスクロール可能になり、レスポンシブなデザインに対応するようにします。

.scrollable-table table{
  border-collapse: collapse;
  margin: 1em 0;
  max-width: 100%;
}

.scrollable-table th{
  background-color: #eee;
}

.scrollable-table th,
.scrollable-table td{
  border: solid 1px #ccc;
  padding: 3px 5px;
  white-space: nowrap;
}

.scrollable-table {
  overflow-x: auto;
  margin-bottom: 1em;
}

cocoonのstyle.cssはどこにある

WordPressで子テーマ「Cocoon Child」のスタイルシートにCSSを追加する手順

1. WordPressの管理画面にログインします。
2. 「外観」→「テーマファイルエディター」をクリックします。
3. 「編集するテーマを選択」で「Cocoon Child」を選択します。
4. スタイルシート（style.css）をクリックします。
5. 「選択したファイルの内容」の部分に、必要なCSSを追加します。一番下の空白の部分に追加しましょう。
6. 「ファイルを更新」をクリックして変更を保存します。

注意事項子テーマを使用する理由

親テーマに直接変更を加えると、テーマの更新時にカスタマイズした内容が失われる可能性があります。

子テーマを使用することで、テーマの更新があってもカスタマイズが保持されます。

バックアップを取る

ファイルを編集する前に、必ずバックアップを取っておきましょう。

誤って重要なコードを削除してしまった場合などに備えることができます。

慎重に編集

CSSの追加や変更はサイトの見た目に直接影響します。

特に、閉じタグを忘れるなどの小さなミスも表示に大きな影響を及ぼすことがあるため、慎重に行いましょう。

「テーブル」ブロック中に、ボタンを追加する方法

WordPressの「テーブル」ブロック中に、ボタンを追加するための手順。

テキストリンクを入力する手順

1. テーブル中のテキストを選択します。
2. 選択したテキストで**「リンク」ボタンをクリック**します（テキスト編集ツールバー上にあります）。
3. ポップアップまたはリンクオプションで、リンク先のURLを入力し、確定します。

ハイライト設定をする手順

1. リンクにしたいテキストを再度選択し、ハイライト機能を選択します。
2. 色のパレットからボタンの背景色にしたい色を選択します。

CSSを追加する手順

• style.css に以下のCSSコードを追加します。

これにより、ハイライトしたテキスト（マークされたテキスト）がボタンのように見えるスタイリングが適用されます。