サイト作成 .htaccessの書き方を初心者向けに解説｜一部のエリアだけ検索に出してそれ以外をnoindexにする方法
.htaccessの意味と基本の書き方を初心者向けに解説。たくさんのページの中から特定のエリアだけを検索にインデックスさせ、それ以外にnoindexを付けるコードを1行ずつ読み解きます。
Web初心者
サイト作成 
AI Vercelで別プロジェクトを上書きしかけた話 ―― 原因は複製した.vercelだった
はじめに個人開発でつくった静的サイト（HTML1枚のツール）に、ファビコンとOGP画像を追加してVercelにデプロイしました。ところが「画像が表示されない！」「別のアプリを上書きしちゃったかも！？」と、かなり肝を冷やす出来事があったので、...
ネタ帳 看護師からWeb業界へ独学で転職した体験談|使った教材・挫折・未経験OKの転職サービスまとめ
/* ===== 記事内スタイル(mtc-プレフィックスでテーマと干渉しにくくしています) ===== */.mtc-article{line-height:1.9;}.mtc-article h2{margin-top:3.5em;mar...
Claude Code VSCodeおすすめ拡張機能8選｜Web制作・PHP開発で実際に使っているものを紹介
VSCode（Visual Studio Code）は拡張機能を追加することで、より便利に利用できます。しかし初心者の方は、何を入れればいいかわからないおすすめの拡張機能を知りたいWeb制作向けの拡張機能が知りたいという方も多いと思います。...
サイト作成 【XServer】リトルサーバーからXServerへ移管した理由と、実際に使ってわかったこと【お友達紹介コードあり】
WordPress で複数サイトを運営するようになってきて、 リトルサーバーからエックスサーバー（XServer）へ移管することにしました。今回はその流れと、実際に感じたポイント、そして 申し込み時に絶対に知っておいた方がいい注意点など20...
Wordpress 【WordPress】オリジナルのページを作成／画像パスの書き方・CSSを引き継がない方法
Wordpressで採用ページのオリジナルページを作成しています！作成方法や、困ったことの対処法などは別の記事に書いてありますので、ご参照ください！作成方法についてページの表示確認ができないトラブル今回は、①画像のパスの書き方 と ②親CS...
Wordpress 【WordPress】オリジナルのページを作成／作成方法
今回は、Wordpressでオリジナルのページを作成したので、それの共有をさせていただきたいと思います。調べてもあまりオリジナルのページを作成する方法が掲載されていなかったので、誰かのお役に立てれたらいいなと思います。テーマは、「light...
Wordpress 【WordPress】オリジナルページを作成／投稿ができないときに確認するもの
Wordpressの固定ページを使用し、テーマに依存しない新しいページを作成するために試行錯誤しています。今回は、固定ページを使用してページを登録しようとしましたが「公開に失敗しました。 返答が正しい JSON レスポンスではありません。」...
node.js node.js インストール方法／Windows
① Node.jsの公式ウェブサイトにアクセス② LTSをダウンロード③ ダウンロードされたファイルをダブルクリックしてインストールインストーラーの指示に従ってインストール※ 英語ででてくるが、特に設定は変えなくていい④ 再起動⑤ コマンド...
PowerShell メモ PowerShell メモ
PowerShell メモ① window+R ② 「PowerShell」を入力してだすコマンドプロンプトより新しいため、powershellの方がいいVScodeのターミナルでもOK
HTML ファビコンが表示されない
表示されないことについて調べると、いろんなところで出てくるのがキャッシュを消せと。キャッシュを消しても、ちゃんと載っているかわからない時、調べるサイトがありました。これで確認すると、パスの誤りや、サーバーのアップロード先の誤りなどが見つかり...
HTML 【HTML】Googleマップ載せる方法
① Googleマップで載せたい場所を検索共有ボタンを押すと、下記の表示が出るので、「地図を埋め込む」を押すとHTMLコードが出てくる。② HTMLに記入小サイズにすると、widthは400とHTMLにでてくる。％しておいた方がコントロール...
CSS 【CSS】アイコンと文字を上下中央に
こうなってしまっているのをこれにしたい！① アイコン＋文字のクラスに「display: inline-block;」「vertical-align: middle;」を指定② アイコンに「vertical-align: middle;」を指...
JavaScript 【swiper】スライドショーの画像をPCとモバイル用で変更
モバイルでは丁度いいサイズでも、PC端末で表示すると、画面いっぱいに画像が出てきて見苦しかったので、それぞれ画像を分けることにしました。swiper については他にも記事にしているのでご参照ください。概要サムネイル付きスライドページネーショ...
CSS 【CSS】ヘッダーを固定にして追従させる方法／超簡単に説明！
ここでは「position: fixed」を使用した方法について解説します。① position: fixed「position: fixed」を使用し固定させる例position: fixed; /* 位置を固定する */top: 0; ...
CSS 【CSS】アイコンの色を変える
完成図もともと黒だったものを変更しました。フィルター機能で変更する！invert (階調) sepia(セピア) saturate(彩度) hue-rotate(色相) brightness(明度)これらを使用して、色を作成するだけです。....
CSS 【CSS】ギャラリーレイアウト／Grid Layoutで複雑なレイアウトも簡単にできる
ギャラリーのレイアウトは、少し考えたら簡単にできました！イメージしてから組むとわかりやすいです！ここではグリッドレイアウトを使用しています。グリッドレイアウトの応用編ですね！グリッドレイアウトについては下記記事にもしているので、ご参照くださ...
JavaScript swiper ページネーションが途中で消える問題
対処法原因がわからなかったので、ページネーションを外に出したりしたのですが、レスポンシブにするのが難しくて、なんどもトライアンドエラーしました。そしてたどり着いたのが、ページネーションのコードを書く位置！<div class="swiper...
JavaScript swiper サムネイル付きスライド 読み込めないときに確認したいこと
swiper の導入方法や書き方などは別の記事にしているので、ご参照ください。ここでは、私が見落としがちだったポイントを説明します。【確認①】HTMLの書き方必須事項を確認しましょう！コピペしたりしていると、必須classが入っていなかった...
JavaScript スライドショーができる【swiper】メモ
swiperとはJavaScriptのライブラリjQueryを使用せず、HTML、CSS、JavaScriptでスライドショーができます。導入方法NPMCDNダウンロードこの3つの方法がありますが、ファイルをダウンロードして使うことがおスス...