e工房フジサキWP制作代行

WP維持更新制作代行

開発実績一覧紹介

投稿者: test

藤心9サイトのポートフォリオとは?

藤心9サイトのポートフォリオとは?

左記の3行3列の画像ボックスで表現される画像イメージは、藤心の9サイトに共通する各サイトのポートフォリオそのものです。

9個の公式サイトの一番目(最上段最左端)が「藤心WordPress塾」を意味し、9番目(最下段最右端)が「開発実績一覧」を意味します。

そして9個の画像ボックスの何れかをクリックすると、以前は各サイトのトップページにリンクするイメージだったのですが、今回、そのリンク仕様を変更しました。

即ち、トップページへのリンクから、各ページの「当サイトについて」というサイトの概要を紹介する下層ページへのリンクにリンク先を変更しました。

その方が、サイトの「ポートフォリオ」という意味で単なるトップページへのリンクより、各ページの紹介(下記内容)の方が、より相応しいと思ったからです。

各ページの紹介内容での共通項目

①使用しているWPテーマ
②実装しているノーコードツール
③トップページの仕様イメージ

 
Elementor VS Gutenberg with Lightningテーマ

Elementor VS Gutenberg with Lightningテーマ

Elementor使用のLightning

脱ElementorのLightning

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

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

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

フルワイド・ブロックで背景色付きの見出し設定とは?

フルワイド・ブロックで背景色付きの見出し設定とは?

フルワイド・ブロックを使用した見出し設定には、通常は背景画像を使うケースが主流ですが、画像ではなくて背景色を使う場合もあると思います。今回は、見出し設定に単なる背景色を使った事例を紹介します。
尚、背景画像を使う場合に、背景固定というオプションを良く使いますが、背景画像でなくて背景色設定の場合は、背景固定というオプションは機能しませんので要注意です。

SWELLのFAQブロックとは、所謂、「良くある質問」ページです。

SWELLのFAQブロックとは、所謂、「良くある質問」ページです。

Elementorの「良くある質問」

SWELLのFAQブロック

SWELLのFAQブロックは、Webサイトの「良くある質問と回答」ページに相当するページを編集する時に使用されるブロックになります。

上記の左側ページが、Elementorで編集した「良くある質問」ページです。
右側ページがSWELLのFAQブロックで編集した「良くある質問」ページになります。
SWELLのFAQブロックの方が多彩なデザインでバリエーション豊かな表現になっていると思います。

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

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

制作代行の流れ(SWELL)

制作代行の流れ(Elementor)

SWELLのステップ・ブロックとは、物の流れや操作手順などを表す表現方法の場で良く使われる機能をブロックにしたものです。上記の左側がSWELLの専用ブロック「ステップ」を実装したページです。

右側は、Elementorで作成したSWELLのステップと同等な「処理の流れ」的な表現例ですが、ElementorにはSWELLのような専用ブロック(ウジェト)はありません。

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

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

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

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

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

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

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

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

SWELLで作成したフルワイドの実装例

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

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

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

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

PC周辺機器収納ボックスの作成

PC周辺機器収納ボックスの作成

PCに接続する周辺機器には、ルータやLANポートSWハブやDVDドライブや外付けHD等の諸々の機器があります。いざPCに接続するとなるとノートPCの周りのディスク上は、それらの機器を重ねて乱雑において一目で整理されていない状態を醸し出しています。何とかせねばと前々から思いつつ現在に至っておりました。

コロナのせいで自宅に引き籠もる状態が長く続いていたところ、思い切ってその表題の収納ボックスを作成することになりました。なるべく安く手作りして作成することにしました。その経過を記録に残す意味でサイトに経過写真等を残すことにしました。

SWELLを購入してSWELLサイトを作成

SWELLを購入してSWELLサイトを作成

巷では、WordPressの世界に新しいWPテーマ「SWELL」が公開され、その機能とデザイン性の豊かさでユーザーを魅了しているみたいです。タメぐち為五郎もミーハー気分で評判のSWELLを購入してみました。
どうなることやら、これから先が思いやれるが、購入したからには、やるしかないとの思いで早速HP作りに取り掛かることにしました。