ブログのWordPress環境構築や、カスタマイズについて。
WordPressCocoonのSNSシェアボタンを縦表示に。まずはCSSだけでやってみよう
CocoonのSNSシェアボタンはデフォルトで横表示です。SNSシェアボタンを縦に表示させているサイトをよく見かけており、そちらのほうが洗練されて見えるかも？と思ってのカスタマイズです。CocoonでもちょっとしたCSSの変更で縦表示にできます。当ブログでは更にJavaScriptで表示ON/OFFを制御していますが、この記事ではそこまではせず、CSSでできる範囲にとどめて手順を書いています。
WordPressブログデザイン、マイナーリニューアル。Cocoon子テーマカスタマイズ色々
WordPress無料テーマ、Cocoonの子テーマをカスタマイズして使っています。前回に続いてマイナーリニューアル。動きが分かりやすいアニメーションが増えた感じです。Cocoonのタイムラインブロックや、iPhoneでも有効なスクロール中の背景固定。SNSシェアボタンの縦表示など。jQuery不使用。Intersection Observerを使用してブラウザの負荷軽減。
WordPressブログデザイン、リニューアルしました
とても使いやすい無料テーマ、Cocoonの子テーマをリニューアル。トップページと記事の一覧が別ページになるサイト型へ変えました。SVGモーフィングをスライダーの枠として実装してます。ハンバーガーメニューはアクセシビリティ対応のライブラリを使用しました。ふわっと表示するアニメーションを色々な部分に仕込んでいます。Cocoonを使っている方、カスタマイズの例として是非ご覧ください。
WordPressWordPressローカルデバッグ環境作成2 Mac編：MAMPのMySQLのパスワード変更後、phpMyAdminエラーで困った話
MAMPでMySQLのデフォルトのパスワードがrootなのが気になって変更したところ、phpMyAdminにログインできなくなってしまいました。原因はphpMyAdminバージョンに気づかなかったことですが、同じように困っている方がいるかもしれないと思い、共有させていただきます。
WordPressWordPressローカルデバッグ環境作成①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にしておきましょう！ 記事では私が今使用しているエックスサーバーの設定をざっくり紹介しています。
WordPressWordPress(ワードプレス)のセキュリティ対策、すぐにやりたい必須編
WordPressは初期設定のままだとログインURLが誰にでもアクセスできるので、まずはそこを対策する必要があると思います。 プラグインのサイトガードを使用した設定を説明しています。 他にもユーザー名が漏えいしてしまう対策、コメントや問い合わせフォームのスパム対策についても書いてます。 セキュリティ対策が心配になった初心者の方に読んでいただければと思います。
Demoベーカリーコルネ自主制作の記録！デザイン→コーディング→WordPress化までやってみる。【コーディング編②】HTML完成、デモサイトを公開
駆け出しWebデザイナーの自主制作記録。Adobe XDでデザイン、HTML/CSS/JSでコーディング。WordPressオリジナルテーマ化までを記録していきます。 この記事ではAdobe XDでデザインした全ページをHTML/CSS/JSでコーディングした結果のデモサイトを公開してます。 表示速度向上の取り組みなども書いてます。
Demoベーカリーコルネ自主制作の記録！デザイン→コーディング→WordPress化までやってみる。【コーディング編①】ひとまずトップページのレスポンシブ対応まで
駆け出しWebデザイナーの自主制作記録。Adobe XDでデザイン、HTML/CSS/JSでコーディング。WordPressオリジナルテーマ化までを記録していきます。 この記事はAdobe XDでデザインしたトップページをHTML/CSS/JSでコーディングした内容の制作メモです。