Elementorでアコーディオン
ブロックエディタでアコーディオン
上記の２サイトの該当ページは、アコーディオン機能を実装した事例になります。
左側は、Elementorで作成したFAQページですが、中身はアコーディオン・ウジェットで作成されています。右側のブロックエディタで作成したアコーディオンは、SWELL専用ブロックのアコーディオン・ブロックの実装例です。
アコーディオン表示で Elementor VS Gutenberg
Myポートフォリオで「LPもどき事例」２例を比較する！
My ポートフォリオ
当サイトのポートフォリオ・ページにある極めて良く似た２サイトが下記の２サイトです。 似てると言ってもトップページに限定されたコンテンツ内容の話で、２サイトとも「LPもどき事例」実装サイトになっています。
藤心SWELL道場
VS
一般企業向け見本
「LPもどき事例」とは、ホームページのトップページが表示される時、ランディング・ページ（LP）イメージでページが表示されます。具体的な内容としては、縦方向のスクロールで背景固定画像が機能して、パララックス効果が見てとれる機能となっています。
グリッド・レイアウトは、究極のスマフォ対応（レスポンシブ）
e工房フジサキ
試作見本サイト
開発実績一覧紹介
That's Elmentor!
上記４例の共通仕様は、トップページでグリッド・レイアウトを実装したサイトになっていることです。グリッド・レイアウトとは、ページを複数のカラム（段組）で分割して、各カラムにアイコンボックスや画像ボックスやブログのサムネイル等を配置した表形式イメージのページを意味しています。
グリッド・レイアウトの該当ページで、スマフォ・モードでコンテンツの横幅を縮小して見ると、一つ一つのグリッド即ちアイコンボックスや画像ボックスの一つ一つがスマフォ画面にレイアウトされて表示されます。
即ち、意識してグリッド・レイアウトにしていたか否か定かではありませんが、結果的にPCモードからスマフォ・モードにしたら、究極のレスポンシブ・レイアウトになっていることに気がつくことでしょう。
サーバー移転には、データベースの移行が鍵を握る？
Xサーバーを使い始めてから、当然のことながらロリポップからXサーバーへのサーバー移転処理を、何度も失敗を繰り返しながらサーバー移転のノウハウを体験して、この方法なら大丈夫という確固たる手順・方法を取得しましたので、紹介したいと思います。
当方のサイトは全て「Ｘサーバー」に変えました。
筆者のサーバーは、2017年よりＸサーバーを使い始めました。それ以後、ロリポップとの併用使用となっていましたが、2020年４月のロリポップとの契約更新をせず、以後は、Xサーバーだけでの運用となったわけです。
ロリポップより分かり易い「Ｘサーバー」
ポートフォリオから見えてくる藤心の公式９サイトの現状
ポートフォリオ・ページ
当方の制作実績と作成済HPを紹介する意味でMyポートフォリオ・ページが、藤心の各サイトに共通ページとして存在します。サイトの数は合計で９サイトあります。何故、９サイトなのか？。サイトの数は、結果的に９サイトになったまでで、意図して９サイトにした訳ではありません。
その９サイトの各サイトの実際の姿は、ポートフォリオ・ページから、ご覧頂けるわけですが、どのようなサイトがあって、サイトの特徴や制作目的等を、まとめて紹介したいと思って、当ページを作成しました。
1.「SWELL」対「Elementor」
当方のWordPressサイトは、元々、Elementorからスタートしました。Elementorを５年以上使用して実際にElementorでお客様のWebサイトを作成してきました。今後、このままElementorを使い続けて良いものか否か疑問に思うようになりました。
実際問題としてElementorでの制作を拒否されるお客様が少なからずいることも事実です。正直言って、自分は、このままElementorを使い続けて行きたと思ってはいるのですが、Elementorを拒否するお客様も理解できます。
藤心SWELL
道場
藤心ステーション
藤心 My Jukebox
２年前頃から有料テーマ「SWELL」を購入して「SWELL」でのWordPressサイトを作り始めてきました。Elementor一辺倒から脱して、Elementor以外の例えば「SWELL」等のブロック・エディタを体験しみて、今後の方向を決めても良いかなと思っております。
そのような状況で、藤心の公式９サイトは「SWELL」サイトが３サイトで、残りの６サイトが「Elementor」サイトとなっております。その「SWELL」３サイトが前記のサイトになります。
WordPressのWPテーマは、無料・有料のテーマが沢山あります。藤心の公式９サイトを、無料・有料で分けてみると、前記の「SWELL」３サイトは有料テーマに分類されます。その３サイトに「賢威」テーマで作成した「e工房フジサキ」のサイトを加えた計４サイト（下記）が有料テーマのサイトになります。
e工房フジサキ
藤心SWELL
道場
藤心ステーション
藤心 My Jukebox
WordPressのトップページに着目すると、「ブログ型HP」か否かが判別されます。即ち、トップページにブログ記事一覧表示があったり、Elementorの「ポスト・グリット」等があれば「ブログ型HP」と判別されます。
下記の４サイトが「ブログ型HP」で、それ以外の５サイトは「非ブログ型HP」でトップページが固定ページで作成されています。
That's Elementorでのポスト・グリッド
藤心ステーションでの最新の投稿
e工房フジサキでのポスト・グリッド
藤心 My Jukeboxでの最新の投稿
WPテーマ「SWELL」で作るWP-LP見本を紹介します。
Elementorに存在するフィルタ・ギャラリーと言う素晴らしい機能を紹介します。
下記のボタンの何れかをクリックしても、そのフィルタ・ギャラリーが実装されたページに辿り着くことになります。
そのフィルタ・ギャラリー・ページが見つかりましたら、ページの最下段にある「以下の一覧表が、実際のフィルタ・ギャラリーです。」のすぐ下にあるフィルター「SWELL」をクリックすると、有料WPテーマ「SWELL」で作った見本ページが３サイト見つかる筈です。この一連操作は、前記のフィルタ・ギャラリー・ボタンに共通する操作です。
このフィルタ・ギャラリーのフィルター「SWELL」は、WordPressの有料テーマ「SWELL」を意味しています。要するに筆者が過去ｎ年の間、制作した数多くのWordPressサイトを、WPテーマをキーワードとしてギャラリーを検索する画像ギャラリーとなっています。
WPテーマ「脱Elementor」で作るWP-LP見本を紹介します。
Elementorに存在するフィルタ・ギャラリーと言う素晴らしい機能を紹介します。下記のボタンの何れかをクリックしても、そのフィルタ・ギャラリーが実装されたページに辿り着くことになります。
そのフィルタ・ギャラリー・ページが見つかりましたら、ページの最下段にある「以下の一覧表が、実際のフィルタ・ギャラリーです。」のすぐ下にあるフィルター「脱Elementor」をクリックすると、WPテーマで「Elementor未使用」で作った見本ページが３サイト見つかる筈です。この一連操作は、前記のフィルタ・ギャラリー・ボタンに共通する操作です。
このフィルタ・ギャラリーのフィルター「脱Elementor」は、WordPressのテーマ「脱Elementor」を意味しています。要するに筆者が過去ｎ年の間、制作した数多くのWordPressサイトを、WPテーマ「脱Elementor」をキーワードとしてギャラリーを検索する画像ギャラリーとなっています。
SWELLを購入してSWELLサイトを作成
巷では、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スキルを取得できます。