オンラインで参加しました！

2025/7/8（火）にオンラインで開催されたWordPress meet up〜 ブロックテーマ触ってみる会 〜に参加しました。このMeetupは、WordPressのブロックテーマに興味のある方々が集まり、実際に触ってみたり、情報を共有したりする会です。
今回は静岡＆新潟地域Meetupがコラボした形で開催されました。新潟の主催者はコスギ＠Microsoft Clarity 研究所(U･ω･U)さん。はっきりした進行が好感持てます。静岡の主催者さんは、いつもWordPressといえばX(Twitter)でお見かけするたぬき@WordPressおじさんさんでした。

今回は「ブロックテーマ」がテーマ。ブロックテーマは気になりつつも少しだけしか手をつけていないので、結局どこまでできるのか、実際の詳しい使い方などを知りたいと思い参加しました。

開催報告はこちらです↓

静岡 &新潟 WordPress Meetup Online 〜 ブロックテーマ触ってみる会 〜
https://www.meetup.com/ja-JP/shizuoka-wordpress-meetup/events/308325567/

ブロックテーマって何？

WordPress 5.9以降、登場した「ブロックテーマ」は、従来のテーマとは違い、サイト全体をブロックで構成できるという新しいスタイルのテーマです。

「フルサイト編集（FSE）」と呼ばれるこの仕組みでは、ヘッダーやフッターなどもブロックで自由に編集できるのが特徴。

とはいえ、PHPで記述するクラシックテーマに慣れている方や、カスタマイズの方法がよく分からないという方も多いのではないでしょうか？（わたしもその一人です）

meet upの概要

内容はコスギさんがXで的確にまとめて下さいました。

unitoneが気になる

これから自分ががっつり最初からブロックテーマで構築するかというと…おそらくそうではなく既存のテーマを使って作るパターンだろうなあと思っています。

理由としては、

参加のみなさまは「unitone」テーマを推していました。

unitoneとは
Snow Monkey開発者のキタジマさんが開発したブロックテーマに対応したWordPressテーマ。

ブロックパターンがたくさんあること、またワイヤーをいきなり書ける「ワイヤーフレームジェネレーター」がすごいよ！とのことでしたので、今後使ってみたいと思います。

まとめ

デザインが来て→コーディングをする、という制作フローだとブロックテーマは難しいようです。デザイナーがブロックで何ができるか理解してからデザインを作れると良いようですが、それができる人は少なそうです。まずは色々試してどのデザインができるか自分が理解してみようと思います。

次回のMeetupにもぜひ参加してみたいです！

登録されてないSVGアイコンを使いたい時のやり方です

WordPressテーマ「SWELL」や「Arkhe」は人気の高いテーマです。このポートフォリオサイトでも「SWELL」を使用しています。

今回は、「SWELL」や「Arkhe」のテーマに未登録のSVGアイコンを登録する手順を初心者にもわかりやすく解説します。

登録済みのアイコンの使い方

「SWELL」や「Arkhe」のテーマでは、投稿記事中に「ブロックツールバー」上の笑顔アイコンからあらかじめ登録されたアイコンを呼び出せます。この機能、とても便利です！

よく使うSNSアイコン

SNSアイコンを挿入したい時、下記のようなfacebook,Instagram,YouTubeなどのアイコンはあらかじめ登録されています。

なぜSVGアイコンを登録するの？

登録されていないアイコンを使用したい時、自分でSVGコードを入力して登録することができます。例えば、「Arkhe」にはX（旧Twitter）のアイコンの登録がありません。その場合、SVGタグを登録すれば使用することができます。

SVGアイコンを使う方法

STEP

Xの公式ブランドページから、svgコードをダウンロードします。

 Xブランドツールキットのページ

STEP

ダウンロードして解凍したフォルダの中の「logo.svg」をお使いのコードエディタで開いて、コピーしておきます。

STEP

svgコードを貼り付ける

<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
</svg>

このコードを「ブロックツールバー」の笑顔アイコンから表示されるポップアップ「アイコンを選択」画面の下部に貼り付けます（赤枠）。貼り付けたら「決定」ボタンを押します。

STEP

Xのアイコンが表示されました！

 

注意点

• SVGのコードは信頼できるソースから取得しましょう（セキュリティ上の理由）。
• 複雑なSVGはコードが長くなるので、必要に応じて整形・圧縮を。

まとめ

「Arkhe」や「SWELL」テーマでオリジナルSVGアイコンを登録して使う方法をご紹介しました。登録されてないご希望のアイコンで、ぜひ試してみてください！

オフラインでの参加はドキドキです

6/1（日）に横浜で開催されたWordPress meet upに参加しました。
オンラインで他のmeetupに参加したことはあるのですが、オフラインでは初参加でした。

参加の目的は、みなさんどんな感じでWordPressを使っているのか？新しい使い方や何をもっと深めていけば良いかとか、何かヒントがあるかなあと思ったことです。

開催報告はこちらです↓

2025年6月1日『横浜 WordPress Meetup交流会 #31』を開催しました

感想としては…ネットで調べるのと人と話すのは全然違う！当たり前ですが。すごい刺激がありました。その夜寝つけなくなったくらい。（普段人と話さないので…）

話ができた方は一部ですが、参加者はこんな感じ。

• フリーの開発の方
• アプリのデザイナー
• 趣味ブログをやってる方
• お仕事関係でWordPressのWebサイトを使っている方
• 副業でブログを始めた方
• 定年後にWordPressで仕事をしていきたい方

みなさん困っていることは

• 困った時にちょこっと相談できる人が欲しい
• 検索で上位表示するにはどうすれば良いか
• ネットじゃなくて実際の情報が欲しい

といったところでしょうか。

実は、若い人たちばっかりでウェーイな感じだったらどうしよう、と思ってたんですが、思ったより年齢層が高かったので、安心しました。長年使っている方も多いようです。

まとめ

とにかく長く使っているとサーバのPHPのバージョンだの、テーマがそれに対応しているかとかプラグインが対応しているかとか、メンテナンスがめんどくさいんだよな、と思います。色々自分でできるからこそですよね。

さあそれをどうやって生かすか？みたいな結論はまだこれからどうしようという感じです。

Googleからのメール

Google reCAPTCHAはこのまま使える？

2025年2月のある日、Googleからこんなメールが届きました。この記事では対応が必要になるかどうかのGoogleからのメールによる判断方法と乗り換えなどの方法について、お知らせします。

Google reCAPTCHA有料化

要約すると下記のようです。

reCAPTCHA評価数を確認して料金を予測

Yum-designのWEBサイトでは問い合わせフォームでreCAPTCHAを利用しています。

メールに「reCAPTCHA 評価数」が記載されていました。下記部分です。

このメールに記載されている「料金計算ツール」に回数を入力してみます。このWEBサイトでは回数が少ないので$0と出ました。今の時点ではこのWEBサイトは対策しなくても大丈夫のようです。

無料の代替ツール

検索してみると、無料の代替ツールもあるようです。
現時点では不要ですが、保守を請け負っているお客様のWEBサイトで必要になるかもと思い、試してみることに。

[Cloudflare Turnstile]というサービスが完全無料でアクセスは無制限で使えるようです。

まずはCloudflare Turnstileのキーを取得

STEP

Cloudflare公式サイトでアカウントを作成します。（googleアカウントやAppleアカウントで利用可能）

STEP

管理画面にログインできたら、左メニューから「Turnstile」を選びます

STEP

Add widgetボタンをポチ

STEP

widget nameのところに自分が何のツールかわかるような名前をつけてAdd Hostnamesをポチ

STEP

右からメニューが出てくるので、WEBサイトのドメイン名を入れて、Addボタンをポチ

STEP

Createボタンをポチ

STEP

Successfully….と出てきたら成功です。Site keyとSecret Keyをコピーしておきます。

Key設定用のWordPressのプラグインをインストール

STEP

WordPressのプラグイン「Simple Cloudflare Turnstile」をインストールして有効化します。

STEP

設定画面で先ほどコピーしておいたSite keyとSecret keyを入力します。

STEP

お問い合わせフォームで使用しているので、そのフォームを選択して「変更を保存」します。

Snow Monkey FormsはCloudflare Turnstile対象外

ここで、このWEBサイトで使用している「Snow Monkey Forms」はCloudflare Turnstileは使えないということに気づきました（泣）。Contact Form7やWPFormsなどは使えるようです。

Contact Form7で再度チャレンジ

STEP

「Simple Cloudflare Turnstile」の設定画面に戻り、Contact Form7の所にチェックをつけ「変更を保存」します

STEP

チェックボックスにチェックして、「成功しました!」表示が出るまで待ちます。表示されたら「応答テスト」をポチ

STEP

「成功!Turnstileは…」と表示されたら成功です

STEP

お問い合わせページではCLOUDFLAREのロゴと「成功しました！」のボックスが表示されます

まとめ

Google reCAPTCHAの代替手段として、Cloudflare Turnstileは制限を気にせず無料で利用できるのでオススメです。

フォームの送信ボタンの色を変えたい！

Yum-designのお問い合わせフォームでは、Snow Monkey FormsというWordPressのプラグインを使用しています（2024年8月現在）。

Snow Monkey Formsには確認画面・完了画面も、入力（１）ー確認（２）ー完了（３）のステップバーも付いていて、短時間でWordPressにフォームを導入したい場合、使い勝手が良いです。

が、標準でついている送信ボタンの見た目があまり目立たないので、cssを追加して変更してみました。

カスタマイズ後の見た目

変更後のデザインはこちらです。

cssの追加場所

WordPressテーマ「SWELL」では、カスタマイザーの中にcssを追加できる場所があります。

css追加のポイント

ブラウザの検証ツールでボタンのクラス名を確認します。

確認すると、送信ボタンに設定されているクラス名は「.smf-action .smf-button-control__control」ということがわかります。入力画面内の「確認画面へ」ボタンと確認画面の「戻る」ボタン・「送信する」ボタンの全てに同じクラス名がついています。

そのためクラス名だけで指定すると、それらのボタンが全て同じ色・デザインになってしまいます。「戻る」ボタンはあまり目立たせたくないため、デザインを変えたいところです。

【対応策】クラス名に属性を追加する

それぞれのボタンには属性（data-action）がついているので、属性と共にcssを指定します。

ボタンごとの属性はこちらです。

• 入力画面「確認画面へ」ボタンは[data-action=”confirm”]
• 確認画面「戻る」ボタンは[data-action=”back”]
• 確認画面「送信する」ボタンは[data-action=”complete”]

「確認画面へ」と「送信する」ボタンのcss

「確認画面へ」と「送信する」ボタンは同じデザインにしたいため、下記のように指定しました。
※色や形・paddingなど、WEBサイトのデザインに合わせてお好みのものを指定してください。

.smf-action .smf-button-control__control[data-action="confirm"],
.smf-action .smf-button-control__control[data-action="complete"] {
	background: rgb(0, 215, 183);
       background: linear-gradient(110deg, rgba(0, 215, 183, 1) 20%, rgba(0, 181, 215, 1) 100%);
	color:white;
	border-radius:30px;
	border:none;
	padding:10px 80px;
}

「戻る」ボタンのcss

戻るボタンは目立たなくするため、形は同じで色をグレーに、小さめサイズに指定しました。

.smf-action .smf-button-control__control[data-action="back"] {
	border-radius:30px;
	padding:10px 40px;
	margin-bottom:1em;
}

css追加後の表示

css追加後の表示はこのように、「戻る」ボタンが目立たず、「確認画面へ」と「送信する」ボタンが目立つ表示になりました。

実際の表示はこちらです。→Yum-designお問い合わせページ

「SWELL」内の追加cssで注意すること

最初追加cssが反映されず、困ったのですが、どうやら「SWELL」では追加css内にコメントを書くとエラーになるそうです。できれば備忘録としてどのパーツのcssかを書いておきたいのですが、仕方がないですね。

/* こんな風にコメントを入れるとエラーになる */

まとめ

標準で確認画面・完了画面やステップバーがついておすすめのSnow Monkey Formsですが、少しデザインをカスタマイズするとみやすい表示になって良いですね。

WordPressのテーマを変えました！

なぜテーマを変えたか

以前Yum-designのWEBサイトをリニューアルした際、WordPressのテーマをSnow Monkeyを使って作成しました。

Yum-design

ポートフォリオサイトをリニューアルしました ずっと後回しにしてきた自分のサイトのリニューアル。wordpressでやらないと…と思いつつ時間がどんどん過ぎ…

Snow Monkeyのテーマは1年間のサブスクリプション制です（2024年8月現在 16,500円/年）。最初は他の受託の仕事でも使えるなら良いかなと思っていたのですが、使う機会がないまま数年経過。自分のポートフォリオサイトのためだけに毎年支払いするほど使いこなせませんでした。

また、Snow Monkeyのカスタマイズには子テーマを作る方法ではなく、プラグインでのカスタマイズが推奨されています。また、フックを使う方法が多く、エンジニアではない私には慣れない方法で、いちいち時間がかかっていました。

そんな中お仕事でSWELLを使う機会があり、私の技術レベル（html/cssは得意だけどエンジニアではない）でのカスタマイズのしやすさと使いやすさを知り、自分のサイトでも使ってみることにしました。

SWELLの良いところ

SWELLを実際に使用してみて、良かったと思ったのはこんなところです。

このようなマーカーを引くこともできます。

カギカッコとか

方眼背景もあります。

SWELLのカスタマイザーでページの表示項目を設定できます

管理画面で登録済みのボタン・マーカーなど色や形状の変更が可能です

また、私は使いませんでしたが、他のテーマからSWELLに移行するにあたり、記事の表示崩れを一気に直してくれる「乗り換えサポートプラグイン」があるようです。乗り換えのテーマは、Cocoon、SANGO、JINなど複数あります。

SWELLでカスタマイズできなかった部分

こちらのWEBサイトはポートフォリオサイトなので、サイト型にカスタマイズしたのですが、できない部分もありました。制作実績をカスタム投稿タイプで作成しているのですが、アーカイブページのページヘッダーを、固定ページと同じように背景画像の上にタイトルテキストを設定する機能はカスタマイザーには付いていないようです。

フックを使えば背景画像を設定することはできました！

カスタム投稿アーカイブのページヘッダーはここ

フックをfunctions.phpに記載すると、コンテンツヘッダーに設定されている画像が表示されるようです。

カスタマイザーの「サイト全体設定」＞「コンテンツヘッダー」＞「タイトル背景用デフォルト画像」をから設定できると教えていただきました。

WordPressでテーマを移行する手順

テーマを移行する手順はこちらです。

参考：【WordPress】テーマ移行を確実に進めるための手順と注意点を解説！

この中でいちばん時間がかかったものが「6.修正」です。テーマに使われているブロックの表示崩れや、レイアウト変更、色の変更などまだこれから調整したい部分もあります。

Snow Monkey 用レイアウトで移行後にずれが発生

テーマを移行してみた感想

テーマだけだからすぐ終わるかと思いましたが、意外と時間がかかりました。自分のサイトなので、不具合は移行してから直せましたが、お客様のWEBサイトだとテスト環境でちゃんと直してから…となるともっと時間かかりますね。まだ変更したいところはあるので、徐々にやっていこうと思います。

エックスサーバー、便利です！

さくらのレンタルサーバでどうもWordPressの速度が出ないなあ…と思っていたところ、お仕事でエックスサーバーを使う機会があり、これは便利…！と思い、移行することにしました。

エックスサーバーの便利なところ

どんなところが便利かと言うと、

と、とにかく管理画面の使いやすさに今までの苦労はなんだったんだと思ったところです。

ページスピードはどうなったか

そして期待したページスピードの結果です。

モバイルでパフォーマンスが58→88になりました！ 

以前のページスピードを比べた記事はこちら↓

Yum-design

さくらのレンタルサーバで新サーバに移行してみました WordPressの速度向上を期待して！ 移行の目的 こちらのYum-designのwebサイトはさくらのレン…

実際の移行手順

サーバーを移行する前の私の前提条件はこちらです。

• 独自ドメインは移行しない。
• WordPressが1サイト。

ざっくりとした移行手順はこちらです。

1.現在のサーバ（さくら）でバックアップを取る。

何をおいてもまずはバックアップです。WordPressに入れているプラグインでバックアップを取ります。

2.（エックスサーバーで）ドメイン設定をする

今使っている独自ドメインをエックスサーバーで追加します。私の場合は「yum-design.net」を追加します。

参考：エックスサーバーのドメイン設定

3.（エックスサーバーで）SSL設定をする

エックスサーバーの管理画面からトークンファイルをダウンロードし、それを現在のサーバにアップロードしてから設定します。

参考：他社サーバーですでに運用中のサイトに対して無料独自SSLを事前に設定する

4.（エックスサーバーで）メールアカウントの追加

今使っているメールアカウントをエックスサーバーで追加します。

参考：エックスサーバーのメールアカウントの追加

5.（エックスサーバーで）データの移行

エックスサーバー管理画面にある「ワードプレス簡単移行」を使いました。

参考：WordPress簡単移行

6.（お使いのドメインサービスで）ネームサーバーの変更

ネームサーバーをさくらのものからエックスサーバーに変更します。数時間〜数日かかります。私の場合は2時間以内でした。

参考：
エックスサーバーでのネームサーバーの設定
ムームードメインのネームサーバーの設定

参考：サブディレクトリにインストールしたWordPressをドメイン直下にする手順

7.メールソフトの設定

最後にエックスサーバの設定をお使いのメールクライアントに設定して完了です。

参考：メールソフトの設定

サーバー引っ越し手順まとめ

サーバー移転について、動画付きでエックスサーバーに手順のまとめページがありましたのでこちらもどうぞ。

参考：サーバー移転手順

WordPressの速度向上を期待して！

移行の目的

こちらのYum-designのwebサイトはさくらのレンタルサーバを利用しています。
Xserverにしたこともあるのですが、お客様のサイトでさくらを使っているものがあるため、自分でも色々試すために継続利用しています。
webサイトをWordPressにしてから表示が遅いのでどうにかならないか、と思っていたので、速度向上を期待して、移行してみることにしました。

さくらのレンタルサーバの新サーバの詳しい情報はこちらです。

移行のための条件を確認

まず移行するための条件をクリアしているか確認しました。

下記ページの「あなたにおすすめの新サーバへの移行方法は？」の質問に順番に答えると移行するべきか？などが簡単にわかります。

主な移行条件はこちらです。

• PHP7以上
• MySQL5.7
• 2022年2月15日以前の契約

詳しい前提条件はこちらです。

自分の条件を確認するため、①サーバーコントロールパネルと②会員メニューにログインします。

①サーバーコントロールパネルにログインして、下記を確認します。

・PHPのバージョン
・MySQLのバージョン

②会員メニューにログインして「契約中のサービス一覧」から契約日を確認します。

条件はクリアしていたので、移行することにしました。
※順番に自動的に新サーバになるパターンもあるようですが、自分のは1年経っても移行していないようなので、自力で移行することにしました。

移行ツールの使用方法

さくらサーバで移行ツールがあるようなので、それを使います。

※移行中はWebサイト、メールの利用など、さくらのレンタルサーバ全ての機能が利用できなくなりますので、注意が必要です。

コントロールパネルの「サーバー情報」から「移行ツール」に進みます。

移行後の表示速度

モバイルの表示速度を移行前と移行後で比べてみます。

結果：サーバの応答時間は速くなりました！

パフォーマンス：43→58
サーバの応答時間：3.08s→0.66s

と改善されました！良かった！

まだまだ他の点で表示速度の改善が必要ですが、ひとまずサーバについては少し改善ができたようです。

アーカイブの中で役に立ちそうなものを紹介します

2022年9月16日（金）に開催されたcss niteのオンラインセミナー、当日参加できなかったのでアーカイブを 見させていただきました。

4つのセッション

下記の4つのセッションがありました。

• サイト高速化入門 ページ表示速度の計測とフォントのサブセット化
• Next.jsで始めるモダンウェブ制作
• WAI-ARIAから学ぶHTMLが面白くなる話
• dialog要素でつくるモーダルダイアログ

この中でも私の実際の業務ですぐに使えそうな「高速化入門」と「dialog要素でつくるモーダル」について詳しく見ていきます。

サイト高速化入門

スマホの閲覧数の方が多くなってから、高速化についてちょこちょこは対応していました。このサイトも特にWordPress化してから表示が遅くなっていることが気になっていました。きちんと体型的に何をやれば良いかは整理されていなかったので、とても参考になりました。

こちらのセッションでは高速化のために、大きくは「PageSpeed Insights」の見方と「フォントのサブセット化」の２つについて解説されていました。「PageSpeed Insights」について、pcとスマホのそれぞれの点数やその下の要因をチラッと見るくらいでしたが、詳しい見方を教えていただいて、全然見ていなかった部分を知ることができました。

dialog要素でつくるモーダルダイアログ

jsを直接書いたりするのが苦手な私は、今までモーダル画面をコーディングする時は大体jQueryを使っていました。<dialog>という要素を使うとモーダルが作れるようです！ポイントとしては、重なりを一番前にできること。z-indexでいくら数値を大きくしても<dialog>の方が一番手前に来てくれるようです。

もっと詳しい内容が知りたい方は、css niteCoder’s High 2022 (Part 1)のアーカイブはこちらからも見ることができます。（有料note）

最近セミナーなどに参加してなかったのですが、時々情報収集のために参加した方が良いですね。オンラインで自分の都合良い時に倍速で見れるようになって、とても助かります。

フォームでエラー発生！困った時の対応です

Yum-designサイト内のお問い合わせページで、確認画面から先に進めないエラーが発生していました。
日々に紛れて気づくのが遅くなってしまいました。
お問い合わせしようと入力していただいた方がいらっしゃいましたら、大変申し訳ございません…！

pcからお問い合わせページのフォームに入力し、「確認画面へ」のボタンを押すと
「無効なアクセスです。」という文字が表示されて、そこから先へ進めない状態になっていました。

スマホで確認したところ、スマホでは問題なくフォーム入力→確認画面→完了へと進みました。問題はpcのみ。

こちらのサイトのお問い合わせフォームは「Snow Monkey Forms」というWordPressのプラグインを使用して作成しています。
初期の使用テーマ「Snow Monkey」と同じ作者なので相性が良いかと思ったこと、また設置も簡単なことからこちらを利用させていただいています。

まずはフォーラムで同じ事象が起きているかどうか検索。何件か出てきましたが、微妙に現象が違うようです。

そこでプラグインのアップデートをしたところ、確認画面→完了画面へと進むことができました！

定期的にフォームに入力して状態を確認しないとダメですね…お客様のサイトでなくて本当に良かった。
メンテナンスの重要さを実感した出来事でした。

対応策

今後お問い合わせフォームで「無効なアクセスです。」のエラーが起きないための対応策として、下記をするようにしました。

• 「Snow Monkey Forms」プラグインの自動更新を有効にする

通常、プラグインのアップデートは自動更新にしていないのですが（知らないうちにエラーが起きると困るので自分のタイミングで手動更新します）、このプラグインだけ自動更新を有効にしています。

管理画面の「プラグイン」＞「インストール済みプラグイン」一覧から「Snow Monkey Forms」を探します。

右側の「自動更新を有効化」ボタンをクリックします。

「自動更新は有効中です」という緑の文字になればプラグインの自動更新が有効になります。

プラグインのアップデートが頻繁にあるようなので、中々手が回らない場合はこちらが有効かもしれません。

WordPress本体のバージョンとの整合性もあるので、本体のアップデートも忘れずに。

お問い合わせフォーム自体のテスト送信も定期的に必要ですね。