Elementor VS Gutenberg with Lightningテーマ

Elementor使用のLightning

脱ElementorのLightning

上記の2サイトは、何れもWPテーマ「Lightning」で作成された見本ページです。
ただ、使用しているページ編集エディタが異なります。

左側は、Elementorを実装して、全ページElementor仕様のサイトになっております。
それに対して、右側は、脱Elementor即ちElementorを一切使用しておらず、ブロックエディタ:Gutenbergを使用したページ作りをしております。サイトの中身は、ほぼ同じ内容になっています。

作成者として、どちらが作成しやすかったかと言うと、左側のElementorサイトでした。
Elementorは使い勝手面からブロックエディタより断然作成し易いのは事実ですが、今回、ブロックエディタに慣れる意味で、Elementorの作成工数の倍の時間と手間をかけてのブロックエディタへのチャレンジ結果でした。

SWELLのステップ・ブロックとは、「〇〇の流れ」みたいなもの?

制作代行の流れ(SWELL)

制作代行の流れ(Elementor)

SWELLのステップ・ブロックとは、物の流れや操作手順などを表す表現方法の場で良く使われる機能をブロックにしたものです。上記の左側がSWELLの専用ブロック「ステップ」を実装したページです。
右側は、Elementorで作成したSWELLのステップと同等な「処理の流れ」的な表現例ですが、ElementorにはSWELLのような専用ブロック(ウジェト)はありません。

SWELLのキャプション・ボックスはElementorのアイコンボックス?

キャプション・ボックス実装例

アイコン・ボックス実装例

SWELLページの2ページ目「新しい制作代行プラン」のページでは、キャプション・ボックスというブロックを実装しています。(上記の左側ページ)
それに対して、Elementorのアイコン・ボックスは、「Elementor支援サイト」のトップページでアイコン・ボックスを多用しています。(上記の右側ページ)

即ち、SWELLのキャプション・ボックスは、Elementorのアイコン・ボックスに等しいボックスになります。

SWELL専用ブロックでボックス・メニューを設定してみました。

藤心関連の公式9サイトを一覧紹介する手段として、藤心 My ポートフォリオと呼んでいるページがあります。その9サイトをSWELL専用ブロックのボックス・メニューで記述する方法があります。現在、SWELLサイトは3サイト(下記)ありますが、それぞれのサイトでボックス・メニューを設定したのが、以下になります。

アコーディオン表示で Elementor VS Gutenberg

Elementorでアコーディオン

ブロックエディタでアコーディオン

上記の2サイトの該当ページは、アコーディオン機能を実装した事例になります。
左側は、Elementorで作成したFAQページですが、中身はアコーディオン・ウジェットで作成されています。右側のブロックエディタで作成したアコーディオンは、SWELL専用ブロックのアコーディオン・ブロックの実装例です。

Myポートフォリオで「LPもどき事例」2例を比較する!

My ポートフォリオ

当サイトのポートフォリオ・ページにある極めて良く似た2サイトが下記の2サイトです。 似てると言ってもトップページに限定されたコンテンツ内容の話で、2サイトとも「LPもどき事例」実装サイトになっています。

藤心SWELL道場

VS

一般企業向け見本

「LPもどき事例」とは、ホームページのトップページが表示される時、ランディング・ページ(LP)イメージでページが表示されます。具体的な内容としては、縦方向のスクロールで背景固定画像が機能して、パララックス効果が見てとれる機能となっています。

 

グリッド・レイアウトは、究極のスマフォ対応(レスポンシブ)

e工房フジサキ

試作見本サイト

開発実績一覧紹介

That's Elmentor!

上記4例の共通仕様は、トップページでグリッド・レイアウトを実装したサイトになっていることです。グリッド・レイアウトとは、ページを複数のカラム(段組)で分割して、各カラムにアイコンボックスや画像ボックスやブログのサムネイル等を配置した表形式イメージのページを意味しています。

グリッド・レイアウトの該当ページで、スマフォ・モードでコンテンツの横幅を縮小して見ると、一つ一つのグリッド即ちアイコンボックス画像ボックスの一つ一つがスマフォ画面にレイアウトされて表示されます。

即ち、意識してグリッド・レイアウトにしていたか否か定かではありませんが、結果的にPCモードからスマフォ・モードにしたら、究極のレスポンシブ・レイアウトになっていることに気がつくことでしょう。

サーバー移転には、データベースの移行が鍵を握る?

Xサーバーを使い始めてから、当然のことながらロリポップからXサーバーへのサーバー移転処理を、何度も失敗を繰り返しながらサーバー移転のノウハウを体験して、この方法なら大丈夫という確固たる手順・方法を取得しましたので、紹介したいと思います。

当方のサイトは全て「Xサーバー」に変えました。

筆者のサーバーは、2017年よりXサーバーを使い始めました。それ以後、ロリポップとの併用使用となっていましたが、2020年4月のロリポップとの契約更新をせず、以後は、Xサーバーだけでの運用となったわけです。

ロリポップより分かり易い「Xサーバー」

ポートフォリオから見えてくる藤心の公式9サイトの現状

ポートフォリオ・ページ

当方の制作実績と作成済HPを紹介する意味でMyポートフォリオ・ページが、藤心の各サイトに共通ページとして存在します。サイトの数は合計で9サイトあります。何故、9サイトなのか?。サイトの数は、結果的に9サイトになったまでで、意図して9サイトにした訳ではありません。

その9サイトの各サイトの実際の姿は、ポートフォリオ・ページから、ご覧頂けるわけですが、どのようなサイトがあって、サイトの特徴や制作目的等を、まとめて紹介したいと思って、当ページを作成しました。

1.「SWELL」対「Elementor」

当方のWordPressサイトは、元々、Elementorからスタートしました。Elementorを5年以上使用して実際にElementorでお客様のWebサイトを作成してきました。今後、このままElementorを使い続けて良いものか否か疑問に思うようになりました。
実際問題としてElementorでの制作を拒否されるお客様が少なからずいることも事実です。正直言って、自分は、このままElementorを使い続けて行きたと思ってはいるのですが、Elementorを拒否するお客様も理解できます。

藤心SWELL 道場
藤心ステーション
藤心 My Jukebox

2年前頃から有料テーマ「SWELL」を購入して「SWELL」でのWordPressサイトを作り始めてきました。Elementor一辺倒から脱して、Elementor以外の例えば「SWELL」等のブロック・エディタを体験しみて、今後の方向を決めても良いかなと思っております。

そのような状況で、藤心の公式9サイトは「SWELL」サイトが3サイトで、残りの6サイトが「Elementor」サイトとなっております。その「SWELL」3サイトが前記のサイトになります。

WordPressのWPテーマは、無料・有料のテーマが沢山あります。藤心の公式9サイトを、無料・有料で分けてみると、前記の「SWELL」3サイトは有料テーマに分類されます。その3サイトに「賢威」テーマで作成した「e工房フジサキ」のサイトを加えた計4サイト(下記)が有料テーマのサイトになります。

e工房フジサキ
藤心SWELL 道場
藤心ステーション
藤心 My Jukebox

WordPressのトップページに着目すると、「ブログ型HP」か否かが判別されます。即ち、トップページにブログ記事一覧表示があったり、Elementorの「ポスト・グリット」等があれば「ブログ型HP」と判別されます。

下記の4サイトが「ブログ型HP」で、それ以外の5サイトは「非ブログ型HP」でトップページが固定ページで作成されています。

That's Elementorでのポスト・グリッド
藤心ステーションでの最新の投稿
e工房フジサキでのポスト・グリッド
藤心 My Jukeboxでの最新の投稿