ツールの使い方等、テクニックに関する記事です。

LPのお問い合わせフォームにformrun(フォームラン)のコード型を実装してみました
お問い合わせフォームの専門の業者formrun(フォームラン)のフォームはコード型で実装すればHTML/CSSでデザインカスタマイズが可能です。Webデザイナー・コーダーの方に向けた内容になります。formrun(フォームラン)のヘルプページは充実しているのですが、自作のデモサイトに実装しているフォームを例に、今後迷わず実装できるための手順をまとめました。スパム対策としてGoogle reCAPTCHAを採用しています。

SwiperのVersion9はloopモードのスライド数設定に注意
ベーシックな画像が複数枚横にスライドするタイプのスライダーについて、CodePenでデモを作りました。Swiperのバージョン9では、JavaScriptの初期化設定slidesPerViewの設定値の2倍以上のHTMLのswiper-slideの記述が必要。確認したバージョンは9.0.5です。

画像をトリミングしてください!にobject-fit: coverとaspect-ratioで対応
例えば一つの画像をタブレットとスマートフォンで違う見せ方にしたいとき、CSSのobject-fit: coverとaspect-ratioの設定によってレスポンシブ対応しながら任意の形にトリミングできます。

Browsersync+Gulpでブラウザの自動更新。(2023年1月現在)途中ハマったのでメモ
静的サイトの制作ではhtml/css/jsを変更した後にブラウザの再読み込み、キャッシュクリアなどをいちいち行っておりました。今回導入したBrowsersync+Gulpの環境では、ブラウザの再読み込みなどをしなくても自動更新が可能になります。導入にあたっていろいろな参考記事を参考にしたのですが、最初うまくいかずハマってしまいました。同じ様に困っている方の助けになれば幸いです。2023年1月現在の内容です。

CSSであしらい作り。強調したいテキストの上にドットを付ける
CSSでテキストの上にドットを付ける方法です。radial-gradientを使用。spanタグで一文字づつ括る必要なし。参考記事のCSSをベースにSafariでもドットが表示されるように改良しました。

LPのお問い合わせフォームに使える!PHP工房さんのフリーメールフォームを実装してみた
LPのお問い合わせフォーム、どうしてますか?プラグインを使う為にわざわざWordPress化するの、なんだかなあ・・と思っていたところ、PHP工房さんのフリーメールフォームが便利に使えそうなことがわかりました。 前に作ったLPのデモサイトに、PHP工房さんのフォームを使用してお問い合わせフォームを実装してみました。

WordPressローカルデバッグ環境作成2 Mac編:MAMPのMySQLのパスワード変更後、phpMyAdminエラーで困った話
MAMPでMySQLのデフォルトのパスワードがrootなのが気になって変更したところ、phpMyAdminにログインできなくなってしまいました。原因はphpMyAdminバージョンに気づかなかったことですが、同じように困っている方がいるかもしれないと思い、共有させていただきます。

WordPressローカルデバッグ環境作成①Windows編:VSCODE+Xdebug+XAMPP
WordPress(ワードプレス)のテーマを作り始めた方へ、効率よく開発を進められるデバッグ環境をご紹介します。マイクロソフトのエディタVisual Studio Codeと、PHPのデバッグツールXdebugをローカル環境XAMPPと接続してステップ実行などのデバッグが可能になります。画像多めで記事作成してます。また、最後にデバッグの様子のデモ動画を作ってますので是非ご覧ください。

HTML/CSS イラレで作ったSVGを外部ファイルで読み込み。色変更・レスポンシブ対応可能にするまでの手順
イラストレーターで自作したロゴをSVGに書き出すところから、HTMLに読み込む際のファイルの最適化、HTMLで呼び出す手順、ブラウザでの確認方法までを丸ごと一つにした記事です。IEには未対応です。

[WordPress]Cocoonカスタマイズ:サイトロゴの表示をスマホだけにする+PCのヘッダー背景画像の調整
...