HPBUILD

「できるだけコードをシンプルにしたい」「JavaScriptなしでメニューを切り替えたい」そんな方におすすめなのが、CSSだけで作れるハンバーガーメニューです。今回は、HTMLとCSSだけで完結する実装方法を紹介します。 HTML構造を用意する チェックボックスとラベルを活用して、クリック時の状態を制御します。 コピー <input type="checkbox" id="menu-toggle" hidden> <label for="menu-toggle" class="hamburger"> <span></span> <span></span> <span></span> </label> <nav class="nav-menu"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">サービス</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> CSSで表示・非表示を切り替える ラベルがクリックされるとチェック状態が変わり、それに応じてメニューの表示を切り替えます。 コピー .hamburger { display: flex; flex-direction: column; width: 30px; height: 22px; justify-content: space-between; cursor: pointer; } .hamburger span { height: 4px; background: #333; border-radius: 2px; } .nav-menu { display: none; } #menu-toggle:checked + .hamburger + .nav-menu { display: block; } レスポンシブ対応 PC画面では常にメニューを表示し、スマホではハンバーガーに切り替えます。 コピー @media (min-width: 768px) { .hamburger { display: none; } .nav-menu { display: block !important; } } 初心者が気をつけたいポイント labelとinputのid・forの対応：一致していないとクリックが効かない 選択状態を使うため、必ずinputはhiddenで保持：画面に表示しないよう注意 +セレクタの順番：input + label + navの順でないと動作しません おわりに JavaScriptなしでも、CSSの工夫でメニュー開閉を実現できます。アニメーションやスライド効果を加えれば、より洗練された印象に。次回はCSSトランジションやtransformを使ったアニメーションバージョンも紹介予定です！

スマホサイトでよく見る「三本線アイコン」。それが、ハンバーガーメニューと呼ばれるナビゲーションメニューです。今回は、HTML・CSS・JavaScriptを使って、シンプルに作る方法を初心者向けに解説します。 基本となるHTML まずは、メニューアイコンとメニューリストのHTML構造を用意します。 コピー <header> <div class="hamburger"> <span></span> <span></span> <span></span> </div> <nav class="nav-menu"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">サービス</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> </header> CSSで見た目を整える 三本線の見た目と、メニューの非表示をCSSで調整します。 コピー .hamburger { width: 30px; height: 22px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; } .hamburger span { display: block; height: 4px; background-color: #333; border-radius: 2px; } .nav-menu { display: none; } .nav-menu.active { display: block; } JavaScriptで開閉を制御 クリックイベントでクラスを付け替え、メニューを開閉します。 コピー const hamburger = document.querySelector('.hamburger'); const navMenu = document.querySelector('.nav-menu'); hamburger.addEventListener('click', () => { navMenu.classList.toggle('active'); }); レスポンシブ対応を加える PC画面では常にメニューを表示し、スマホではハンバーガー形式に切り替えるようにしましょう。 コピー @media (min-width: 768px) { .hamburger { display: none; } .nav-menu { display: block !important; } } 応用：開閉にアニメーションをつける CSSのtransitionを使えば、メニューがふわっと開くような演出もできます。 コピー .nav-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .nav-menu.active { max-height: 300px; /* 適切な高さに調整 */ } 初心者が気をつけたいポイント class名のミスに注意：JavaScriptとHTMLで同じクラス名を使っているか確認 クリックが反応しないとき：scriptが正しく読み込まれているか、エラーがないか確認 スマホ表示確認：開閉動作やレイアウト崩れがないか実機でも確認しましょう おわりに ハンバーガーメニューはモバイル対応の基本機能。HTML・CSS・JavaScriptの基礎を組み合わせれば、簡単に作れるようになります。自分のサイトにあわせてアニメーションやデザインをカスタマイズするのも楽しいですよ！ 次回は、CSSだけで作れる「JavaScript不要のハンバーガーメニュー」も紹介予定です。お楽しみに！

WordPressは世界中で多くの人に使われている人気のCMSですが、その人気ゆえにスパムやハッキングの標的になりやすいという側面もあります。 「突然、サイトが別のページにリダイレクトされるようになった」「管理画面にログインできない」「謎のリンクが勝手に記事に挿入されている」…こういったトラブルは、外部からの攻撃やマルウェア感染が原因の可能性があります。 この記事では、WordPressを安全に運用するために、最低限やっておきたい予防対策をわかりやすく解説します。 よくある被害例 サイトが別のドメインに転送される 管理画面が乗っ取られてログインできない 怪しいリンクやスクリプトが記事に挿入される Googleの検索結果で「このサイトは危険です」と警告が表示される WordPressの基本的なセキュリティ対策 これから紹介する対策を実施することで、ほとんどの攻撃を未然に防ぐことが可能です。 1. WordPress本体・テーマ・プラグインを常に最新に セキュリティの穴は、古いバージョンに存在していることが多いです。更新がある場合は、できるだけ早く反映しましょう。 2. 強力なログインパスワードを使用する 「admin」「123456」などの簡単なパスワードはNG。英数字・記号を組み合わせた12文字以上のパスワードが推奨されます。 3. ログインページの保護 ログイン試行制限（例：Limit Login Attempts Reloaded） reCAPTCHA導入でボットをブロック ログインURLの変更（wp-login.phpから変更） 4. セキュリティ系プラグインを導入 以下のようなプラグインを入れておくと、かなり安全性が高まります。 Wordfence Security（総合的なセキュリティ対策） All In One WP Security & Firewall（初心者にも使いやすい） Sucuri Security（ファイアウォールや監視機能） 5. 管理者権限のアカウントを必要以上に増やさない 複数人で運用する場合でも、管理者権限は最小限にし、編集者や投稿者など適切な権限に制限しましょう。 6. 定期的なバックアップの実施 万が一感染・改ざんされた場合に備えて、自動でバックアップを取得しておくのが重要です。 BackWPup（無料・簡単） UpdraftPlus（Googleドライブ等に保存可能） 7. サーバー側での対策 信頼できるレンタルサーバーを使い、WAF（Web Application Firewall）やウイルススキャンが有効化されているか確認しましょう。 攻撃を受けたかも…と思ったときの対処 WordPressファイルを再インストール テーマやプラグインの中身を確認し、不審なコードがないか調べる セキュリティプラグインでマルウェアスキャンを実行 過去の安全な状態にバックアップから復元 対処が難しい場合は、専門の業者やサーバー会社に相談しましょう。 まとめ WordPressは便利で柔軟な反面、セキュリティ対策を怠ると簡単に攻撃されてしまいます。 本記事で紹介した基本の対策をしっかりと実施し、「被害にあってから後悔」するのではなく、「未然に防ぐ」ことが大切です。 「まだ何も対策していない」という方は、ぜひ今日から始めてみてください。

WordPressで「お問い合わせフォーム」を作るとき、プラグインを使う方法が定番ですが、自作テーマ内で完結したシンプルな方法もあります。 この記事では、プラグインを使わずにHTML＋PHPでメール送信できるフォームの作り方と、セキュリティに重要なsanitize_xxx()関数の解説もあわせて紹介します。 まずはフォームをHTMLで作成 以下のコードを、お問い合わせページ用テンプレートなどに追加します： <form method="post"> <p> お名前：<br> <input type="text" name="your_name" required> </p> <p> メールアドレス：<br> <input type="email" name="your_email" required> </p> <p> お問い合わせ内容：<br> <textarea name="your_message" rows="5" required></textarea> </p> <p> <input type="submit" name="submit_form" value="送信"> </p> </form> functions.phpに送信処理を追記 フォームが送信されたときにメールが送信されるよう、functions.phpに以下のコードを追加します。 function my_contact_form_handler() { if (isset($_POST['submit_form'])) { $name = sanitize_text_field($_POST['your_name']); $email = sanitize_email($_POST['your_email']); $message = sanitize_textarea_field($_POST['your_message']); $to = get_option('admin_email'); // 管理者宛に送信 $subject = '【お問い合わせ】' . $name; $headers = 'From: ' . $email; wp_mail($to, $subject, $message, $headers); echo '<p>お問い合わせを受け付けました。</p>'; } } add_action('wp_head', 'my_contact_form_handler'); sanitize_xxx()ってなに？ sanitize_xxx()とは、ユーザーが入力したデータを安全に処理するためのWordPress標準関数です。 フォームから送信されるデータには、意図的に不正なコード（JavaScriptやHTMLタグなど）が混入する可能性があります。 それを防ぐために、不要なタグや記号を削除・整形してくれるのがsanitize_xxx()シリーズです。 主なサニタイズ関数の例 sanitize_text_field() → 改行やタグ、余分な空白などを削除して、1行のテキストにする sanitize_email() → 入力が正しいメール形式かチェック。不正なメールなら空文字に sanitize_textarea_field() → 改行を含む複数行テキスト向け。悪意あるスクリプトを除去 これらはすべてのフォームに基本的に必須です！ 送信先のメールアドレスはどこ？ 以下の部分： $to = get_option('admin_email'); ここで指定されている「admin_email」は、WordPress管理画面の： 設定 > 一般 > 管理者メールアドレスに登録されているものです。 自分で指定したい場合は： $to = 'your@email.com'; のように直接書いてもOKです。 セキュリティ面の注意点 必ずsanitize_xxx()で入力値を処理しましょう HTMLメールにしたい場合はheadersを調整（text/html） reCAPTCHA（Google）導入でスパム防止も可能 おわりに このように、WordPressの機能を活かしてシンプルかつ安全なお問い合わせフォームを自作することができます。 プラグインなしで実現できるため、サイトの表示速度にも有利です。 今後は、自動返信メールや入力確認画面の追加など、発展編も紹介していく予定です！

functions.phpにコードを追加するとき、「どこに書けばいいのか分からない」と悩んだ経験はありませんか？ この記事では、functions.phpの追記位置に迷わないための基本ルールと、おすすめの記述スタイルを初心者向けに紹介します。 functions.phpの役割を再確認 functions.phpは、テーマに追加したいPHPベースの機能（関数）をまとめる場所です。 WordPressのテーマを読み込む際にこのファイルが実行され、メニュー登録・ウィジェット・CSS/JSの読み込みなどが反映されます。 追記位置に迷う原因 初心者が追記に迷う主な理由は： どのコードがどの機能なのか分かりづらい 似た関数が並んでいて、分類があいまい コメントがなく、どこに追加すべきかの目印がない おすすめの書き方ルール 以下のルールをもとに整理して記述すれば、あとから見返しても理解しやすくなります。 ① 機能ごとに「見出しコメント」をつける 目的別に分類すると、どこに何を書くかが明確になります。 // ---------------------------- // メニュー関連の設定 // ---------------------------- function register_my_menu() { register_nav_menus([ 'main-menu' => 'メインメニュー', ]); } add_action('after_setup_theme', 'register_my_menu'); // ---------------------------- // CSS・JSの読み込み // ---------------------------- function my_theme_scripts() { wp_enqueue_style('style', get_stylesheet_uri()); } add_action('wp_enqueue_scripts', 'my_theme_scripts'); ② 追加コードは「似た機能の近く」に書く たとえば「管理画面をカスタマイズするコード」は、同じような管理系のコードと並べて配置しましょう。 ③ 下のほうに「一時保管エリア」を作るのもアリ 試しに動かしてみたいコードや、用途が未定のコードは下部にまとめておくと安全です。 ④ エラー対策のため「PHP文法」にも注意 functions.phpは1つのPHPファイルです。開きタグ（<?php）を重ねない、セミコロン忘れに注意など、文法ミスを防ぎましょう。 追記例：正しい順番で記述 <?php // ---------------------------- // テーマの初期設定 // ---------------------------- add_theme_support('post-thumbnails'); add_theme_support('title-tag'); // ---------------------------- // メニュー登録 // ---------------------------- function my_theme_menus() { register_nav_menus(['main' => 'メインメニュー']); } add_action('after_setup_theme', 'my_theme_menus'); // ---------------------------- // スクリプト読み込み // ---------------------------- function enqueue_my_scripts() { wp_enqueue_style('style', get_stylesheet_uri()); } add_action('wp_enqueue_scripts', 'enqueue_my_scripts'); おわりに functions.phpの追記位置に迷ったときは、まず機能ごとに整理された構成を意識しましょう。 コメントで区切るだけでも可読性は大幅にアップします。 将来的に複雑なfunctions.phpを扱うときにも、大きな助けになります。 次回は、複雑になってきたfunctions.phpを外部ファイルに分割する方法もご紹介予定です！

WordPressテーマに機能を追加したいとき、よく使われるのがfunctions.phpというファイルです。 この記事では、functions.phpの役割・書き方・初心者でもすぐ試せる便利なコード例を紹介します。 functions.phpとは？ functions.phpは、テーマ内に置く機能追加用のPHPファイルです。 WordPressの動作に影響を与えるコードを自由に追加できます。 たとえば： メニューの登録 サムネイル画像の設定 CSS・JSの読み込み 管理画面のカスタマイズ 設置場所と基本の書き方 テーマフォルダ（例：wp-content/themes/mytheme/）内にfunctions.phpという名前で設置します。 最初はこのように書き始めておくと安全です： コピー <?php // ここに機能追加コードを書いていきます 便利なカスタマイズ例 ① ナビゲーションメニューを有効化 管理画面でメニュー編集ができるようになります。 function register_my_menus() { register_nav_menus([ 'main-menu' => 'メインメニュー', ]); } add_action('after_setup_theme', 'register_my_menus'); ② アイキャッチ画像を有効化 投稿画面で「アイキャッチ画像」が使えるようになります。 add_theme_support('post-thumbnails'); ③ CSSやJavaScriptの読み込み style.cssやJSファイルを読み込む記述もここにまとめます。 function add_theme_scripts() { wp_enqueue_style('main-style', get_stylesheet_uri()); wp_enqueue_script('main-js', get_template_directory_uri() . '/script.js', [], false, true); } add_action('wp_enqueue_scripts', 'add_theme_scripts'); ④ 管理画面から不要な項目を非表示に ダッシュボードの不要なウィジェットを削除できます。 function remove_dashboard_widgets() { remove_meta_box('dashboard_quick_press', 'dashboard', 'side'); } add_action('wp_dashboard_setup', 'remove_dashboard_widgets'); 注意点：直接編集は慎重に functions.phpはPHPファイルなので、文法ミスがあると画面が真っ白になってしまうことがあります。 必ず子テーマで編集する テスト環境やローカル環境で先に試す 編集前にバックアップを取る おわりに functions.phpを活用すれば、プラグインを使わずにちょっとしたカスタマイズや便利機能をテーマに追加できます。 「こういう機能があればいいのに…」という場面で、functions.phpはとても頼れる存在です。 少しずつ慣れて、WordPressの可能性を広げていきましょう！

前回の記事で「自作テーマの基本的な作り方」を学んだ方は、次にテンプレート階層を理解すると、より柔軟なテーマ開発ができるようになります。 この記事では、WordPressのテンプレート階層（Template Hierarchy）の仕組みと、代表的なテンプレートファイルの役割を初心者向けに解説します。 テンプレート階層とは？ WordPressには「どのページを表示するか」に応じて、読み込むテンプレートファイルを自動で切り替える仕組みがあります。 この優先順位のルールのことをテンプレート階層と呼びます。 テンプレート階層の例 たとえば「投稿ページ（投稿ID: 10）」が表示されるとき、WordPressは以下の順番でテンプレートを探します： single-post-10.php single-post.php single.php singular.php index.php 上から順にファイルがあるか確認し、最初に見つかったファイルが使用されます。 よく使うテンプレートファイル一覧 ファイル名用途 index.phpすべてのページの最後の fallback（最低限必要） home.php記事一覧（設定でフロントにも使える） single.php投稿（投稿タイプ：post）の詳細ページ page.php固定ページの表示用 archive.phpカテゴリ・タグ・日付アーカイブなどの一覧 category.php特定のカテゴリーページ search.php検索結果ページ 404.phpページが見つからない場合のエラーページ テンプレート階層を意識するメリット ページごとに見た目を変えられる（例：カテゴリーページごとにデザイン変更） カスタマイズ性が高まる（single.php・page.phpなどで分岐可能） 不要な条件分岐を減らせる（役割をファイルに分担できる） 補足：get_template_part() で共通パーツを分けよう テンプレート階層を整理するには、get_template_part()でパーツを分けるのも有効です。 コピー <?php get_template_part('template-parts/content', 'page'); ?> 上記のように記述すると、template-parts/content-page.phpが読み込まれます。 おわりに テンプレート階層を知ることで、WordPressテーマの自由度と柔軟性は一気に高まります。 カスタム投稿タイプや条件分岐を使いこなす前に、この仕組みを理解しておくと非常に役立ちます。 次回は、「functions.phpを使って便利な機能を追加する方法」もご紹介しますのでお楽しみに！

WordPressを使っていると、「もっと便利に使いたい」「この機能がほしい」と思うことがありますよね。 そんなときに役立つのがプラグインです。 この記事では、プラグインの導入方法から、目的別のおすすめプラグイン、導入時の注意点まで、初心者でも安心して読めるように丁寧に解説します。 プラグインとは？ プラグインとは、WordPressに新たな機能を追加する「拡張パーツ」です。 例えば、セキュリティ対策、バックアップ、SEO最適化、お問い合わせフォームの追加など、サイトに必要な機能の多くはプラグインで実現できます。 プラグインの導入手順（インストール方法） プラグインは管理画面から簡単に導入できます。 WordPressにログイン 左メニューの「プラグイン」→「新規追加」をクリック 画面上部の検索窓にプラグイン名やキーワードを入力 該当プラグインの「今すぐインストール」をクリック 続いて「有効化」ボタンを押せば完了！ また、zipファイルをアップロードして導入することも可能です（「プラグイン」→「新規追加」→「プラグインのアップロード」から）。 初心者におすすめのプラグイン【ジャンル別まとめ】 🔐 セキュリティ対策 SiteGuard WP Plugin：ログインURLの変更や通知機能など、日本語対応の強力な保護機能 Limit Login Attempts Reloaded：ログイン失敗の制限でブルートフォース攻撃を防止 📈 SEO対策 All in One SEO：タイトル・ディスクリプションの設定、XMLサイトマップなどを一括管理 XML Sitemaps：検索エンジンにサイト構造を正確に伝えるためのサイトマップ生成 🧾 お問い合わせフォーム Contact Form 7：カスタマイズ自由なお問い合わせフォームを簡単に追加 Flamingo：Contact Form 7と連携して、送信データをWordPress内に保存 💾 バックアップ BackWPup：WordPressデータの自動バックアップ、DropboxやGoogle Driveにも保存可能 ⚡ 表示速度・キャッシュ WP Super Cache：静的HTMLを生成してサイト表示を高速化 Autoptimize：CSSやJavaScriptを自動で圧縮・結合し、ページ表示を軽量化 📋 記事構造サポート Table of Contents Plus：自動で目次を生成。SEOやユーザビリティにも貢献 Advanced Editor Tools：投稿画面の編集機能を拡張。表作成や見出し設定も簡単に プラグイン選びのポイント 最終更新日が新しいか：古いものは非対応の可能性がある 有効インストール数が多いか：人気・信頼性の目安になる 星の評価：レビューの評価も重要（4.5以上が目安） 目的が重複しない：似た機能のプラグインは競合・不具合の原因になる 入れすぎに注意！ プラグインを入れすぎると、サイトが重くなったり、互換性のトラブルが起きたりします。 本当に必要なものだけを厳選し、不要になったプラグインは無効化→削除しましょう。 おわりに プラグインを使えば、WordPressを自由に拡張・強化できます。 特に初心者のうちは、難しいコードなしで機能を増やせるのでとても便利。 まずは本記事で紹介したおすすめプラグインを導入し、快適なWordPress運用を始めましょう！