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での最新の投稿

WPテーマ「SWELL」で作るWP-LP見本を紹介します。

Elementorに存在するフィルタ・ギャラリーと言う素晴らしい機能を紹介します。
下記のボタンの何れかをクリックしても、そのフィルタ・ギャラリーが実装されたページに辿り着くことになります。

そのフィルタ・ギャラリー・ページが見つかりましたら、ページの最下段にある「以下の一覧表が、実際のフィルタ・ギャラリーです。」のすぐ下にあるフィルター「SWELL」をクリックすると、有料WPテーマ「SWELL」で作った見本ページが3サイト見つかる筈です。この一連操作は、前記のフィルタ・ギャラリー・ボタンに共通する操作です。

このフィルタ・ギャラリーのフィルター「SWELL」は、WordPressの有料テーマ「SWELL」を意味しています。要するに筆者が過去n年の間、制作した数多くのWordPressサイトを、WPテーマをキーワードとしてギャラリーを検索する画像ギャラリーとなっています。

WPテーマ「脱Elementor」で作るWP-LP見本を紹介します。

Elementorに存在するフィルタ・ギャラリーと言う素晴らしい機能を紹介します。下記のボタンの何れかをクリックしても、そのフィルタ・ギャラリーが実装されたページに辿り着くことになります。

そのフィルタ・ギャラリー・ページが見つかりましたら、ページの最下段にある「以下の一覧表が、実際のフィルタ・ギャラリーです。」のすぐ下にあるフィルター「脱Elementor」をクリックすると、WPテーマで「Elementor未使用」で作った見本ページが3サイト見つかる筈です。この一連操作は、前記のフィルタ・ギャラリー・ボタンに共通する操作です。

このフィルタ・ギャラリーのフィルター「脱Elementor」は、WordPressのテーマ「脱Elementor」を意味しています。要するに筆者が過去n年の間、制作した数多くの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で編集したページです

左のサイトは、WPテーマTwenty Seventeenを使ったLP見本サイトです。
そして右のページは、同じサイトのトップページを「コピペ元」としてブロックエディタ「Gutenberg」で貼り付け編集したページです。

左のElementorページでは、途中、2ツのテーブルをブラグイン「Tablepress」で作成しております。右のGutenbergページでは、「Tablepress」を使用せず、Gutenbergのウジェット「テーブル」を、直接、ブロックに貼り付けて、簡単にテーブルが設定できています。

このテーブル設定に限って、その使い勝手を比較してみると、断然、Gutenbergに軍配を挙げざるを得ません。まだGutenbergを使い始めたばかりで、何も分かっておりませんが、新しい発見をした感じです。

自分で更新できるWordPressサイトを作って
みませんか?

WordPressのスキルを取得するのなら「ELEMENTOR」の存在は外せません。
ELEMENTORが分かればWordPressのハードルを下げることが可能です。
「もっと手軽に、もっと易しく」を前提に、プラグイン「ELEMENTOR」による
ページ編集に特化した「オンライン個人レッスン付きWordPress塾」が
お薦めする講座となります。

製品納入後の個人レッスンは、ZoomやGoogle Meet等を導入した
オンライン・リモート会議形式で開催し、Elementorの操作方法を
レクチャー致します。

以前の面談形式のレッスンではなくて、ユーザー様と一対一のレッスンですので、
感染症リスクの不安も心配ご無用、安心してWordPressスキルを取得できます。

トップページをブロック・エディタ「Gutenberg」で編集したら?

上記の4サイトに共通した仕様は、Elementor で作成したトップページをコピペ元として、ブロック・エディタ Gutenberg でコピー編集したページが存在することです。ナビメニュー上に「Gutenberg」というページ名で、ナビメニュー上の最右端に存在します。

上記の画像をクリックして、その Gutenberg ページにリンクが貼ってありますので、直ぐ見れると思います。コピペ元のトップページと比較参照して頂ければ、Elementor と Gutenberg での表現方法の違いが一目瞭然で分かると思います。

現在までで分かっている範囲ですが、以下の3点が Elementor で出来て Gutenberg で出来ない機能かと思います。
1.カラムの設定で、カラムの幅の変更が Gutenbereg で出来ない?
2.アイコンボックスや画像ボックスの機能が Gutenberg に存在しない?
3.開始アニメーション等の動きの制御が Gutenberg には無い?

自分で更新できるWordPressサイトを作って
みませんか?

WordPressのスキルを取得するのなら「ELEMENTOR」の存在は外せません。
ELEMENTORが分かればWordPressのハードルを下げることが可能です。
「もっと手軽に、もっと易しく」を前提に、プラグイン「ELEMENTOR」による
ページ編集に特化した「オンライン個人レッスン付きWordPress塾」が
お薦めする講座となります。

製品納入後の個人レッスンは、ZoomやGoogle Meet等を導入した
オンライン・リモート会議形式で開催し、Elementorの操作方法を
レクチャー致します。

以前の面談形式のレッスンではなくて、ユーザー様と一対一のレッスンですので、
感染症リスクの不安も心配ご無用、安心してWordPressスキルを取得できます。