今回、横浜開港記念館に行ってみたくて参加しました。そこでWordPressに関する3つのセッションを聞くことができました。

先日、2026年1月31日に開催された「横浜 WordPress Meetup #38」に行ってきました！そこでWordPressに関する3つのセッションを聞くことができました。

開催概要はこちらです
2026年1月31日『横浜 WordPress Meetup交流会 #38』を開催します

3つのセッション概要

3つのセッションのポイントをギュッとまとめてお届けします。

「WordPressのセキュリティ」エックスサーバー後藤さん

• 「私のブログは小さいから狙われないはず」……そんな風に思っていませんか？AIを使って自動で攻撃を仕掛ける手法が増えていて、どんなサイトもターゲットになり得るそうです。
• フィッシングメールにも注意が必要。9割が日本がターゲットだそうです。

対策

• パスワードを複雑にすることが基本。パスワードは自動生成してGoogleパスワードマネジャーを使って記憶する。
• パスワードマネジャーのパスワードはアクロニム法＋αがおすすめ。
  例）住所の頭文字を使う。東京都千代田区霞ヶ関1-2-3 なら tck123 など
• アップデートはテーマ・プラグインともに自動更新が基本。WordPress6.6以降は更新失敗時に自動的に復元される機能あり。ただ自動更新されないプラグインもあるため、定期的な確認は必要。
• WordPressの中身を最小・最新にする。
  アップデートは月1回で良いので必ず行う。
  使用していないテーマやプラグインは無効化ではなく削除する。

「WordPressで抑えるべきSEOの基本」エル・タジェール代表・ミヤザキシンイチさん

AIがすぐに答えを出してくれる時代。だからこそ、「この記事は信頼できる人が書いているな」と思ってもらうことが大切だそうです。

1.技術的な設定の基本をしっかり

• パーマリンクは「投稿名」がおすすめ
• サイトタイトルとキャッチフレーズを必ず設定
• SSL化の確認
• SEOプラグインは1つだけにする

2.コンテンツの質

• ユーザーの悩みや「知りたい」に答える
• 独自の視点・経験を入れる
• 結論ファースト、適切な見出し

3.整理されたサイトの構造

• カテゴリー・タグを整理する
• パンくずリストを設置
• XMLサイトマップを送信
• モバイルで見やすいデザイン

SNSシェア・口コミ・レビューなど「第三者の評判」を味方につけるのがカギとのこと。

「WordPressでAI活用」ITエンジニア/カメラマン・和田稔さん

ChagGPTでできるWordPress運用のコツを解説していただきました。

• 記事作成の前準備をAIに任せる
• 記事には自分の実際の体験を必ず入れる
• ファクトチェックは必須
• 既存記事の改善をAIで効率化
• トラブル対応ではAIへの質問は状況を具体的に説明

まとめ

セキュリティは基本を抑えること、記事は1次情報を確認＋自分の体験を入れる、AIは間違いもあるけど正しく使うと強力な相棒なる、などぼんやり思っていたことを具体的な方法を交えて確認することができました！

おまけ：横浜開港記念館

開催場所の「横浜開港記念館」はこんなレトロで重厚感ある建物でした。

フォトウォークというイベントは初参加です。スマホとカメラを持って参加しました

2025年10月13日（月）、祝日だったので「Yokohama Meet Up フォトウォーク」に参加してきました。
プロ級のカメラ好きの人達ばかりで話についていけなかったらどうしようと少し緊張していたのですが、以前のWordPress meet upで話した方がいたので、ほっとして参加できました。

YOKOHAMA WordPress meet up開催概要はこちら
https://yokohama-wp.net/1101

写真はWordPress公式の「Photo Directory」にアップする

今回の趣旨は「スマホひとつで参加でき、撮った写真をWordPress公式のPhoto Directoryにアップロードして世界中のユーザーとシェア＆WordPressに貢献する」というもの。

WordPress公式のPhoto Directoryはこちら
https://wordpress.org/photos

Photo Directoryには現時点（2025年10月）で28,000点の写真が掲載されています。
こちらに写真を掲載する要件として、写真は「CC0」ライセンスである必要があるとのこと。「CC0」ライセンスは、著作権を放棄します、誰でも自由クレジット表記も無しで商用利用もOKですよ、というライセンスのようです。

ルートは桜木町駅前から赤レンガ倉庫手前の広場まで

集合場所は横浜・桜木町駅前。最初に軽く自己紹介をして、みんなでコースを確認。
エアキャビンを上に見ながら歩きます。「撮りたいものを撮るスタイル」で、自由に歩きながらのフォトウォークがスタートしました。
写真家の方もいらっしゃり、面白い構図なども教えていただけて、ありがたかったです。
この日は晴れていて、屋外の写真を撮るのに良い日でした。

Photo Directoryの掲載要件

WordPress.orgのPhoto Directoryに掲載するためには審査があります。審査に通過した写真だけが掲載されるので、下記を気をつけながら写真を撮る必要があります。

祝日で人がたくさんいるので、中々むずかしいですが、こんな写真が撮れました。横浜は絵になりますね。

Photo Directoryへのアップロード方法

STEP

WordPress.orgへアクセス（wordpress.comとは違うようです）

https://wordpress.org

STEP

アカウント作成またはログイン

wordpress.comとは別アカウントが必要です

STEP

メニューから「Community」＞「Photo Directory」へ

STEP

メニュー「Submit a photo」からアップロードします

ファイルを選択したら、「Alternative Text (required)」に英語テキストで写真の説明を入力します。「I confirm that:」の確認事項にチェックを入れて、Submitボタンを押すと申請されます。

＊一度の申請は５枚まで

STEP

申請が通ったらメールが来ます

無事申請が通って掲載されるとメールが届きます。

まとめ

ロゴや人の顔などが写っていない写真を選んでPhoto Directoryにアップロードしたところ、5枚申請して5枚審査を通って掲載されました！

写真はこちらです
https://wordpress.org/photos/author/yumdesign/

写真が掲載されるとWordPressに貢献したよ、という「Photo Contributor」というバッチがもらえます。地味にうれしいですね。

「フォトウォーク」というイベントは色々なところであるそうですね。他の人と一緒に歩くことで新しい発見がたくさんありました。主催のいしいひでゆきさん、開催していただいて、ありがとうございました！

次回のMeet Upも、参加してみたいと思います。
もしこの記事を読んで興味を持った方は、フォトウォークおすすめです！

試しにWordPressサイトのテーマやデザインなどを変更したいと思った時どうしていますか？

WordPressサイトのテーマやデザインなどを部分的に変更したいとき、そのまま本番サイトを直接触るのはリスクが高いです。WordPressでは「テスト環境（ステージング環境）」を作ってから編集や検証を行うのがおすすめです。この記事では、WordPressサイトを丸ごとコピーしてテスト環境を作る方法を紹介します。

なぜテスト環境が必要なの？

手間に感じると思いますが、本番環境を直接修正すると、表示が崩れたり、エラーになったりすることもあるので、まずはテスト環境で作業します。

• テーマやプラグインの更新前に動作確認できる
• デザインの大きな変更も安心して試せる
• 本番サイトが止まるリスクを避けられる

修正の流れ

コピーの方法色々

• プラグインを使ってコピーする（初心者向け）All-in-One WP Migrationなど
• 手動でコピーする（中級者向け）
• サーバーのステージング機能を使う（一番楽）

エックスサーバーの機能を使う

ここでは（３）エックスサーバーのステージング機能を使う方法を紹介します。エックスサーバーでは「ステージング」ではなく「サイトコピー」という名称になっているようです。

エックスサーバーのマニュアルはこちらです

「WordPressのサイトコピーについて」
https://www.xserver.ne.jp/manual/man_install_copy_word.php

私の場合は、　「WordPress簡単インストール」でインストールをしなかったので、上の方法ではできませんでしたので「WordPress簡単移行」という機能を使います。

エックスサーバーで「WordPress簡単移行」を使用する時の動作要件がこちらに書いてあります
https://www.xserver.ne.jp/manual/man_install_transfer_wp.php

サブドメインを追加する

(1)エックスサーバーのサーバパネルにログインし、「サブドメイン設定」をクリックします。

(2)ドメイン選択画面でサブドメインを追加するドメインを選択します

(3)「サブドメイン設定追加」タブで追加するサブドメインを入力し、「確認画面へ進む」をクリックします

(4)入力内容を確認し、「追加する」をクリックします

(5)「追加が完了しました。」と表示されたらサブドメイン設定の追加完了です

サーバに設定が反映されるのに最大1時間程度かかるようです。

サブドメイン設定の追加をすると、FTPサーバー上にフォルダが自動生成されます。

エックスサーバーのサブドメイン設定のマニュアルはこちらです
https://www.xserver.ne.jp/manual/man_domain_subdomain_setting.php

本番サイトをコピーして、テスト環境を作る

(1)Xサーバのサーバパネルから「WordPress簡単移行」を選ぶ

(2)ドメイン選択画面で「WordPress簡単移行」を行うドメインを選択

(3)「WordPress移行情報入力」タブを選択

(4)移行したいWordPressの情報を入力し、「確認画面へ進む」をクリック

入力項目について、詳しい解説がXサーバのマニュアルにあります。
https://www.xserver.ne.jp/manual/man_install_transfer_wp.php

(5)入力内容を確認し、「移行を開始する」をクリック

(6)エラーが出た場合、Basic認証など設定していないか確認

私の場合、セキュリティプラグインのログイン画像認証解除とエックスサーバの「ログイン試行回数制限」を解除したところ、実行できました。

エックスサーバの「ログイン試行回数制限」設定はこちら
https://www.xserver.ne.jp/manual/man_server_wpsecurity.php#link-c

(7)移行処理の実行中

完了までしばらく待ちます。

(8)完了したら「確認」ボタンをクリック

移行処理が完了すると、「確認」ボタンが表示されますので、「確認」をクリックします。
以上で移行作業は完了です。

※画像をエックスサーバーさんよりお借りしています

(9)先ほど設定解除したものを再び設定

忘れないうちに、セキュリティプラグインのログイン画像認証を再設定とエックスサーバの「ログイン試行回数制限」も再設定しておきます。

(10)サイトの動作確認

表示されたURLの表示や管理画面へのログインを確認します。

テスト環境で、改修・変更をする

上記で作ったテスト環境で、試したい変更を作業します。

変更が完了したら本番サイトへ反映

テスト環境で変更が完了したら本番サイトへ反映します。

本番サイトへの反映方法は下記などがあります。長くなるので概要だけ。

• 手動で同じように本番サイトへ変更を反映（部分的な修正など）
• FTPでアップロード（テーマ変更など）
• プラグイン「All in One WP Migration」で丸ごと移行

まとめ

環境をコピーするのは簡単、と思っていたのですが、いざ確認してみると作業手順が結構あることがわかりました。慣れていないと途中でエラーが出たら大変かもしれないですね。一度テスト環境を作っておくと、色々試せるのでトライすることをお勧めします。

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

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アイコンを登録して使う方法をご紹介しました。登録されてないご希望のアイコンで、ぜひ試してみてください！

WEB制作とは関係ないのですが…

WEB制作とは関係ないのですが、私の近況で思ったことを。
3月、子どもが中学校を卒業しました。
入学する高校も決まり、ほっと一安心…と言いたいところですが、意外とこの「卒業から入学までの期間」に子ども関連の用事が思ったより多く、忙しかったです。

もう子供も大きくなったら手が離れるから仕事いっぱい入れても大丈夫かと思っていたのですが、目論見は外れました。感じたことや、こうしておけばよかったと思うことを振り返ってみます。

高校入学までのタスクが多い

受験と発表のあとは、制服の採寸、教科書の購入、入学説明会など、やることが次々に出てきます。中学卒業から高校入学までの主な行事はこちらです。

• 受験と発表（親の心がジェットコースター）
• 入学説明会
• 手続きで高校へ
• 書類の山（締切がバラバラに書いてある）
• 制服採寸
• 子どもが急にどこかに行きたいと言い出す→旅行・お出かけなど計画
• 春休みで、子供の昼食や食材の準備

この時期は仕事を調整しておくと安心です。

昼食はレトルトやラーメンなどは子供が自分で準備して食べることができるのですが、普段そこまで買い置きしてないので多めに買っておいたり、在庫をチェックしたり、というタスクが発生します。

なぜこんな記事を書くのかというと、最近web記事がビジネスよりばかりが目に入り、それはそれで役立つのですが、もっと人の生活とかを知りたいんだよなあと思ったので、自分で実践してみました。

書類の山の片付け方

この中の書類の山の片付け方、よくチェックしている通販「OUR HOME」で攻略法が上がっていました。締切別にクリアフォルダで仕分け、締切をふせんに貼る、などは自然とやっていましたが、あらためて見るとやり方を整理して認識できました。

こういうのもYouTubeのコンテンツになるのですね。Emiさん（OUR HOMEの経営者）、視点がさすがです。

まとめ

これから高校生になるお子さんをお持ちの方はスケジュールに余裕を持たせておくことをオススメします。同じように中学卒業〜高校入学を迎えるご家庭に、少しでも参考になれば嬉しいです。

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

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サイトだとテスト環境でちゃんと直してから…となるともっと時間かかりますね。まだ変更したいところはあるので、徐々にやっていこうと思います。