WordPress ブログデザイン、リニューアルしました
とても使いやすい無料テーマ、Cocoonの子テーマをリニューアル。トップページと記事の一覧が別ページになるサイト型へ変えました。SVGモーフィングをスライダーの枠として実装してます。ハンバーガーメニューはアクセシビリティ対応のライブラリを使用しました。ふわっと表示するアニメーションを色々な部分に仕込んでいます。Cocoonを使っている方、カスタマイズの例として是非ご覧ください。
新着記事
WordPress 
HTML/CSS LPのお問い合わせフォームに使える！PHP工房さんのフリーメールフォームを実装してみた
LPのお問い合わせフォーム、どうしてますか？プラグインを使う為にわざわざWordPress化するの、なんだかなあ・・と思っていたところ、PHP工房さんのフリーメールフォームが便利に使えそうなことがわかりました。
前に作ったLPのデモサイトに、PHP工房さんのフォームを使用してお問い合わせフォームを実装してみました。
WordPress WordPressローカルデバッグ環境作成2 Mac編：MAMPのMySQLのパスワード変更後、phpMyAdminエラーで困った話
MAMPでMySQLのデフォルトのパスワードがrootなのが気になって変更したところ、phpMyAdminにログインできなくなってしまいました。原因はphpMyAdminバージョンに気づかなかったことですが、同じように困っている方がいるかもしれないと思い、共有させていただきます。
WordPress WordPressローカルデバッグ環境作成①Windows編：VSCODE+Xdebug+XAMPP
WordPress(ワードプレス)のテーマを作り始めた方へ、効率よく開発を進められるデバッグ環境をご紹介します。マイクロソフトのエディタVisual Studio Codeと、PHPのデバッグツールXdebugをローカル環境XAMPPと接続してステップ実行などのデバッグが可能になります。画像多めで記事作成してます。また、最後にデバッグの様子のデモ動画を作ってますので是非ご覧ください。
Demoベーカリーコルネ 自主制作の記録！デザイン→コーディング→WordPress化までやってみる。【WordPress】完成したよ！是非見てね
駆け出しWebデザイナーの自主制作記録。Adobe XDでデザイン、HTML/CSS/JSでコーディング。WordPressオリジナルテーマ化までを記録していきます。
この記事ではコーディング後、WordPressオリジナルテーマとして作成したデモサイトを公開してます。
デモの目玉として、プラグインBooking Packageを使った食パンの受け取り予約システムを実装しています。
表示速度向上の取り組みなども書いてます。
HTML/CSS ホームページのアドレスはhttpsから始まってますか？httpからの場合はSSL化しよう！リダイレクトも設定しよう！
私が10年ぐらい前に運営していたWordPressのブログのURLがhttpから始まるアドレスのままでした。当時は使っていたレンタルサーバーで無料のSSL設定がなかったはず、、、最近まですっかり忘れておりましたが、httpsからになるように対応しました。今のレンタルサーバー屋さんはほとんど無料独自SSL対応しているので、これから公開するサイトは是非最初からSSL化してhttpsから始まるURLにしておきましょう！
記事では私が今使用しているエックスサーバーの設定をざっくり紹介しています。
WordPress WordPress(ワードプレス)のセキュリティ対策、すぐにやりたい必須編
WordPressは初期設定のままだとログインURLが誰にでもアクセスできるので、まずはそこを対策する必要があると思います。
プラグインのサイトガードを使用した設定を説明しています。
他にもユーザー名が漏えいしてしまう対策、コメントや問い合わせフォームのスパム対策についても書いてます。
セキュリティ対策が心配になった初心者の方に読んでいただければと思います。
Demoベーカリーコルネ 自主制作の記録！デザイン→コーディング→WordPress化までやってみる。【コーディング編②】HTML完成、デモサイトを公開
駆け出しWebデザイナーの自主制作記録。Adobe XDでデザイン、HTML/CSS/JSでコーディング。WordPressオリジナルテーマ化までを記録していきます。
この記事ではAdobe XDでデザインした全ページをHTML/CSS/JSでコーディングした結果のデモサイトを公開してます。
表示速度向上の取り組みなども書いてます。
HTML/CSS HTML/CSS イラレで作ったSVGを外部ファイルで読み込み。色変更・レスポンシブ対応可能にするまでの手順
イラストレーターで自作したロゴをSVGに書き出すところから、HTMLに読み込む際のファイルの最適化、HTMLで呼び出す手順、ブラウザでの確認方法までを丸ごと一つにした記事です。IEには未対応です。
Demoベーカリーコルネ 自主制作の記録！デザイン→コーディング→WordPress化までやってみる。【コーディング編①】ひとまずトップページのレスポンシブ対応まで
駆け出しWebデザイナーの自主制作記録。Adobe XDでデザイン、HTML/CSS/JSでコーディング。WordPressオリジナルテーマ化までを記録していきます。
この記事はAdobe XDでデザインしたトップページをHTML/CSS/JSでコーディングした内容の制作メモです。