巷では、WordPressの世界に新しいWPテーマ「SWELL」が公開され、その機能とデザイン性の豊かさでユーザーを魅了しているみたいです。タメぐち為五郎もミーハー気分で評判のSWELLを購入してみました。
どうなることやら、これから先が思いやれるが、購入したからには、やるしかないとの思いで早速HP作りに取り掛かることにしました。
これからのWordPressはブロック・エディタが主流となる？
Gutenbergでページ編集しました。
Elementorでページ編集しました。
好むと好まざるに拘らず、これからのWordPressの制作には、Gutenberg 即ち、ブロック・エディタを使って行かざるを得ないと感じています。理由は、2021年末までの期間制限で、Classic Editorのサポートが打ち切られる件。実際には、まだClassic Editorは使えていますが、時間の問題で何れは使えなくなると思われます。
筆者は、2018年末のGutenberg登場の際、「なんだこれは？」の否定的な感想だけで、Elementorを肯定する立場を継続する方針を貫き、ひたすらGutenbergを回避して来ましたが、ここに来てWordPressを取り巻く世情のブロック・エディタを養護する姿勢、特にYouTubeの世界でのブロック・エディタ関連の動画が数多く目立っている感じがしています。
そこでそれらの動画の一部を閲覧してみて、これなら今まで頑なに否定していたGutenbergの世界に入ってみたい興味が湧いてきました。興味が湧いたら冷めない内に行動あるのみ。Elementorで作成したWordPressの一部（トップページ）をGutenbergで書き直してみました。
前記の左側のサイトのトップページは、元々、Elementorで作成したページでしたが、今回、Gutenbergで編集し直した結果となっております。
右側のサイトは、そのGutenbergページの文言のテキスト参考として参照したページです。デザインはかなり違っていますが、同じLPイメージのページとして比較してご覧頂けると思います。
自分で更新できるWordPressサイトを作って
みませんか?
WordPressのスキルを取得するのなら「ELEMENTOR」の存在は外せません。
ELEMENTORが分かればWordPressのハードルを下げることが可能です。
「もっと手軽に、もっと易しく」を前提に、プラグイン「ELEMENTOR」による
ページ編集に特化した「オンライン個人レッスン付きWordPress塾」が
お薦めする講座となります。
製品納入後の個人レッスンは、ZoomやGoogle Meet等を導入した
オンライン・リモート会議形式で開催し、Elementorの操作方法を
レクチャー致します。
以前の面談形式のレッスンではなくて、ユーザー様と一対一のレッスンですので、
感染症リスクの不安も心配ご無用、安心してWordPressスキルを取得できます。
Elementor VS Gutenberg
Elementorで編集したページです
Gutenbergで編集したページです
左のサイトは、WPテーマTwenty Seventeenを使ったLP見本サイトです。
そして右のページは、同じサイトのトップページを「コピペ元」としてブロックエディタ「Gutenberg」で貼り付け編集したページです。
左のElementorページでは、途中、２ツのテーブルをブラグイン「Tablepress」で作成しております。右のGutenbergページでは、「Tablepress」を使用せず、Gutenbergのウジェット「テーブル」を、直接、ブロックに貼り付けて、簡単にテーブルが設定できています。
このテーブル設定に限って、その使い勝手を比較してみると、断然、Gutenbergに軍配を挙げざるを得ません。まだGutenbergを使い始めたばかりで、何も分かっておりませんが、新しい発見をした感じです。
自分で更新できるWordPressサイトを作って
みませんか?
WordPressのスキルを取得するのなら「ELEMENTOR」の存在は外せません。
ELEMENTORが分かればWordPressのハードルを下げることが可能です。
「もっと手軽に、もっと易しく」を前提に、プラグイン「ELEMENTOR」による
ページ編集に特化した「オンライン個人レッスン付きWordPress塾」が
お薦めする講座となります。
製品納入後の個人レッスンは、ZoomやGoogle Meet等を導入した
オンライン・リモート会議形式で開催し、Elementorの操作方法を
レクチャー致します。
以前の面談形式のレッスンではなくて、ユーザー様と一対一のレッスンですので、
感染症リスクの不安も心配ご無用、安心してWordPressスキルを取得できます。
トップページをブロック・エディタ「Gutenberg」で編集したら？
上記の４サイトに共通した仕様は、Elementor で作成したトップページをコピペ元として、ブロック・エディタ Gutenberg でコピー編集したページが存在することです。ナビメニュー上に「Gutenberg」というページ名で、ナビメニュー上の最右端に存在します。
上記の画像をクリックして、その Gutenberg ページにリンクが貼ってありますので、直ぐ見れると思います。コピペ元のトップページと比較参照して頂ければ、Elementor と Gutenberg での表現方法の違いが一目瞭然で分かると思います。
現在までで分かっている範囲ですが、以下の３点が Elementor で出来て Gutenberg で出来ない機能かと思います。
１．カラムの設定で、カラムの幅の変更が Gutenbereg で出来ない？
２．アイコンボックスや画像ボックスの機能が Gutenberg に存在しない？
３．開始アニメーション等の動きの制御が Gutenberg には無い？
自分で更新できるWordPressサイトを作って
みませんか?
WordPressのスキルを取得するのなら「ELEMENTOR」の存在は外せません。
ELEMENTORが分かればWordPressのハードルを下げることが可能です。
「もっと手軽に、もっと易しく」を前提に、プラグイン「ELEMENTOR」による
ページ編集に特化した「オンライン個人レッスン付きWordPress塾」が
お薦めする講座となります。
製品納入後の個人レッスンは、ZoomやGoogle Meet等を導入した
オンライン・リモート会議形式で開催し、Elementorの操作方法を
レクチャー致します。
以前の面談形式のレッスンではなくて、ユーザー様と一対一のレッスンですので、
感染症リスクの不安も心配ご無用、安心してWordPressスキルを取得できます。
今年は、SWELLでの制作を本格的に稼働する予定です。
そして一年半後の試みとして、追加のSWELLサイトを２ツ作成しましたので公開します。 今回のサイトは、前回のサイト型HP（トップページが固定ページ）でなくて、ブログ型HP（トップページがブログ記事一覧）となったサイトです。それもSWELLの６ツあるデモページの中から、DEMO01とDEMO05の二つの素敵なページを実装してみました。
藤心ステーション
SWELLのDEMO01を着せ替えて作成しました。
藤心 My Jukebox
SWELLのDEMO05を着せ替えて作成しました。
フリップ・ボックスとは？
自分で更新できるWordPressサイトを作って
みませんか?
WordPressのスキルを取得するのなら「ELEMENTOR」の存在は外せません。
ELEMENTORが分かればWordPressのハードルを下げることが可能です。
「もっと手軽に、もっと易しく」を前提に、プラグイン「ELEMENTOR」による
ページ編集に特化した「オンライン個人レッスン付きWordPress塾」が
お薦めする講座となります。
製品納入後の個人レッスンは、ZoomやGoogle Meet等を導入した
オンライン・リモート会議形式で開催し、Elementorの操作方法を
レクチャー致します。
以前の面談形式のレッスンではなくて、ユーザー様と一対一のレッスンですので、
感染症リスクの不安も心配ご無用、安心してWordPressスキルを取得できます。
Elementorだからできる部品（パーツ）のカスタマイズと再利用
Elementorのウジェット操作は、部品（パーツ）をドラッグ＆ドロップしてページ領域に貼り付けて、ページを作成して行くのが基本の操作になります。そして諸々のパーツを組み合わせて新たなパーツを作成して、Elementorのライブラリーに登録する機能があります。
登録したパーツは、ページ編集の際に、ライブラリーから呼び出して再利用することができます。
Elementorファンには朗報です／EdgeでElementorを！！
Elementorでページ編集するには、使用するブラウザとの相性があることは既にお伝えしました。一時期、マイクロソフトのEdgeはElementorとは最悪の相性でお薦めできないブラウザでしたが、EdgeのVer.79以降（最新Ver.84）であれば問題なく使用できるようになりました。
筆者はつい最近、既定のブラウザをFirefoxからEdgeに切り替えて使用しております。むしろFirefoxよりEdgeの方が良いみたいです。お薦めです。
自分で更新できるWordPressサイトを作って
みませんか?
WordPressのスキルを取得するのなら「ELEMENTOR」の存在は外せません。
ELEMENTORが分かればWordPressのハードルを下げることが可能です。
「もっと手軽に、もっと易しく」を前提に、プラグイン「ELEMENTOR」による
ページ編集に特化した「オンライン個人レッスン付きWordPress塾」が
お薦めする講座となります。
製品納入後の個人レッスンは、ZoomやGoogle Meet等を導入した
オンライン・リモート会議形式で開催し、Elementorの操作方法を
レクチャー致します。
以前の面談形式のレッスンではなくて、ユーザー様と一対一のレッスンですので、
感染症リスクの不安も心配ご無用、安心してWordPressスキルを取得できます。
Elementor VS ブロックエディタ
該当サイトは、元々、全ページ Elementor でページ編集した見本サイトでした。
ある時から（脱Elementorを志向し始めたことを契機に）せめて１ページだけでもＧurtenbergで作成したページがあっても良いのではないかと思い、Elementorのトップページをコピー元として、新たに同じイメージのトップページをブロックエディタで作成してみました。
Elementorでのトップページ
Ｇurtenbergでのトップページ
自分で更新できるWordPressサイトを作って
みませんか?
WordPressのスキルを取得するのなら「ELEMENTOR」の存在は外せません。
ELEMENTORが分かればWordPressのハードルを下げることが可能です。
「もっと手軽に、もっと易しく」を前提に、プラグイン「ELEMENTOR」による
ページ編集に特化した「オンライン個人レッスン付きWordPress塾」が
お薦めする講座となります。
製品納入後の個人レッスンは、ZoomやGoogle Meet等を導入した
オンライン・リモート会議形式で開催し、Elementorの操作方法を
レクチャー致します。
以前の面談形式のレッスンではなくて、ユーザー様と一対一のレッスンですので、
感染症リスクの不安も心配ご無用、安心してWordPressスキルを取得できます。
SWELLのフルワイド・ブロック VS カバー・ブロック
SWELLで作成したフルワイド・ブロックの実装例
Lighthouseで作成したカバー・ブロックの実装例
上記の2ツのサイトの共通点は、背景固定画像を所どころに配した一見するとLPページにも見える今流行りのWordPressページになっていると思います。ただ違うところは実装しているWPテーマだけです。
左側のページは、SWELLで作成した「藤心Online SWELL道場」のトップページです。
右側のページは、サイト全体をElementorで作成した「WP試作見本サイト」の中で、唯一Elementorを使用せずGutenbergで作成したページとなっているところです。
SWELLでのトップページでは、フルワイド・ブロックで背景固定画像を実装し、Gutenbergページでは、カバー・ブロックで同じような機能を実装していることになります。