コーディング
製造系会社様レスポンシブコーディング
レスポンシブ対応
既存ページ約60ページのレスポンシブ対応をしました。
WordPressのバージョンアップ
WordPressバージョン3.5.1から最新バージョンの6.0(2022年7月時点)へアップデートをしました。
今後はお客様自身でレスポンシブ対応やWordPressのアップデートをしたい
レスポンシブ対応のcssの使い方、WordPressの関数やショートコードの使い方、管理画面からの更新の仕方について仕様書にまとめ、お客様自身で今後の運用ができるようにしました。
フィットネスジムLPのコーディング
追従ボタンやボタンアニメーションの実装
下記記事で紹介しているようなお申し込みボタンを作成しました。
LPなどで使用されるお申し込みボタンを、キラッと光が右に流れ、上下に揺れるアニメーションで実装をし、レイアウトとソースコードを紹介しています。
レスポンシブ横揺れの修正
実装・カスタマイズ
テスト環境のXserverのWordPressを本番環境のXserverのWordPressへ移行
プラグインの「All in One Migration」を使用して移行しました。
WordPressセキュリティ対策
ブルートフォースアタック対策
ブルートフォースアタック対策についての記事はこちら！
ブルートフォースアタックの仕組みや危険性、対策方法に解説しています。ブルートフォースアタックによる攻撃でパスワードが突破できる時間のパスワードの文字数による変化を計算式を用いて示しています。
クリックジャッギング対策
クリックジャッギング対策についての記事はこちら！
クリックジャッギング攻撃とは、ウェブサイト内のコンテンツを透明なフレームや不可視のフレームに表示し、ユーザーが意図しないクリックを引き起こす攻撃手法です。クリックジャッギング攻撃を防ぐためには、適切なセキュリティーヘッダーの設定が必要です。
Basic認証
Basic認証の基本的な概念、実装の仕方、セキュリティ上のポイントについて詳しく解説しています。Basic認証ではもう一段階ログイン認証を増やしたり、パスワードを知っている人のみが閲覧できる環境を構築することが容易にできます。しかしbasi
httpからhttpsへのリダイレクト設定
httpsで接続しているのに、URLの前に「！マーク」が表示される原因は「Mixed Content」です。「Mixed Content」になってしまう原因と解決方法について記事を書いています。
エラー解消・修正
Elementorテーマファイルカスタマイズ即対応
デザイン
WordPressヘッダーのワイヤーフレームとキャラクターの作成とヘッダーとこの記事を書いた人の実装
ヘッダーのワイヤーフレームとキャラクターをFigmaで作成しました。
キャラクターは実在の方の写真をいただいて作成しました。
WordPressのSANGOテーマにヘッダーの方を実装しました。
下記記事で紹介しているようなハンバーガーメニューを作成しました。
ハンバーガーメニューを作成しました。3本線からバツ印に変わるボタン、右からスライドしてくる第2階層もあるハンバーガーメニューです。ソースコードも紹介しています。
下記記事で紹介しているようなこの記事を書いた人を実装しました。
ブログやコラムページなどでよく見るこの記事を書いた人のレイアウトを作成しました。ソースコードも紹介しています。
エラー解消・修正
Elementorテーマファイルカスタマイズ即対応
figmaで下記のようなグラフを作成しました。
10%ごとにグラフの色をグラデーションさせています。
数字と縦線が被ったときは背景を白にして数字を見やすいようにしています。
グラフの色をロゴのカラーと同じにしました。
縦軸の凡例の項目名が少し長くなるため、横向きの棒グラフにしています。
