サイト作成 【XServer】リトルサーバーからXServerへ移管した理由と、実際に使ってわかったこと【お友達紹介コードあり】
WordPress で複数サイトを運営するようになってきて、 リトルサーバーからエックスサーバー（XServer）へ移管することにしました。今回はその流れと、実際に感じたポイント、そして 申し込み時に絶対に知っておいた方がいい注意点など20...
サイト作成 
サイト作成 Xのカードが表示されない問題
HTML、CSSでサイト作成。X（旧Twitter）へのシェアボタンを作成しましたが、Xの投稿にカードが表示されず困りました・・・↑こんな感じですしっかりmetaタグを書いていましたが表示されず。今回は私がやったことを紹介します。困っている...
Wordpress 【WordPress】ContactForm7から送信されたメールが迷惑メールフォルダに入ってしまう問題
今回はWordPressのプラグイン「Contact Form 7 」を使ってお問い合わせページを作成したところ、全て迷惑メールフォルダに入ってしまうことについての話です。自分がやったことと解決方法について説明します。私がやったこと「Con...
Github Macで勝手に出てくる「.DS_Store」をGitHubに上げない方法【完全ガイド】
Mac に変更してから GitHub にコミットすると、見慣れないファイル 「.DS_Store」 が毎回紛れ込んできます。このファイルは、Mac が自動で生成するフォルダの表示設定データで、プログラムには一切不要。最悪情報漏洩の可能性もあ...
CSS 【CSS】iPhone Safariで上下に余白ができてしまう問題
HTML・CSS・JavaScriptで制作したサイトを調整していた際、iPhone（iOS Safari）でのみ上下に白い余白が出てしまう現象に遭遇しました。問題の画像↓（ちなみにこのサイトはです！）調べていく中で分かった原因と、実際に効...
CSS 【JavaScript】Chart.jsでラベルを表示させたい！
自分用のメモとして記事を作成しました。ラベル表示で悩んでいる方にもお役に立てたらと思います！今回は下のようなグラフを作成します。別の記事で、Chart.jsが表示されない件についても記事にしているので、お困りの方はご参照ください！書き方HT...
CSS 【JavaScript】Chart.jsが表示されない！｜初期状態非表示にしてませんか？
今回はサイトで円グラフを表示させるために、Chart.jsを使用することにしました。検索していると比較的簡単そうに実装できそうだったため舐めていましたが、落とし穴が！特に、入力した数値を入れて「enter」でグラフを表示させるような動きを書...
PHP 【PHP】MacBookに移行／HomebrewでのPHPインストールとVSCode設定方法まとめ
WindowsからMacに乗り換えて、開発環境を整えていたときに「PHP 実行可能ファイルを指定されていません」という通知を見たことはありませんか？私も、WindowsからMacBookに変えてからVSCodeやCursorでPHPを書いて...
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でサイトを作成しており、下層ページ１ページだけオリジナルのページを作成しています。テーマとかは一切無視してまっさらな状態からデザインコーディングしています！オリジナルページの作り方は別記事で説明しているので説明を省きま...
ネタ帳 【パスワードを入力したけど見えない！】黒丸のパスワードを表示させる方法｜※注意点読んでください！
パスワードを入力すると、黒丸や点（●●●●●）で隠されて文字が見えなくなること、よくありますよね。最近は「目のアイコン」をクリックすれば一時的に表示できる入力フォームもありますが、そういった機能がついていない場合もあります。自分が入力したパ...