🔰はじめての方へ

サイト作成

アプリ

Macでスクリーンショットを撮る方法|ウィンドウだけきれいに保存する

パソコンを使っていると、ブログ記事やアプリの紹介、MacOSのアプリスクショ画像などで「画面の一部だけスクリーンショットを撮りたい」と思うことがあります。特にMacでは、アプリのウィンドウだけを選択して撮影すると、ウィンドウの形に合わせて角...
AI

Vercelで別プロジェクトを上書きしかけた話 ―― 原因は複製した.vercelだった

はじめに個人開発でつくった静的サイト(HTML1枚のツール)に、ファビコンとOGP画像を追加してVercelにデプロイしました。ところが「画像が表示されない!」「別のアプリを上書きしちゃったかも!?」と、かなり肝を冷やす出来事があったので、...
Wordpress

Cocoonの「SILK」スキンでブログカードを横向きにするCSS(左サムネイル・右テキスト)

CocoonのスキンSILKでブログカードが縦向きにしかならない問題を、CSS Gridで左サムネイル・右テキストの横向きに組み直した方法を、実際に使ったCSS全文とハマりどころ付きでまとめました。
Wordpress

WordPressでHTMLファイルをそのまま公開する方法|FileZillaで簡単アップロード!

WordPressサイトにHTMLファイルをそのままアップロードして公開する方法を初心者向けに解説。FileZillaを使った手順や注意点、活用例も紹介します。
AI

【AIに記事を書いてもらう人向け】WordPress囲み枠を使いたい!ショートコードを作る

最近、AIを使ってブログ記事を書いてもらう人が増えてきました。ブログ記事の自動化とか量産とか聞きますよね。私も文章力がないしまとめ方もうまくないのでAIによく頼んだりしています。わたし余白を入れてください!・・・余白になってない・・・わたし...
AI

【AIに記事を書いてもらう人向け】記事に余白を入れたい!Cocoonのテンプレート機能でショートコード化する手順

Cocoonのテンプレート機能を使うと、セクション間の余白をショートコード 一つで入れられます。スペーサーのdivを毎回貼り直さずに済むので、AIに記事を書いてもらう人にも便利でした。登録手順を画像つきでまとめています。
Github

【GitHub】CLIを使ったプルリクエスト作成ガイド

初心者向けに、GitHub CLIを使ってコマンドラインでプルリクエストを作成する方法を説明します。ステップ1: GitHub CLIをインストールまず、GitHub CLIをインストールします。Homebrewを使用するのが簡単です。br...
CSS

【保存版】Tailwind CSS チートシート|文字サイズ・余白・Flex・Grid・レスポンシブ対応まとめ

Tailwind CSSを使うたびに、text-xlって何pxだっけ?px-4って左右16pxだっけ?justify-betweenとitems-centerが毎回ごっちゃになる……そういうことで、よく表記方法を検索しているのですが、自分で...
Github

【GitHub】複数ブランチを同時に作業しても大丈夫? |変更が消える心配を解消する

はじめにGitHubでブランチを使って開発していると「複数の作業を別のブランチを切って作業したい!」という場面がでてきますよね。私は最初、何も考えずにメインから複数のブランチを切って作業していました。ですが、片方をマージした際に気づきました...
SEO

【インデックスが50件増えた】ブログ記事が見られていない原因|インデックスされてなくて検索結果に載ってなかった!|WordPress

せっかく頑張って作成した記事なのにみられないなんてもったいないですよね。Googleは記事を公開したからといって、必ずインデックスしてくれるわけではありません。特に次のようなページはインデックスされにくい傾向があります。記事の文字数が少ない...
PHP

phpMyAdmin エクスポート&インポート方法(上書き保存対応)

はじめにリモートサーバーのデータベースをローカル環境にコピーしたいとき、phpMyAdminのエクスポート・インポート機能を使うと簡単にできます。ただし、ローカルに同じテーブルが既にある場合、そのままインポートすると「テーブルはすでに存在し...
Docker

【データベース×Docker】PHPサイトをローカルで動かす環境を作る方法|Nginx

はじめにWeb制作をしていると、こんな場面がありませんか?コードを書いたけど、レンタルサーバーにアップロードしないと動作確認できないデータベースを使うページを作ったけど、ローカルで確認する方法がわからないPHPファイルをブラウザで開いても、...
Docker

【初心者でもわかる】 Docker Desktopを導入してPHPサイトで使えるようにする方法

はじめにDockerを使うには、まず Docker Desktop というアプリをインストールする必要があります。この記事では、Docker Desktopのインストールから、実際にPHPサイトを表示するまでの手順をまとめています。Dock...
AI

【Claude Code】機密ファイル(パスワードなど)をClaude Codeに読み込まないで欲しい時の書き方

私はAI を使用してサイトの作成をすることが多く、cursorやClaude Codeを使ってコードを修正してもらったりしています。Claude Codeは、AIがコードを読み書きしてくれるとても便利なツールです。しかし便利すぎるがゆえに、...
AI

【初心者向け】Claude CodeをVSCodeで使う方法|インストールから初期設定まで解説

最近話題のAI開発支援ツール「Claude Code」。ChatGPTのようにチャットで質問するだけでなく、実際にコードの作成や修正、リファクタリングまでサポートしてくれるため、Web制作やプログラミング学習に役立ちます。この記事では、私が...
Claude Code

VSCodeおすすめ拡張機能8選|Web制作・PHP開発で実際に使っているものを紹介

VSCode(Visual Studio Code)は拡張機能を追加することで、より便利に利用できます。しかし初心者の方は、何を入れればいいかわからないおすすめの拡張機能を知りたいWeb制作向けの拡張機能が知りたいという方も多いと思います。...
AI

【Claude Code】VScode拡張機能で使用中のモデルを確認・変更する方法

はじめにVSCode の Claude Code 拡張機能を使っていて、「今どのモデルが使われているの?」と気になったことはありませんか?チャットのところになにも書いていないので困りました。モデルによって消費量も異なるようなので、切り替えは...
AI

【Claude Code】ターミナルで起動できない時の対処法

はじめにClaude Code をターミナルから使おうとしたところ、エラーが発生して起動できなくなっていました。(普段は「claude」と入力するだけで使用することができます)以前は問題なく使えていたのに、ある日突然動かなくなったケースです...
Github

【GitHubパスワード管理】使うなら必須!パスワードやデータベース情報を安全に管理する方法

PHPやWordPress、Webサイト制作を学び始めると、GitHubでソースコードを管理する機会が増えてきます。しかし、その際に注意しなければならないのが「パスワードの管理」です。私も最初は、データベースのパスワードはどこに書けばいいの...
Github

【PHPファイル機密情報管理】他者に見られてしまう情報と見られないもの。AIに機密情報を読み込まれないようにする方法も解説

PHPでデータベースを利用し始めると、データベースのユーザー名やパスワードはどこに書けばいいの?ブラウザの検証ツールで他人に見られないの?CursorやClaudeなどのAIに読み込まれないようにできるの?といった疑問が出てきます。私自身も...