cocoon-table

お役立ち情報 ブログ

【Cocoon】表の横スクロール設定方法【表の各プロパティ解説】

2021年7月21日

商品のランキングや比較表を作りたいな。

でも商品の種類を多くすると、表の横幅が広くなって変に改行されるんだよね…。


表で見やすくするつもりが、逆に見づらくなっちゃう。

横にスクロールすることができれば、一覧表がキレイに見えるんだけどな…。

そんな疑問にお応えする記事です。

この記事で分かることは下記のとおり。

この記事でわかること

  • Cocoonで表を横スクロールする方法。
  • 各プロパティの解説。

結論、Cocoonで表を横スクロールするには、下記のとおりです。

  • Cocoon設定の「本文タグ」を選択。
  • 横幅の広いテーブルは横スクロールにチェックを入れます。
  • 1番下にある「変更をまとめて保存」を選択。

今回は、クラシックエディターでの使用をしております。

ぜひ参考にしてくださいね。

Cocoonで表を横スクロールする方法

cocoon-table

Cocoonで表を横スクロールする方法は、下記のとおり。

  • 「Cocoon設定」の「本文タグ」を選択。
  • 「横幅の広いテーブルは横スクロール」にチェックを入れます。
  • 1番下にある「変更をまとめて保存」を選択

表で文字を一列にする

表に文字をたくさん入力すると、下へ改行され見づらい文章になってしまいます。

表で分かりやすく解説するつもりが、分かりづらくなってしまいます。

そこで改行せず、文字を一列にする方法。

「Cocoon設定」の「本文タブ」を選択します。

cocoon-table

本文タブの中の下にある「横幅の広いテーブルは横スクロール」にチェックをいれます。

cocoon-table

最後に「変更をまとめて保存」をして終了。

WordPress上の編集では、改行されている状態ですが、プレビューで確認すると、

cocoon-table

    ↓   ↓   ↓   ↓   ↓

cocoon-table

Cocoonでは、「スクロールできます」と表示が出て親切設計!

これで、ランキングや比較を表で作る時に、見やすい表が作りやすくなります。

各プロパティの解説

cocoon-table

表に使う各プロパティを解説します。

プロパティの詳細への理解が分かれば、カスタマイズしやすくなりますよ。

表のプロパティ

table-property
  • 表の幅:表全体の幅「%」で表記
  • 表の高さ:表全体の高さ
  • 枠線:表の外枠の幅の太さ
  • 配置:ブログ内の表の位置「左・中央・右」
  • 線の種類:線の種類の変更
  • 枠線の色:枠線の色の変更
  • 背景色:表全体の背景色の変更

カラー見本は、原色大辞典さんのサイトを参考にしてください。

線の種類

SolidSolid1本の実績で表示。
DottedDotted点線で表示。
DashedDashed破線で表示。
DoubleDouble2本の実線で表示。ボーダー幅が3px以上必要
GrooveGroove立体的な外側の線を表示。
RidgeRidge立体的な内側の線を表示
Inset
Outset
なし表示されません
Hidden表示されません

セルのプロパティ

cell-property
  • セルの幅:セルの幅を変更「%」で表記
  • セルの高さ:セルの高さを変更
  • セルの種類:基本はなしでOK。「ヘッダーセル」を選択すると、セルが見出し(大文字)に。
  • 横配置:セル内の横の配置変更「左・中央・右」
  • 縦種類:セル内の縦の配置変更「左・中央・右」
  • 枠線の色:セル内の線の色変更
  • 背景色:セル内の背景色の変更

カラー見本は、原色大辞典さんのサイトを参考にしてください。

セルの種類

header-cell

ヘッダーセルを選択します。

header-cell

行のプロパティ

line-property
  • 行の種類:基本はなしでOK。
  • 行の配置:行内の配置選択「左・中央・右」
  • 高さ:行の縦幅の変更。
  • 枠線の色:行内の枠線の色変更
  • 背景色:行内の背景色の変更

カラー見本は、原色大辞典さんのサイトを参考にしてください。

クラシックエディターへの切り替え方法

cocoon-table

新旧エディターへの切り替えは、Cocoon設定から変更が簡単にできます。

Cocoonでは、チェックを「入れる」「外す」だけで切り替えが可能。

cocoon-table
  • WordPress上での「Cocoon設定」を選択します。
  • 設定の中の「エディター」をクリック。
  • エディター内の1番上の「Gutenbergエディターを有効にする」のチェックを外します。
  • チェックを外したら、「変更をまとめて保存」にて終了。

これで旧エディターに切り替わりましたよ。

まとめ:Cocoonで表を横スクロールする方法

ということでまとめます。

Cocoonで横幅のある表を作成したときに横スクロールにする方法は、下記のとおり。

  • 「Cocoon設定」の「本文タグ」を選択。
  • 「横幅の広いテーブルは横スクロール」にチェックを入れます。
  • 1番下にある「変更をまとめて保存」を選択

Cocoonでは、横スクロールの表示もされる親切設計になっています。

表の各プロパティも参考にして、読者にとって見やすいランキングや比較表を作成してください。

カラー見本は、原色大辞典さんのサイトを参考にしてください。

新旧エディターへの切り替え方法は、下記のとおりです。

  • WordPress上での「Cocoon設定」を選択します。
  • 設定の中の「エディター」をクリック。
  • エディター内の1番上の「Gutenbergエディターを有効にする」のチェックを外します。
  • チェックを外したら、「変更をまとめて保存」にて終了。

この記事があなたの参考にうれしいです。

スポンサーリンク

-お役立ち情報, ブログ
-, , , ,