ロード中...

WordPressのブロックエディターについて


最近のWordPressのサイト制作は、ブロックエディターでのレイアウトが主となってきました。

これならHTMLコードやCSSコードの知識があまりない方でも、サイトを簡単に操作ができます。

ただし、より良いデザインにしたい!や、もう少しこうできたら、、と思うと、手が届きそうで届かないものがあるところもあります。

その一つとして、「テーブル」のレイアウトがあげられます。

WordPressの「テーブル」機能について

WordPressでは、表を載せる際に「テーブル機能」を使います。

たとえば、いろんな種類の価格を比べるものを載せる時、このように載せると思います。

例)スマートフォンの取扱い業者の価格の違い

取り扱い業者スマートフォン

A社

00,000円

B社

C社

000,000円

D社

00,000円

E社

こちらは、従来のクラシックエディターと呼ばれるもので制作しました。

クラシックエディター なら、異なる会社でも価格が同じ場合は、「Excel」の「セルの結合」のように、行をまとめることができます。

それをブロックエディターでやろうとすると . . .

取り扱い会社スマートフォン
A社00,000円
B社00,000円
C社 000,000円
D社00,000円
E社00,000円

”セルの結合”という機能がまだ備わっていないため、このように表記するほかありません。

「無理やりHTMLで編集の中に、クラシックエディターのコードを突っ込んじゃったらどうなの?」

はじめ私は楽観的な考えでこの行動をしてみました。

その答えはこちらです。▼ ▼ ▼

取り扱い業者スマートフォン

A社

00,000円

B社

C社

000,000円

D社

00,000円

E社

ぐずぐずに崩れました😢

2列でこの崩れ具合ですので、もっと多いと更に崩れそう . . .

原因として、クラシックエディターで作られているものは、「0」から作るものに対して、ブロックエディターで作られたテーブル機能は、「すでにベースが作られているもの」から作るので、動きや表の増やし方が限定されてしまっていると考えられます。

そのため、ブロックエディターの場合、操作は簡単なのですが、セル結合の部分は現在できません。

自力でどうにかするとなると、文字それぞれにclass名を付けてcssでちょこちょこ調整して、、、

どんどん難しくなっていきますね💦

もちろんクラシックエディターでの表制作が難しいかと言われれば、そうでもありません。

そちらにもテーブル機能が備わっている上にセルの結合や枠線の色、更には背景色も付けられると得点てんこ盛りです。

やり方さえ会得してしまえば、かなり自由な表が出来上がります。

従来のWordpressエディター
クラシックエディターの表示例

「ならわざわざブロックエディターの表にしなきゃいいじゃん。」

そんな声が聞こえてきそうですね . . .

ブロックエディターはクラシックエディターのみのサイトに比べ、編集が驚くほど楽になります。

現在弊社のサイトでも元々site origin editorで作られていたものをブロックエディターにする作業を行っております。

その作業をしたことで、再編集しやすく微調整もしやすいと感じました。

ブロックエディター化が始まったのは、WordPress5.0、つまり、2018年からなのでまだまだ進化する可能性はありますね!

いつかはブロックエディターのテーブルもセルが結合できますように . . .★ミ


カテゴリー:NEWS
タグ:, ,

私たちも応援しています。

システムブレイン株式会社はアスルクラロ沼津のスタジアムスポンサーです。

外部サイト

当サイトでのブログ公開時、自動的に以下のブログ等に当サイトのブログ記事へのリンクが表示されます。


主な対応可能地域

〔静岡県東部〕
沼津市、三島市、富士市、富士宮市、裾野市、御殿場市、伊豆市、伊豆の国市、熱海市、伊東市、田方郡函南町、駿東郡清水町、駿東郡長泉町、駿東郡小山町

〔その他静岡県下〕
静岡市、浜松市、島田市、磐田市、焼津市、掛川市、藤枝市、袋井市、下田市、湖西市、御前崎市、菊川市、牧之原市、賀茂郡東伊豆町、賀茂郡河津町、賀茂郡南伊豆町、賀茂郡松崎町、賀茂郡西伊豆町、榛原郡吉田町、榛原郡川根本町、周智郡森町

〔その他都道府県〕
日本全国対応可能
※静岡県以外のお客様でお打ち合わせご希望の際は、ご相談ください。

ABOUT US


システムブレイン社屋外観

システムブレイン株式会社
〒411-0903
静岡県駿東郡清水町堂庭238-4
TEL : 055-975-4141
FAX : 055-975-7080
https://www.sysb.co.jp/
instagram公式アカウント:@systembrain4141
facebook公式アカウント:@sysb.web
twitter公式アカウント:@sysb_web

主な業務内容
システム開発、ネットワーク構築、事務機器・事務用品販売、コピー機リース・レンタル、ホームページ制作、パソコンサポート、建築CAD支援

↓