知識メモ備忘録

「なんだっけ？」と思った時にここを見にくるページ

該当するメモが見つかりませんでした。

サーバー / FTP / VSCode

VSCodeでFTPを使ってサーバーに自動アップロード

VSCodeの拡張機能（例：SFTP / FTP Simple など）を使うと、ローカルで保存したタイミングでサーバーに自動アップロードできる。
設定ファイルに host / username / remotePath を書く。

例：
- WordPress テーマファイルを VSCode で編集 → Ctrl+S → 自動でサーバー更新。
- Pixel 10 Pro Fold からは「VSCode＋SSH/FTPアプリ」を組み合わせるイメージ。

ftp vscode サーバー

WinSCPでドメインごとのディレクトリに接続

FTPユーザーのルートディレクトリ配下に各ドメインのフォルダがある場合、 WinSCPの「初期ディレクトリ」を設定すると目的のドメインに直接入れる。

例：/home/ユーザー名/example.com/public_html/ を初期ディレクトリに指定。

winscp サーバー構成

デザイン / 画像 / Affinity / Illustrator

Illustratorで画像を高級感のあるダークトーンにする

画像を選択 → 「編集」ではなく「不透明マスク」や「オーバーレイ矩形」でトーンを調整。 RGBで少しだけ暗めの矩形を重ねて乗算にすると、潰さずに落ち着いたトーンになる。

例：RGB(20, 20, 20) の矩形を画像の上に置き、「乗算」「不透明度 40〜60％」で重ねる。

illustrator ダークトーン高級感

不透明マスクで「暗くしつつ文字を読みやすく」する考え方

写真の上に文字を載せるときは、写真を直接いじるより「暗めのレイヤー＋不透明マスク」でコントロールすると元画像を壊さない。

例：写真レイヤーはそのまま、上にグラデーション付き黒レイヤーを載せてマスクで範囲調整。

不透明マスクテキスト可読性

Web / ギャラリー / JavaScript

画像ギャラリーのモーダルが大きすぎるときの調整

モーダル内の画像に max-width: 90vw; と max-height: 90vh; を指定して、画面サイズに応じて縮小されるようにする。

例：.modal img { max-width: 90vw; max-height: 90vh; object-fit: contain; }

css モーダルギャラリー

クローズボタンのアイコンが表示されない時のチェック項目

- フォントアイコン（例：Font Awesome）の読み込みミス
- 絶対配置の座標が画面外になっている
- z-indexが足りず、モーダルの裏に隠れている

例：.modal-close { position: absolute; top: 8px; right: 8px; z-index: 9999; }

uiバグ z-index

ブログ / SEO / ライティング

SEOを意識したタイトルにするときの考え方

- 「誰の」「どんな悩み」を「どう解決する記事か」をタイトルに含める
- 固有名詞＋ベネフィット（例：LoL初心者でも〜が分かる）
- 1記事1キーワードを基本にする

例：「時を纏うシートカバー」→
「ハイエース用ヴィンテージ風シートカバー｜純正から雰囲気を一気に変える方法」

seo タイトル

「この記事でわかること」セクションの役割

読者に「読む価値」を先に見せるための要約リスト。箇条書きで3〜5個にまとめ、メリットを具体的に書く。

例：
- 純正シートとの違い
- 長時間ドライブでも疲れにくい理由
- お手入れ方法と注意点など

構成リード文