当方のポートフォリオを見直し再公開しました。

当方の開発実績を「藤心ステーション」というページ名で公開して約2年経過しました。
「藤心ステーション」とは、筆者がWordPressで作成した自前の見本サイトだったり、WordPress塾のPRサイト又はユーザー支援サイトだったりで、計9サイト存在する筆者の関連リンク集サイトになっていました。

この度、今まで当方の唯一無二のブログサイトの名称を「藤心ステーション」というページ名に変更したため、従来からあった関連リンク集サイト「藤心ステーション」の名称を「ポートフォリオ」というページ名に変更・統一して、広く、お客様に認知して頂けたら思い、そのような名称変更をしてみました。

「藤心ステーション」は、ブログ形式で藤心が公開している9サイトの更新履歴や関連ニュースを紹介している専用サイトとなっています。また「ポートフォリオ」のページ名で紹介しているページは、その9サイトの全てのナビゲーションメニューに存在する関連リンク集です。内容的には9サイトのどのサイトを見ても同じ内容となります。

その9サイトの概略紹介を、当ページで補足説明しておきますが、その内容はついては、今後の筆者の制作活動如何で変化して行くものと、ご認識頂けたら幸いです。現時点での9サイトの概略は以下のようになっております。

№サイト名称概略説明作成
順序
使用テンプレートHP
タイプ
F1藤心WordPress塾e工房フジサキが運営管理するWordPress塾のPRサイトです4

Twenty NineteenLP
F2藤心SWELL道場脱Elementorで有料テーマSWELLで作成したSWELL道場です7SWELLLP
F3That's Elementor !
Elementorユーザーを支援するサポート専用サイトです3
GeneratePressGM
F4WP試作見本サイトWordPressとElementorで作成する試作見本サイトです5LightHouseGM
F5藤心ステーション藤心関連9サイトの更新履歴と関連ニュースを一括発信
するブログ専用サイトです
6SWELLBlog
F6一般企業見本LightningWPテーマ「Lightning」を使った一般企業見本サイトです8
Lightning見本
F7e工房フジサキWordPress制作代行の公式サイト「e工房フジサキ」です
1
賢威8.0GM
F8藤心My JukeboxYouTube動画をブログスタイルで情報発信している管理者
の趣味サイトです
2
SWELLBlog
F9開発実績一覧紹介e工房フジサキが制作した過去から現在までの開発実績を
一覧形式で閲覧する紹介サイトです
9Lighthouse制作実績

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

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

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

Elementorだからできる部品(パーツ)のカスタマイズと再利用

Elementorのウジェット操作は、部品(パーツ)をドラッグ&ドロップしてページ領域に貼り付けて、ページを作成して行くのが基本の操作になります。そして諸々のパーツを組み合わせて新たなパーツを作成して、Elementorのライブラリーに登録する機能があります。
登録したパーツは、ページ編集の際に、ライブラリーから呼び出して再利用することができます。

当方の公開サイトで、以下の2サイトは
全て「賢威」テーマを使用してサイトを
構築しています。

賢威8.0スタンダート
賢威7.0スタンダート

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

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

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

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

これからの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のEssential Addonsの拡張機能です。

自分で更新できる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スキルを取得できます。

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

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

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

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

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

Elementor VS ブロックエディタ

該当サイトは、元々、全ページ Elementor でページ編集した見本サイトでした。
ある時から(脱Elementorを志向し始めたことを契機に)せめて1ページだけでもGurtenbergで作成したページがあっても良いのではないかと思い、Elementorのトップページをコピー元として、新たに同じイメージのトップページをブロックエディタで作成してみました。

Elementorでのトップページ
Gurtenbergでのトップページ

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

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

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

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