SWELLのフルワイド・ブロック VS カバー・ブロック

SWELLで作成したフルワイド・ブロックの実装例

Lighthouseで作成したカバー・ブロックの実装例

上記の2ツのサイトの共通点は、背景固定画像を所どころに配した一見するとLPページにも見える今流行りのWordPressページになっていると思います。ただ違うところは実装しているWPテーマだけです。

左側のページは、SWELLで作成した「藤心Online SWELL道場」のトップページです。
右側のページは、サイト全体をElementorで作成した「WP試作見本サイト」の中で、唯一Elementorを使用せずGutenbergで作成したページとなっているところです。

SWELLでのトップページでは、フルワイド・ブロックで背景固定画像を実装し、Gutenbergページでは、カバー・ブロックで同じような機能を実装していることになります。

「左からFade In Left」、「右からFade In Right」

Elementorに「Motion Effects」という機能が大幅に改善されて新しく登場しました。それまでは「開始アニメーション」という名前で既にあった機能ですが、つい最近のアップグレードで「Motion Effects」とい言う名前で再登場した次第です。

そもそも「Motion Effects」とは、画面スクロールの際に表示されるコンテンツの動きを制御する機能です。筆者は、その「Motion Effects」の中の「Fade In xxxxx」なる機能を多用しています。

「Fade  In Left」は、コンテンツを画面左からセンターへ、
「Fade In Right」は、コンテンツを画面右からセンターへ、
この場合のコンテンツとは、2列の段組自身を意味しています。「百聞は一見にしかず」です。先ずは見て下さい。

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

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

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

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

LPサイトを作るなら Tweny Seventeen が最適かも?

WordPressの公式テーマは、2017年度から1カラムのLP仕様に特化して現在のWPテーマに至っています。その共通する仕様は、スマフォを意識したLP仕様と言えます。本日は、その原点となったTwenty Seventeen の仕様を解剖してWordPress初心者向けに解説してみました。

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

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

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

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

カラム編集で画像を垂直方向に整列

左のサイトは、WordPressテーマ:Astraの初心者用に作られたスターターテンプレート「Online Health Coach」で作成された見本ページです。

そのトップページの最下段の見出し「Happy Faces of Happy Students」にある以降の画像に目が釘ずけになりました。4段の段組での画像表現は、どのように作成したのか?

Elementor操作を教えることに特化した塾です。

e工房フジサキは、WordPressのプラグイン「Elementor」を個人レッスンを通じてレクチャーして行くこと。即ち、「Elementor」の普及活動を、最大で且つ最終目標とした活動を続けて行けたら幸いと考えております。

製品納入後の個人レッスンは、ZoomやGoogle Meet等を導入したオンライン・リモート会議形式で開催し、Elementorの操作方法をレクチャー致します。以前の面談形式のレッスンではなくて、ユーザー様と一対一のレッスンですので、感染症リスクの不安も心配無用、安心してWordPressスキルを取得できます。

フリップ・ボックスとは?

フリップ・ボックスとは、オンマウスすると画像が反転したり、拡大したりするElementorのEssential Addonsの拡張機能です。 画像にオンマウスしてみれば、すぐ分かります。その画像反転も左右で反転するケース、上下で反転するケースといろいる有るみたいです。 機能は分かりましたけど、何に使えるのかイマイチよく分かりません。ただそれだけと言った感じですね。

WordPressの導入をサポートする藤心WordPress塾

藤心WordPress塾は、新しいプラグイン ELEMENTOR によるページ編集を全面的に導入し、WordPress 初心者にも易しく丁寧に WordPress の楽しさと素晴らしさを、レクチャーすることをモットーとして活動しております。

2種類のアイコンで作る新ポートフォリオです。

藤心のWebアイコンには、大きく分けて2種類のアイコンが存在します。
一つ目は、Webページより自動的にアイコンを作成してくれる「SnapCrab」という画像ソフトで作成できるアイコンです。
もう一つは、「SnapCrab」よりはちょっと難しくなりますが、「簡単バナー」と言う画像ツールで作成するアイコンです。

「SnapCrab」で作るアイコンは、Webページさえできていれば、そのページより自動的に画像アイコンを作成してくれますが、「簡単バナー」ではアイコンの背景色やアイコン上のテキスト文字や文字の位置や文字サイズ等など、全てがユーザーの責任で作成する必要があります。

「簡単バナー」は「SnapCrab」のような自動的にアイコンを作成できない分、「SnapCrab」よりは難しくなります。その分、画像作成の自由度は「SnapCrab」以上にあります。

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

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

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

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

藤心のランディングページ(By Sydney)とは?

Sydney/Plumber
Sydney/Shop
Sydney/Photografy

上記の3サイトは、全てWordPressテーマのSydneyで作成した見本ページです。Sydneyには、テーマをインストールした後、初心者用にスターターサイトと言うデモページが沢山用意されています。但し、デモページの殆どが有料版ですが、今回、無料で使える上記の3例を紹介します。

デモサイトの共通するイメージはランディングページ(LP)となっています。LPというと一般的にイラストレーター等で作成したイラスト満載の縦長ページをイメージされますが、筆者の考えるLPは脱イラストのLPを志向しており、今回の見本例が正に脱イラストLPと言えます。

有料・無料に拘わらず、デモページは全て英語版となっていますので、今回の公開では、日本語化にも試みてみました。

将来性、拡張性、10年先にも存在するWordPress

藤心のWordPress塾は、個人レッスン付き制作代行プログラムです。QHM/HAIKは、旧メーカー(北研)が見捨てた絶滅危惧種の古いシステムです。QHM/HAIK⇒WordPressへの移行をご検討中のユーザー様、是非、この機会に当方がお薦めする移行プログラムに便乗してみては如何でしょうか?

製品納入後の個人レッスンは、ZoomやGoogle Meet等を導入したオンライン・リモート会議形式で開催し、Elementorの操作方法をレクチャー致します。以前の面談形式のレッスンではなくて、ユーザー様と一対一のレッスンですので、感染症リスクの不安も心配無用、安心してWordPressスキルを取得できます。

ELEMENTORのアコーディオンでよくある質問ページを実装

WordPressのELEMENTORのアコーディオンで、いわゆる「よくある質問」のFAQを一覧表でまとめたページを紹介します。このようなFAQを作成するのに最適な機能がアコーディオン実装になります。

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

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

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

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

Elementor やGutenbergは、WordPressのノーコード・ツールと言えます。

今現在、Webの世界でノーコード・ツールが話題となっています。

例えば、日本産の STUDIO 等の話題がYouTubeのコンテンツとして、毎日、ネットを騒がしています。筆者も遅ればせながら、ノーコード・ツールの内容や機能を知る必要にかられてネット検索して来ました。

そして調べてみた感じでは、WordPress環境下でも、既にノーコード・ツールが存在することが分かりました。それは、Elementorであり、或いはブロック・エディターのGutenbergも一種のノーコード・ツールなのです。

本日は、そのWordPress下でのノーコード・ツール Elementor や Gutenberg と STUDIO 等の本来のノーコード・ツールとの違いについて言及してみます。

そのSTUDIOは、WordPressのような全て無料というわけには行きません。使用にあたって会員登録後に、980円~4980円の月額使用料が掛かります。それが Elementor だと全て無料です。

・無料の WordPress を実装した上に、
・無料のノーコード・ツールを実装し、
・無料のWordPressテーマを実装する。