富田林市ホームページ作成でのWordPressやfigmaのあれこれ

2025 4/06

2025年4月3日 2025年4月6日

WordPressのプラグイン

今回はホームページ作成のご質問での授業内容です。

カタカナばかりで分からないことを書いていると思われるかもしれません…。

その際はお気になさらず「こんな授業もしてるんだなあ」と思ってそっと画面をお閉じ下さい…。

VK Blocks

上記画像はいちえパソコン家庭教師の中嶋が制作したホームページの一部です。

生徒様より、画像を左右のスライダーでかつジグザグに表示するにはどうしたらよいかご質問があったので見本に作成いたしました。

WordPressのプラグインのVK Blocksのスライダーを利用してカルーセル表示となっています。

また、上下でジグザグ表示になるように、外観→カスタマイズ→追加CSSに以下のCSSを入れています。

プラグインのVK Blocksのスライダーに設定するCSS

.zigzag .swiper-wrapper .vk_slider_item {
    padding-bottom: 100px !important;
    transition: padding-bottom 0.5s ease-out;
}

.zigzag .swiper-wrapper .vk_slider_item.swiper-slide-prev,
.zigzag .swiper-wrapper .vk_slider_item.swiper-slide-next,
.zigzag .swiper-wrapper .vk_slider_item.swiper-slide-next + .vk_slider_item + .vk_slider_item {
    padding-bottom: 0 !important;
}
.swiper-pagination{
	display:none;
}
.swiper-button-next{
	display:none;
}
.swiper-button-prev{
	display:none;
}

左右の矢印ボタンや下部のスライド切り替えボタンは非表示にしています。

Contact Form7のカスタマイズ

WordPressのお問い合わせフォームを作成するためのプラグインである、Contact Form7のレイアウトを整える方法です。

お問合せフォームのHTML

コンタクトフォームの編集内の、フォームタグの内容です。

<label> 氏名<span class="required-form">必須</span>
    [text* your-name autocomplete:name] </label>

<label> メールアドレス<span class="required-form">必須</span>
    [email* your-email autocomplete:email] </label>

<label> 電話番号
[tel tel-511]</label>

<label> 内容
    [textarea your-message] </label>

<div class="submitbtn-cf7">[submit "入力内容を送信する"]</div>

お問合せフォームのCSS

外観→カスタマイズ→追加CSSに以下のCSSを入れています。

/* お問い合わせフォーム 横幅 */
div.wpcf7 input[name="your-name"],
div.wpcf7 input[name="your-email"],
div.wpcf7 input[name="tel-511"],
div.wpcf7 textarea[name="your-message"] {
	width: 100%;
	background-color: #f5f7ff;
	margin-bottom:2em;
}
/*必須*/
.required-form{
	background-color:#11a1f4;
	color:#fff;
	font-size:0.8em;
	margin:0 0.5em;
	padding:0 0.2em;
}
/*送信ボタン*/
.submitbtn-cf7{
	text-align: center;
}
.disable{
	pointer-events: none;
	background:#471a04 !important;
}
input[type='submit'] {
-webkit-appearance: none; /*iPhoneでCSSが無効になるのを防ぐ*/
    width: 100%;
    max-width: 250px;
    background: #11a1f4;
    border: none;
    color: #fff;
    padding: 15px 0;
    font-weight: bold;
    font-size: 120%;
	  margin-top:20px;
}
input[type='submit']:hover {
    background: #294fbf;
    transition: all .5s ease; /*変化する時間（0.5秒）*/
}
div.wpcf7 .ajax-loader { /*送信ボタンの右につく余白を消す*/
    display: none !important;
}
div.wpcf7 .wpcf7-spinner {
    display: block;
}

Highlighting Code Block

また、上記のCSSを表記するために、WordPressのプラグインのHighlighting Code Blockを使用しています。このホームページで使用しているSWELLテーマを作成された方が作ったプラグインということでSWELLと相性が良いとのことです。

FigmaのWebデザインをWordPressに利用する方法

Figmaでデザインされたホームページを、WordPressでできるだけ簡単に利用したいとのご質問がありました。

レッスンでは、Figma to Code・Figma To WordPress Block・Fignelなどを試しました。

Elementor用テーマに切り替えて、Elementorプラグインを入れそちらにコピーしたり等もいたしました。

しかし、全て一長一短で、完全なWebレイアウト再現はされないため、SWELLテーマで実装していくことが一番の近道かなということで落ち着きました。

以下は生徒様に参考にとお送りした分です。

1. 日本人向けのデザインテーマ

日本語サイトに適したテーマ
- Cocoon：無料でシンプル、カスタマイズ性に優れる
- SWELL：有料で洗練されたデザイン
- Lightning：無料でビジネスサイト向け
デザインの自由度が高いテーマ
- Arkhe（アルケー）：SWELLの作者による、軽量＆自由度高い
- Xeory（セオリー）：ブログや企業サイト向け

2. Figmaデザイン再現に使える専用ツール

（①）ブロック編集強化ツール

VK Blocks：Lightningとの相性が良く装飾パーツが豊富
Kadence Blocks：自由なレイアウト調整が可能
Snow Monkey Blocks：日本語対応でデザイン性も高い

（②）ドラッグ＆ドロップ配置ツール

Elementor：直感的操作でレイアウト作成が容易（最近は【Figma to Elementor Converter】の登場で、直接変換が可能に）
WordPress公式サイトエディター（Gutenberg）：ブロックで自由に編集

（③）HTML/CSS活用ツール

Simple Custom CSS：管理画面から手軽にCSS追加
Custom HTML Block：HTMLを直接編集可能

3. FigmaデザインのWordPress取り込み用プラグイン・ツール

Figma内でコード生成するツール

Figma to Code：Figma内でHTML、CSS、React、Vueコードを生成（WordPressへはHTML編集が必要）
Locofy.ai：FigmaデザインをHTML/CSSやReactに変換し、カスタムページで活用可能

WordPressプラグイン

Elementor + Figma：Elementor Proを利用してFigmaデザインを参考にレイアウト調整（直接インポートは不可）
WPBakery Page Builder：ドラッグ＆ドロップでFigmaデザインを再現
Kadence Blocks：WordPressのブロックエディターで再現しやすい

最近注目のプラグイン

Figma to Elementor Converter
→ Figmaデザインを直接Elementorのウィジェットやレイアウトに変換。コーディング不要で再現可能（β版の場合あり）。
Anima
→ FigmaデザインをHTML/CSSにエクスポートし、Elementor内のカスタムHTMLブロックで活用。
UiChemy
→ FigmaのデザインをJSON形式でエクスポートし、Elementor、Gutenberg、Bricksで編集可能に変換。

どの方法を選ぶべきか？

コーディングなしで簡単に作りたい：Elementor（またはFigma to Elementor Converter / WPBakery Page Builder）
Figmaのデザインを忠実に再現したい：Figma to Code / Locofy.ai、またはHTML/CSSでの調整
WordPressのブロックエディターで自由に調整したい：Kadence Blocks

まずは、日本語サイト向けのテーマを選び、目的に合わせたツールやプラグインを組み合わせるのが効率的です。

画像の背景に上下ツートンの色をつける

ホームページのフッターの右上にはみ出てボタンを配置するための設定です。

WordPress固定ページ最下部に、画像ブロックを追加し、画像ブロックに追加CSSクラスとして、img-wrapperをつけて行いました。

画像のHTML

実際はもっと複雑になっていますが、簡潔に表記した分です。

  <div class="img-wrapper">
    <img src="○○○.png" alt="画像">
  </div>

画像の親要素のdivタグのCSS

外観→カスタマイズ→追加CSSに以下のCSSを入れています。

/*上下色ツートン設定*/
.img-wrapper {
  width: 100vw;
  margin-left: calc(-50vw + 50%);/*横幅画面いっぱいに*/
  background: linear-gradient(to bottom, #052B73 0% 50%, #ffffff 50% 100%);
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;       /* 縦中央 */
  justify-content: flex-end; /* 横右寄せ */
  transition: opacity 0.2s;
}