WordPressのテーマを自作するときにFimgaを使いたい | AIを使って生産性向上を目指すクリエイターM
AmebaAmeba 20th Anniv.ホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

AIを使って生産性向上を目指すクリエイターM

ツインレイと出会い人生V字回復を目指しています。
ココナラを通じてWordPressの復旧作業を多数請負った実績ありIT系の仕事をしたいという夢を叶えています。
法人化できるように活動しています。

WordPressのテーマを自作するときにFimgaを使いたい

AmebaのオウンドメディアのAmeba Owndを使っていますが、2024年4月15日からベーシックプランの仕様が変わり、無料では独自ドメインの接続ができなくなります。

 

 

 

そのため私がAmeba Owndで運用しているドメインを自分が契約しているサーバーに付け替えて、WordPressでウェブサイトを作ろうとしています。

その中で、Fimgaを使ってデザインしてみようと思い、調べていました。

 

Fimgaの無料のプラグインを使うと、簡単にデザインをWordPressに反映できることが分かりました。

 

 

 

WordPressのプラグインで、Elementorがあります。

このElementorを使ってWordPressのページ、デザインを作りときに、Fimgaのプラグインの

Figma to Elementorを使うと簡単に、Fimgaで作ったデザインをWordPressに反映できます。

 

 

 

 

またWordPressのHTMLウィジットを使って、デザインを反映させるときは、こちらのプラグインがお勧めします。

Figma To WordPress Block

 

 

こちらの画像が、Figmaの画面です。

WordPressに設定した画面は、こちらです。

 

 

こちらの記事が、とても参考になります。

 

 

ただレスポンシブデザインで本格的にWordPressのテーマを自作する場合は、Figmaの開発モードを使えるように、有料プランを使うのがよさそうです。

プラグインを使うとHTMLやCSSを出力できますが、こちらも有料のプラグインを利用することになります。

そのため、Figmaの開発モードを使ってVS CODEにコードを送って更にコードを書くのが生産性の向上につながると思いました。

 

Figmaの有料プランの支払いは、年払いのみのようですが、プロフェッショナルのプランは、月額2250円で利用できるようです。

私も早く2250円支払って本格的に、WordPressのテーマを自作できるようになりたいと思っています。

 

それから今回無料で使えると思って紹介したプラグインのFigma To WordPress Blockですが、無料で使える回数に制限がありました。

やはり仕事で使う場合は、ちゃんと料金を支払わないといけないようです。

 

私も活用しているSTUDIOですが、Figmaから簡単にデザインを反映できるプラグインがありました。

 

 

 

それからFigmaでレスポンシブデザインを行う場合は、こちらの記事も参考になると思います。

 

 

 

それから図形にシャドー影を付ける方法は、こちらの記事が、参考になります。

 

 

私は本を買って勉強することができないので、こうしてネット検索して勉強しています。

今日YouTubeに、動画を公開しました。

 

 

 

ノートに手書きで書いていくと覚えることができますが、最近は、キーボードでnotionに書いて記録して勉強しているせいか直ぐに忘れてしまうことがあります。

そのため勉強したことをブログに書いたり、動画にまとめたりして、勉強したことを記録して自分の備忘録のような使い方もできるようにしたいと思っています。