HPBUILD

WordPressは世界中で広く使われているため、ログインページがスパム攻撃の標的になりやすいという弱点があります。とくに、/wp-login.phpや/wp-adminといったURLは、ほとんどのWordPressサイトで共通しているため、悪意あるBotが簡単にアクセスして総当たり攻撃（ブルートフォースアタック）を仕掛けてくるのです。 そんな中でおすすめなのが、WPS Hide Loginという無料プラグイン。誰でも簡単に、ログインURLを変更してスパム攻撃から守ることができます。本記事では、初心者でも迷わないよう、インストールから設定、注意点までを丁寧に解説します。 WPS Hide Loginとは？ WPS Hide Loginは、WordPressのログインページのURLを変更できる軽量なプラグインです。ファイルを書き換えることなく、ログインページへのアクセス経路を隠すことで、Botによるログイン試行を大幅に防ぐことができます。 変更前のURL例：https://example.com/wp-login.php 変更後のURL例：https://example.com/my-login-page WPS Hide Loginのインストール手順 WordPressの管理画面にログインします。 左メニューの「プラグイン」→「新規追加」をクリック。 右上の検索欄に「WPS Hide Login」と入力します。 「今すぐインストール」→「有効化」をクリックします。 ログインURLの設定方法 プラグインを有効化後、「設定 → 一般」を開きます。 ページ下部に「WPS Hide Login」の設定項目が追加されています。 「ログインURL」欄に任意のURL（例：my-login-page）を入力します。 ページ下の「変更を保存」をクリックして完了です。 重要：旧ログインURL（/wp-login.php）や/wp-adminは無効になります。新しいログインURLは必ずメモかブックマークしておきましょう！ 変更後のURLを忘れてしまった場合の対処法 万が一、新しいログインURLを忘れてしまった場合は、次のいずれかの方法で復旧できます。 FTPやファイルマネージャーで「WPS Hide Login」を一時的に無効化 /wp-content/plugins/ フォルダにある wps-hide-login フォルダの名前を一時的に変更します（例：wps-hide-login_backup）。これにより、元の /wp-login.php からログインできるようになります。 データベースから確認する方法 管理画面にアクセスできない場合は、phpMyAdmin などで wp_options テーブルを確認し、wps_hide_login オプションの値を探します。 ログイン後は、プラグインを再有効化し、再設定を行いましょう。 安全なログインURLを考えるコツ 推測されやすい名前（例：loginやadmin）は避ける 英数字を組み合わせた長めの文字列（例：mysecuredoor2025）が効果的 サイト名や会社名などを含めてもOK WPS Hide Loginを使うメリット このプラグインを導入することで、以下のようなメリットがあります。 スパムBotによる不正ログインを防止 ログの肥大化やサーバー負荷の軽減 セキュリティ対策を手軽に強化 ログイン試行の失敗によるロックアウトを減らす 注意点と併用したいセキュリティ対策 WPS Hide Loginは強力ですが、単体では不十分な場合もあります。以下の対策とあわせることで、より堅牢なセキュリティを構築できます。 2段階認証（2FA）の導入：Google AuthenticatorやWordfenceを併用 ログイン試行制限：WordfenceやLogin Lockdownなどで回数制限を設ける 管理画面アクセスのIP制限：.htaccessで特定のIP以外をブロック おわりに WordPressサイトのセキュリティを高める第一歩として、WPS Hide Loginの導入は非常に効果的です。とくに初心者でも扱いやすく、導入後すぐに効果を実感できる点が大きな魅力です。 「なんとなく不安…」と感じている方は、ぜひ今すぐログインURLを変更して、Botから大切なサイトを守りましょう！

Webサイトで文章を表示する際、左右のバランスが気になることはありませんか？ そんなときに活躍するのが、text-align: justifyによる均等揃えです。 このプロパティを使えば、雑誌や新聞のようにテキストの両端をキレイに揃えることができます。 本記事では、その使い方と注意点、さらには応用テクニックまで、初心者向けにわかりやすく解説します。 text-align: justifyとは？ text-alignはテキストの揃え方を指定するCSSプロパティです。 通常は left（左揃え）、center（中央揃え）などを使いますが、justifyを指定すると、 各行の左右両端がピッタリ揃う 文字と文字の間隔を調整して揃える という特徴があります。 p { text-align: justify; } どんなときに使う？ 以下のような場面でjustifyがよく使われます： 長文の読み物ページ（ブログやコラム） PDF風のページや書類系サイト 新聞や書籍のレイアウトに近づけたいとき 注意点：「。」や短い行では効かない！ text-align: justifyはすべての行に適用されるわけではありません。 以下のようなケースでは均等揃えが適用されません： 段落の最終行 <br>で明示的に改行された行 1行の文字数が少ない場合 つまり、「。」で毎回改行してしまうと、均等揃えにならない行が増え、見た目が不揃いになってしまいます。 均等揃えのコツ 見栄えよく均等揃えを活かすために、以下のような工夫がおすすめです： 文末の「。」で毎回改行しない <br>は使わず、<p>タグで段落を区切る max-widthを設定して読みやすい行幅にする p { text-align: justify; max-width: 40em; line-height: 1.8; } 応用：text-align-lastで最終行を制御 均等揃えでは最終行だけ左揃えになってしまうのが一般的です。 これをカスタマイズするには、text-align-lastプロパティを使います。 p { text-align: justify; text-align-last: center; } これで、段落の最後の行だけ中央揃えなどにすることも可能です。 まとめ text-align: justifyで、文章を両端揃えにできる ただし、改行の仕方や行の長さによっては揃わないこともある text-align-lastで最終行の調整もできる 読みやすさと美しさのバランスを見ながら、ぜひ活用してみてください！

ブログやホームページを運営している方なら、一度は「サイトを収益化したい」と考えたことがあるのではないでしょうか。そんなとき、初心者でも取り組みやすいのがGoogle AdSense（アドセンス）です。 この記事では、AdSenseの仕組みから、審査に通るための具体的な条件、審査落ちの原因と対処法まで、これからAdSenseに挑戦したい初心者の方にも分かりやすく解説します。 AdSenseとは？ Google AdSenseとは、Googleが提供するクリック型広告配信サービスです。自分のWebサイトやブログにAdSense広告を掲載し、ユーザーがその広告をクリックすると収益が発生します。広告の種類やジャンルはサイトの内容やユーザーの興味関心に応じて自動的に最適化されるため、運営者は広告内容を選ばずとも効率よく収益化が可能です。 例えば、旅行ブログを運営していれば、旅行商品や航空券の広告が自動表示されることもあります。また、収益は「クリック単価（CPC）」に基づいて計算され、1クリックあたり数円～数十円、高い場合には100円を超えることもあります。 AdSenseの審査とは？ AdSenseを利用するには、まず自分のサイトをGoogleに申請し、審査を受ける必要があります。この審査は、Googleが「このサイトは広告を掲載するのにふさわしいか」を判断するためのもので、審査に通らないとAdSense広告を貼ることはできません。 審査にかかる期間は通常1〜3日ですが、場合によっては1週間以上かかることもあります。審査結果はGoogleアカウントに登録したメールアドレスに届きます。 AdSense審査に合格するために必要な条件 以下は、多くの合格者の情報から導き出された「合格しやすいサイトの特徴」です。 記事数は最低20〜30本以上：ボリューム感のあるサイトが好まれます 1記事あたり1,000〜1,500文字以上：薄い内容は評価されません オリジナル性と有益性のある内容：コピーやAI文章の寄せ集めはNG 問い合わせページ：運営者と連絡が取れる仕組みが必要 プライバシーポリシー：Googleのポリシーに準拠している必要あり プロフィールページ：誰が運営しているかがわかること スマホ対応のデザイン：モバイルユーザーが多いため必須 Search Consoleでエラーがない：404やリダイレクトなどの技術的ミスに注意 審査に落ちる原因と対処法 しっかりと記事を書いていても、以下のような理由で審査に通らないことがあります。 ① コンテンツが不十分 「記事数が足りない」「文字数が少ない」「内容が薄い」などは、よくある落選理由です。また、AI生成コンテンツのみで構成されたページも品質が低いとみなされる傾向があります。実体験・独自性・信頼性がある内容を目指しましょう。 ② サイト構造に不備がある AdSenseではユーザビリティも重視されるため、以下の構成がない場合は不合格の原因になります。 グローバルメニュー（ナビゲーション）の未設置 お問い合わせ・プライバシーポリシーの未設置 プロフィールページが空白、または存在しない ③ 技術的なエラー 最近多いのが、Google Search Console 上でエラーが大量に発生しているケースです。例えば以下のような状況です。 「見つかりませんでした（404）」が数百〜数万件 リダイレクトループや無限パラメータ付きURL Googlebotがアクセスできないページが多数ある 特にWordPressや広告連携で発生しやすい「?_ga=」や「?_gl=」などのパラメータ付きURLが大量にクロールされると、インデックスが崩れ、審査落ちの原因になります。 審査に通るための対策まとめ 審査を通過するためにやっておきたい対策を整理します。 記事数と文字数を十分に確保する プロフィール・お問い合わせ・プライバシーポリシーの設置 Search Consoleで404・リダイレクトエラーを修正 canonicalタグを正しく設定（URLの正規化） 不要なパラメータ付きURLは削除ツールで非表示にする サイトマップを再送信してクロールを促す 特に技術的なエラーは見落とされがちですが、Googleにとっては「広告を安全に表示できる環境」かどうかが非常に重要です。 再申請のタイミングは？ 一度審査に落ちた場合でも、修正をすれば再申請が可能です。ただし、同じ状態で何度も申請すると、AIによる自動評価で通りづらくなる可能性もあるため、しっかりと原因を見極めて、1週間以上空けてから再申請するのが安全です。 まとめ Google AdSenseは、初心者でも取り組みやすい収益化の第一歩です。しかし、審査に通るためには、ただ記事を書くだけでなく、サイトの構造・品質・技術的な整備も不可欠です。 この記事を参考に、サイトの状態を一度見直して、AdSense合格をしっかりと狙っていきましょう。しっかり準備すれば、必ず道は開けます。

HTMLでページ内リンク（アンカーリンク）を設定したとき、ジャンプ先の見出しがヘッダーに隠れてしまうことはありませんか？ 特に固定ヘッダーを使っているサイトではよくある悩みです。この記事では、ページ内リンクのズレを防ぐ3つの方法を、初心者にも分かりやすく紹介します。 そもそもページ内リンクとは？ ページ内リンクとは、同じページ内の特定の要素にジャンプできるリンクのことです。<a href="#id名">でリンクし、ジャンプ先には対応するid属性を付けます。 コピー <a href="#section1">セクション1へ</a> ... <h2 id="section1">セクション1</h2> リンクをクリックすると、ページ内のid="section1"が付いた要素まで自動でスクロールします。 よくある問題：見出しがヘッダーに隠れる ページの上部に固定ヘッダー（position: fixed）を使用していると、ジャンプ先の要素がヘッダーに隠れてしまうことがあります。 ▼ こんな状態になっていませんか？ ジャンプしても見出しが表示されない スクロール後にいきなり本文が始まる 解決方法1：CSSのscroll-margin-topを使う（見出しごとに設定） 最もよく使われる方法は、ジャンプ先となる見出しにscroll-margin-topを指定する方法です。 コピー h2 { scroll-margin-top: 80px; /* 固定ヘッダーの高さに応じて調整 */ } これにより、スクロールした際に見出しの上に余白ができ、ヘッダーに重ならずに表示されます。 ページ全体のid付き要素すべてに適用したい場合 ジャンプ先がh2以外（例えば<div id="...">など）にも及ぶ場合は、以下のように指定すると便利です。 コピー [id] { scroll-margin-top: 80px; } 解決方法2：ダミー要素を使って調整する 古いブラウザ対応やより細かい調整が必要な場合は、ジャンプ先の直前に見えないダミー要素を挿入する方法があります。 コピー <div id="section1" class="anchor-adjust"></div> <h2>セクション1</h2> コピー .anchor-adjust { display: block; height: 80px; margin-top: -80px; visibility: hidden; } 見た目には何も表示されず、見出しの表示位置だけを調整できます。 解決方法3：htmlにscroll-padding-topを指定する（全体に一括適用） もっと手軽にページ全体のスクロール位置を補正したい場合は、htmlタグに対してscroll-padding-topを指定する方法があります。 コピー html { scroll-padding-top: 80px; scroll-behavior: smooth; } この方法では、すべての<a href="#id">に対して一括でスクロール位置を補正できます。サイト全体に反映されるため、最も手軽かつ強力な方法です。 補足：特定のidパターンにだけ適用したい場合 目次などの自動生成でid="toc-0"などが付与される場合、以下のように属性セレクタで限定的に指定できます。 コピー h2[id^="toc-"] { scroll-margin-top: 80px; } まとめ 個別に設定：scroll-margin-top（方法1） 細かく調整：ダミー要素による補正（方法2） 全体に一括：html { scroll-padding-top }（方法3・おすすめ） サイトの構成や使っているテーマによって最適な方法は異なりますが、scroll-padding-topはもっとも手軽でおすすめです。ぜひ試してみてください！

HTMLタグの属性を条件にスタイルを指定できる「CSS属性セレクタ」。クラス名やIDだけでは実現しにくい柔軟な指定ができるため、実務でも非常に役立つテクニックです。この記事では、CSS属性セレクタの基本構文から、よく使うパターン、実践例までをやさしく解説します。 属性セレクタの基本構文 CSS属性セレクタは、HTMLの属性をもとにスタイルを適用するセレクタです。構文は以下のようになります。 コピー 要素[属性名="値"] { /* スタイル */ } たとえば、<a target="_blank"> のようなリンクだけにスタイルを当てたいときに便利です。 よく使う5つの属性セレクタ 属性セレクタには、目的に応じて5種類の指定方法があります。 [attr]：属性がある要素すべて [attr="value"]：値が完全一致する要素 [attr^="value"]：値が「指定の文字列で始まる」要素 [attr$="value"]：値が「指定の文字列で終わる」要素 [attr*="value"]：値が「指定の文字列を含む」要素 使用例と具体的な使い方 target属性を持つリンクにだけスタイルを適用 コピー a[target] { color: red; text-decoration: underline; } target属性を持つすべてのリンクに赤い文字色を適用します。 画像URLが特定のパスで始まる場合 コピー img[src^="https://example.com/uploads/"] { border-radius: 8px; } 特定フォルダ内の画像だけに丸みをつける例です。 .pdfで終わるリンクだけアイコン表示 コピー a[href$=".pdf"] { background: url("pdf-icon.png") no-repeat left center; padding-left: 20px; } PDFリンクだけにPDFアイコンを表示します。 Twitterを含むリンクに色をつける コピー a[href*="twitter.com"] { color: #1DA1F2; } リンク先に"twitter.com"を含む場合、青色のリンクにします。 応用：idが「toc-」で始まる見出しに余白を追加 WordPressの目次機能などで、idがtoc-0やtoc-1のように付与された見出しにスクロール時の余白を追加する例です。 コピー h2[id^="toc-"] { scroll-margin-top: 80px; } 固定ヘッダーに見出しが隠れないようにするためのテクニックです。 初心者が気をつけたいポイント 属性の綴りミスに注意：正しくても指定が効かないときは属性名や値を再確認 属性値の動的変化に注意：JavaScriptで動的に変わる属性には即時反映されないことも クラス・IDと併用可能：属性セレクタとクラス名の併用で、より限定的な指定が可能 おわりに CSS属性セレクタを活用すれば、要素の属性によって柔軟にスタイルを指定できます。IDやクラスだけに頼らない設計ができるので、コードもスッキリ保てます。Web制作に慣れてきたら、ぜひ活用してみてください。 次回は、フォーム要素への属性セレクタ活用術や、JavaScriptと連携したスタイル制御なども紹介予定です。

SEO対策を始めたけれど、検索順位の変化をどうやって追えばいいかわからない…。そんな初心者におすすめなのが、検索順位チェックツール「GRC」です。 GRCはWindows専用のソフトですが、無料版でも十分に実用的で、サイト改善に役立つヒントが得られます。 GRCとは？ GRCは、特定のキーワードで自分のサイトが何位に表示されているかをチェックし、推移を記録してくれる検索順位チェックツールです。毎日の順位変動を確認できるため、SEO施策の効果を測るのに最適です。 無料版でできること URL1件まで登録可能 キーワード20件まで登録可能 Google・Yahoo!・Bingの順位取得に対応 グラフ表示や推移チェックもOK GRCのインストール方法 まずは公式サイトからGRCをダウンロードしてインストールします。 コピー https://seopro.jp/grc/ インストール後は、起動して以下の手順で初期設定を行いましょう。 サイトとキーワードの登録手順 GRCでは、まず「URL（サイト）」と「チェックしたいキーワード」を登録します。 メニュー「編集」→「項目新規追加」を選択 チェック対象のURL（例：https://www.hpbuild.net/）を入力 調べたいキーワードを1件ずつ入力 「実行」ボタンで順位を取得 これで登録完了です。次回からGRCを起動するだけで、自動的に順位を取得してくれます。 順位データの見方と分析ポイント 順位列： 現在の掲載順位 前回比： 前回の順位との差 グラフアイコン： 順位の推移をグラフで表示 特定のキーワードで順位が上がった記事や、落ち込んだ記事を把握することで、リライトや強化すべきポイントが見えてきます。 SEO改善に活かすチェックのコツ 圏外→20位以内： 検索に引っかかり始めた記事はチャンス 1位〜10位付近： タイトルやディスクリプションを微調整してCTR向上を狙う 順位が落ちた記事： 検索意図の変化や競合記事の出現に注意 初心者が覚えておきたいSEOの基本 検索意図を満たす内容か： ユーザーが知りたいことに答えている？ 見出し構造が明確か： H2/H3で情報を整理しよう キーワードを適切に配置： タイトル・冒頭・見出し・本文に自然に入れる 内部リンクを活用： 関連記事を適切につなぐと評価アップ まとめ GRCは、無料でも非常に実用的な検索順位チェックツールです。毎日の順位変動を確認することで、記事ごとの成長や改善のヒントを得ることができます。 「順位を確認する → 改善点に気づく → リライトする」このサイクルを回すことが、SEOの本質でもあります。まずはGRCを導入して、検索順位チェックを習慣にしてみましょう。