サイト作成
サイト作成
サイト作成 
React 【React】CSSモジュール書き方／初心者向け
React勉強中に、エラーから抜け出せなかったポイントも含めて簡単にご説明します。私は、React＋TypeScript で開発しているので、違う方法だとやり方が異なる可能性があるので注意してください（）なんで普通のCSSじゃだめなのか普通...
Figma 【Figma】編集メモ／グリッド・プラグインなど
自分用のメモとして残しておきます！グリッドBootstrapに使えるため使用している①フレームを選択②「レイアウトグリッド」→ 左側のボタンをクリックオートレイアウト並べ替え、間の大きさを変更できるヘッダーにつかうオートレイアウトの説明①テ...
CSS 【WordPress】Lightning｜パンくずリストの位置を変える/自分好みのページヘッダーに変える方法
WordPressの無料テーマ「Lightning」のカスタマイズを行なっています。有料にすると、本格的なサイトに簡単にすることができるようですが、私はCSSを使って無料でカスタマイズを行なっております。今回は、パンくずリストの位置を修正す...
CSS 【CSS】わかりにくいposition: fixed・relative・absolute・fixed 要素の位置調整、考え方
position なんとかは、個人的になかなか難しくて、なんとなく使っていた感じだったので、一旦学習し直してみました。わかりやすく図をいれて記事を書いたので、ご参照いただけたら嬉しいです！1. absolute と relative の関係...
CSS 【CSS】要素の位置を調整する top と transform: translateY(-50%) の考え方
Web制作でよく出てくるのが「要素を上下や左右の中央にそろえたい」「ロゴやハンバーガーボタンをきれいに配置したい」といったレイアウト調整です。この記事では、top・calc()・transform: translateY(-50%) を使っ...
Wordpress 【WordPress】Lightning / ハンバーガーボタンの位置調整｜position: fixed top left の考え方
WordPressの無料テーマ「Lightning」を使用している方に宛てた記事です。ハンバーガーボタンの編集をしたい時に活用して欲しいです。おすすめの方法ハンバーガーボタンの位置を調整する前に、実際のサイト表示を確認する画面の上部にある、...
Wordpress 【WordPress】サイト確認の時の上のバーを隠す方法
WordPressで作成したサイトの表示を確認したい時、上の黒いバーが現れます。あまり気にならないことの方が多いと思いますが（私はWordPress１年半編集続けてて気にならなかった！）今回、ハンバーガーボタンの位置を調整するのに、表示が実...
node.js 【React/Vite】WindowsからMacBookへ環境移行したときのセットアップ手順まとめ
Windows から MacBook に開発環境を移行した際に、React + TypeScript + Vite プロジェクトを動かすまでの手順をまとめました。私自身、最初にnpm startを打ってエラーになったり、rollup関連のモ...
Wordpress 【WordPress】CSSが反映されない？開発中に便利なキャッシュ対策まとめ
WordPressでテーマを編集していると、「style.cssを修正したのに反映されない！」という場面に出会うことがあります。実際、私も子テーマのスタイルシートを編集したのに、変更が一切反映されず困ったことがありました。検証ツールを見ても...
Wordpress 【WordPress】管理画面エディタとVSCode＋FTP、両方使う落とし穴
WordPressでテーマをカスタマイズしていると、テーマファイルを直接編集 する場面が出てきます。そのときに使うのが、WordPress管理画面の「テーマファイルエディタ」ローカル環境の VSCode で編集 → FTP（FileZill...
Wordpress 【WordPress】オリジナルページ作成後、メインページのCSSが効かない時の対処法まとめ
私はWordPressでサイトを作成しており、下層ページ１ページだけオリジナルのページを作成しています。テーマとかは一切無視してまっさらな状態からデザインコーディングしています！オリジナルページの作り方は別記事で説明しているので説明を省きま...
Wordpress お名前.comでドメインE判定…スパム対策③／PHPバージョンの更新について
お名前.comで「ご利用中ドメインのネットde診断（セキュリティ診断）診断結果のご報告」という連絡が来ました。その結果はE判定・・・危機感を覚え、色々改善しているところです。セキュリティやスパム対策としてやったことなど記事にしているので、参...
サイト作成 お名前.comでドメインE判定…スパム対策②／WordPress
スパムメールが頻繁にくるようになり、そのせいなのか、お名前.comでドメインがE判定といきなり連絡が来ました…びびります。とりあえず、原因となりそうなWordpressのセキュリティについて見直したので、私がやったことをご紹介します。スパム...
CSS 【SEO】CSS（JS）の圧縮／PageSpeed Insights
ページの速度改善についてです。ページの速度を速めることは、SEO対策として大切になってきます。わたしは、ランディングページを作成していましたが、ページの表示速度を速めることはランディングページの利便性というのを改善することにつながり、サイト...
CSS 【CSS】画面が左右に動いてしまう問題 ②
サイト制作をしているときに、画面が左右に動いてしまい、スクロールが不安定になってしまうことがありました。そこで対策方法がわかったので共有します。最初に、はみ出ている要素がないか確認します。padding等で、横幅100％からはみ出しているこ...
SEO 【SEO】PageSpeed Insights「第三者コードの影響を抑えてください」をタグマネージャーを用いて対応
PageSpeed Insights で、ページの表示速度がどのくらいなのか計測することができます。ページの表示速度を上げることは、SEO対策として重要です。私の過去の記事でも、Wordpressで作成したサイトの速度を上げることについて掲...
SEO 【SEO】レイアウトシフトメモ
自分用のメモとして残しておきます。数ミリ秒の低下でもペナルティになる累積レイアウトシフト(CLS)は、PageSpeed Insights でわかるCLS判定値が0.1以下ならOK、0.1以上なら要改善・0.1未満⇒良好・0.25以下⇒改善...
SEO 【SEO】画像をAVIFに！メモ
自分用のメモとして残します。上記サイトはGoogleが提供している、ブラウザ上で画像を圧縮できるサイト。画像の容量が大きいと表示に時間がかかり、ユーザーが離脱してしまう。簡単に言うと、AVIFはあまり画質をそこなわずに圧縮してくれるものであ...
SEO 【SEO】サジェストキーワード メモ
SEO対策に「サジェストキーワード」を使用した対策があります。これを使用すると、Googleでその言葉で何が調べられているかわかります。例えば、鍵屋の場合「鍵 トラブル」で検索すると「鍵 トラブル 業者」のように表示される。鍵トラブルで検索...
Github 【Github】マークダウンリンクを作成する
(url)このように記載すれば文字にリンクがつきます。