WordPressブロックエディタのレスポンシブ対応カラムデザインの使い方
CSSをカスタマイズしなくてもカラムデザインが簡単にできます。ページを 2 ~ 3列に分割して、それぞれに画像や文章でデザインしたいことがあります。tableを使ったデザインは比較的容易に作ることができますが、レスポンシブに対応させるには知識も要求されます。テーマによってはカラムデザインのCSSが用意されている場合がありますが、スタイルシートのカスタマイズが必要な場合もあります。 Gutenberg にはデフォルトでカラムデザインが装備されているのでこちらを利用すれば簡単に記事を書きあげることができます。
カラムを利用するには、ブロックの選択から、デザインカラムを選択します。
続いて分割する割合を指定します。指定できる割合は 50% :50% , 30%:70% ,70%:30% , 33%:33%:33% , 25%:50%:25% になっています。
各カラムには、画像や文章を埋め込んでいくことができます。注意点はショートコードなどで、横幅を指定しているものがあるとレイアウトが崩れることもあります。ブラウザの世幅を最小にして確認するかスマートフォン等で表示の確認はしておくべきです。
Gutenberg のメリットとデメリット
「Gutenberg」は従来の「Classic Editor」から切り替えられるとアナウンスされ、公式サイトでは以下のようにコメントされています。「Classic Editor は公式な WordPress プラグインであり、少なくとも2022年まで、または必要なくなるまでの間、完全にサポート・保守されます。」
サポート終了が近くなっていますが、「Gutenberg」への移行率が低くしばらくは「Classic Editor」も利用できそうです。
メリット | デメリット |
---|---|
ブロックの種類が多い、カラムを分割することができる、ギャラリーやボタン、ウイジェットなども挿入できる。高度なデザインのページ編集ができる | 高度なデザインの記事を作るには便利ですが、高機能なことで操作が難しく感じられる |
コンテンツの色やサイズを細かく設定できる | ブロックの生成作業が面倒、記事を書き進めるたびにブロックを選択して生成する手間が発生する |
ブロックごとに簡単にコピーしたり入れ替えたりできる | クラッシックブロックがビジュアルエディタにしか対応していない |
Gutenberg への移行
「Gutenberg」はいづれWordPressのデフォルトエディタになることは間違いないでしょう。当初の予定では2021年12月31日で「Classic Editor」のサポートを終了するはずでした。しかし、その後思ったほど「Gutenberg」の使用率が高くないため、2022年以降、必要ならばサポート保守される方針に変更されました。
WordPress導入時から「Gutenberg」を利用しているサイトは問題ありませんが、「Classic Editor」でサイトを構築している場合はそれなりに準備をされることが推奨されます。エディタを切り替えることで表示されない等はありませんが、編集に戸惑ってしまう、編集に関するプラグインが利用できないといったことは発生します。(「Add Quick Tag」は機能しなくなります。)この際徐々に変更されるのがお勧めかもしれません。
WordPressのブロックエディタ(Gutenberg)は直感的に編集できる優れたエディタですが、記事を装飾したり、レイアウトデザインをしたいときには少し戸惑うこともあるかもしれません。編集機能がサポートされているテーマを利用すと悩みを解決できるかも。凝ったデザインや複雑なレイアウトを提供してくれる業者やフリーターを探すサービスも利用価値があるのでは?
ブロックエディタの使い方
-
WordPressブロックエディタ・クエリーループの使い方
WordPressブロックエディタの「クエリーループ」とは 「クエリーループ」を使えば関連する記事等の一覧を自…
-
WordPressブロックエディタのクエリーループで記事一覧を作る
ブロックエディタには、カテゴリやタグ、キーワードで記事一覧を表示させる「クエリーループ」があります。 「クエリ…
-
WordPressブロックエディタのグリッドとカラムの使い方
ブロックエディタにはレイアウトをデザインするために カラム と グリッドがあります。どちらもブロックを分割して…
-
WordPressブロックエディタの編集モードの使い方
WordPressには記事を編集するためのエディタとして、ブロック・ビジュアル・テキストの3のエディタが用意さ…
-
WordPressブロックエディタでブログカードを表示させる
ブロックエディターハンドブック WordPressはデフォルトでサイト内のページをブログカードとして表示するこ…
-
WordPressブロックエディター再利用ブロックの使い方
WordPressのデフォルトエディタ Gutenberg には指定したブロックを簡単に違う記事に貼り付けるこ…
-
WordPressブロックエディタのレスポンシブ対応カラムデザインの使い方
CSSをカスタマイズしなくてもカラムデザインが簡単にできます。ページを 2 ~ 3列に分割して、それぞれに画像…
-
WordPressブロックエディタのコードエディタの使い方
Gutenberg は、 ブロックエディタとも呼ばれ、段落(文章)や画像、見出し等をブロック単位でHTMLやC…
-
WordPressブロックエディタでタグをチェックボックスにして使いやすくする
WordPressでは編集時にタグ名を直接入力する仕様になっていて、使いがっては少し不便です。カテゴリーのよう…
-
WordPressブロックエディタのブロック要素の使い方を解説
Gutenbergは、WordPress サイトの構築および発行におけるまったく新しいパラダイムのコードネーム…
-
Gutenberg(WordPressブロックエディタ)は何時から使用(移行)すべきか
WordPress Ver.5.0以上からのビジュアルエディターになりました。Gutenberg は、ブロック…
ブロックエディタ関連のプラグイン
-
SimpleTOCはGutenbergブロックで目次を作成するプラグイン
SimpleTOCは投稿やページに目次ブロックを追加します。TOC は、記事またはページで見つかったすべての見…
-
VK Block Patternsはブロックパターンを記事に貼り付けるプラグイン
VK Block Patternsはブロックパターンを登録し記事に貼り付けることができるプラグインです。ブログ…
-
Gutenberg Editor Full Width Blocks Borderは編集画面で段落を枠線で見やすくするプラグイン
Gutenberg Editor Full Width Blocks Borderはページ編集画面で段落を枠線…
-
VK Block PatternはGutenbergのブロックパターンを作成するプラグイン
VK Block Patternsは有効化すると、カスタムブロックパターン用のカスタム投稿タイプが作成できるプ…
-
Classic EditorはGutenbergと旧エディタを切り替えるプラグイン
Classic EditorはWordPress 5.0から採用された新しいエディタ Gutenberg を旧…
WordPressは、HTMLやCSSなどのWEB制作スキルがなくても、記事を作成したり更新ができる、世界で最も利用されているCMS(Contents Management System)です。高度なカスタマイズもプラグインを使えば、セキュリティ・バックアップ・画像最適化・フォーム作成・マーケティング・SEO等が初心者でも簡単にできます。自社のイメージに合った有料テーマを利用すれば素早くビジネスサイトを運用でき、ビジネス用途に必要な、お問い合わせや資料請求、新規顧客開拓や既存顧客に対するフォローアップなど自社で対応できるようになります。独自ドメインの取得も年間数百円~、レンタルサーバーも月額数百円~と格安の時代です。ぜひ、自社でビジネスサイトを運用する環境を整え、新規顧客を開拓していきましょう!