2024年– date –
-
デザインテーマ
グリッド・レイアウトを実装したトップページ3例
Elementorユーザー支援(アイコンボックス) WordPress試作見本(画像ボックス) 藤心関連最新ニュース(サムネイル画像) 上記3例の共通仕様は、トップページでグリッド・レイアウトを実装したサイトになっていることです。グリッド・レイアウトとは、ペ... -
ポスト・グリッド
グリッド・レイアウトは、究極のスマフォ対応(レスポンシブ)
That's Elmentor! 試作見本サイト e工房フジサキ 開発実績一覧紹介 上記4例の共通仕様は、トップページでグリッド・レイアウトを実装したサイトになっていることです。グリッド・レイアウトとは、ページを複数のカラム(段組)で分割して、各カラムにアイ... -
プラグイン
サイトマップを作成して公開しました。
サイトマップを作成するプラグインとして「PS Auto Sitemap」が有名ですが、所謂、プラグイン「Google XLM Sitemaps」は Googleサーチコンソールに設定するサイトマップで、「PS Auto Sitemap」とは区別して使用しなければなりません。 今回、その「PS Aut... -
アイコンボックス
アイコンボックスと画像ボックスを1ページに収めてみました。
過日のアイコンボックスに続いて、Elementorのセットウジェットの一つに「画像ボックス」があります。 「画像ボックス」は、「画像」+「見出し」+「テキスト文書」の3つのウジェットをまとめて設定できるセットウジェットです。 今回、「Lighthouseで作... -
SWELL
SWELLのフルワイド・ブロック VS カバー・ブロック
https://fujisaki.xyz/ SWELLで作成したフルワイドの実装例 Lighthouseで作成したカバーブロックの実装例 上記の2ツのサイトの共通点は、背景固定画像を所どころに配した一見するとLPページにも見える今流行りのWordPressページになっていると思います。た... -
デザインテーマ
Twenty Nineteen + Elementor で作るWordPress塾PRページ
藤心WordPress塾のPRページは、WordPressの公式テーマTwenty Nineteenで作られています。公式テーマTwenty Nineteenは、完全にスマフォ対応のレスポンシブデザインを踏襲しております。 そのデザイン的な特徴を以下に纏めてみました。 サイドバーが存在し... -
見本ページ
WordPress試作見本ページを大幅に刷新しました。
HAIK⇒WordPressに移行してから、暫く放っておいていた「WordPress試作見本サイト」ですが、今回、コンテンツの充実を図り、トップページの大幅な刷新を試みました。 そのトップページは、3列7行のグリットレイアウト形式のコンテンツメニューとなり、一... -
段組
垂直整列画像にモーション効果を設定してみました
左のサイトは、WordPressテーマ:Astraの初心者用に作られたスターターテンプレート「Online Health Coach」で作成された見本ページです。 そのトップページの最下段の見出し「Happy Faces of Happy Students」にある以降の画像に目が釘ずけになりました。... -
アコーディオン
「イメージ・アコーディオン」の事例紹介です。
What is this? ⇒ これは「イメージ・アコーディオン」の事例です。 上記のウジェットは、Elementorの必須アドオン29種の一つ「イメージ・アコーディオン」の事例紹介になります。 従来のアコーディオンは、テキスト文をクリックして開かれる下層のテキス... -
画像編集
CSSで画像を円形に切り抜く
画像を円形にトリミングするには、通常はイラストレータ等の画像編集ツールを使って、予め画像加工した後、HPにアップロードするのが普通のやり方です。本日は、CSSとHTMLで直接画面に貼り付ける方法がありますので紹介します。 詳細はコチラです。 Elemen... -
Motion Effects
「左からFade In Left」、「右からFade In Right」
Elementorに「Motion Effects」という機能が大幅に改善されて新しく登場しました。それまでは「開始アニメーション」という名前で既にあった機能ですが、つい最近のアップグレードで「Motion Effects」とい言う名前で再登場した次第です。 そもそも「Motio... -
見本ページ
Elementorの無料テンプレートで作るテンプレー紹介ページです。
Elementorには、現段階で31種の無料テンプレートがあります。筆者の場合の無料テンプレートの利用方法は、テンプレートを見ることで、Elementorのウジェット機能の大凡が分かるようになります。 例えば、気になるウジェットがあれば、そのテンプレートを自...
