HPBUILD

Prism.jsは軽量で使いやすいシンタックスハイライトライブラリですが、最初に読み込んだときに含まれていない言語をあとから追加したい場面もあります。 この記事では、途中から言語を追加する2つの方法と、ファイル差し替え時の注意点について初心者向けにわかりやすく解説します。 1. Prism.jsは「必要な言語だけ」を読み込む設計 Prism.jsは読み込みを高速にするため、初期状態ではHTMLやCSSなど一部の言語しか含まれていません。 追加で使用したい言語（例：PHP、Pythonなど）がある場合は、自分でファイルを追加する必要があります。 2. CDNであとから言語を追加する方法 Prism公式CDNでは、各言語用の `.js` ファイルが用意されています。 📌 例：PHPをあとから追加する コピー <script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-php.min.js"></script> <script>Prism.highlightAll();</script> 注意： Prism本体（prism.js）より後に読み込む必要があります。 3. Downloadページからファイルを差し替える方法 複数の言語をまとめて管理したい場合は、Prism.js公式ダウンロードページから必要な言語を選び直してファイルを再生成します。 ✅ 再ダウンロード時の注意点 今まで使っていた言語も必ず選び直す必要があります。 選び忘れると、以前ハイライトされていた言語が無効になることがあります。 CSS・JSともに古いファイルは差し替え（上書き）します。 📥 ダウンロード手順 公式ダウンロードページを開く 必要な言語（今まで使っていた＋今回追加したいもの）をチェック Download JSとDownload CSSをクリック ダウンロードしたファイルを自作テーマ内の `js/` や `css/` に配置 既存のファイル（prism.js, prism.css）は上書き コピー <link rel="stylesheet" href="css/prism.css"> <script src="js/prism.js"></script> <script>Prism.highlightAll();</script> 4. 動的に追加された要素に対応させる Ajaxなどで後から挿入されたコードブロックは、自動でハイライトされません。 その場合は次のように明示的に適用します。 コピー const newCode = document.querySelector('pre code.language-php'); Prism.highlightElement(newCode); 5. よくある注意点 読み込み順： 本体 → 言語 → highlightAll() の順に CSSを編集している場合： 上書き前にバックアップ 同じ言語を複数回読み込まない： 動作不安定の原因になります おわりに Prism.jsで途中から言語を追加したい場合は、CDNで読み込む方法と再ビルドして差し替える方法があります。 特に後者の場合は「使っていた言語を忘れずに再選択する」ことと「ファイルの差し替え」に注意しましょう。 プロジェクトの規模や管理のしやすさに応じて、どちらかを使い分けてください。

記事一覧ページで「1 / 2 / 3 … 次へ」といったページ送り（ページネーション）を表示したいとき、自作テーマでは自分で組み込む必要があります。今回は、初心者向けにWordPressテーマでページネーションを表示する方法をわかりやすく解説します。 まずは functions.php にテンプレート関数を用意 ページネーションの出力処理を関数化しておくと、管理しやすくなります。 コピー function my_custom_pagination() { global $wp_query; $big = 999999999; echo paginate_links(array( 'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))), 'format' => '?paged=%#%', 'current' => max(1, get_query_var('paged')), 'total' => $wp_query->max_num_pages, 'mid_size' => 2, 'prev_text' => '« 前へ', 'next_text' => '次へ »', )); } 表示させたい位置に関数を呼び出す 記事一覧を表示しているテンプレート（例：index.phpやarchive.php）の下部に次のコードを追加します。 コピー <?php if (function_exists('my_custom_pagination')) { my_custom_pagination(); } ?> CSSで見た目を整える（例） 出力されたページ番号には.page-numbersなどのクラスがついています。以下のように装飾できます。 コピー .page-numbers { display: inline-block; padding: 6px 12px; margin: 4px; background: #eee; color: #333; text-decoration: none; } .page-numbers.current { background: #333; color: #fff; } .page-numbers:hover { background: #555; color: #fff; } 注意点：クエリをカスタマイズしている場合 WP_Queryを使ってカスタムループをしている場合は、'total'に手動で$query->max_num_pagesを指定する必要があります。 コピー <?php $my_query = new WP_Query(array( 'post_type' => 'post', 'paged' => get_query_var('paged') ? get_query_var('paged') : 1 )); if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); the_title(); endwhile; echo paginate_links(array( 'total' => $my_query->max_num_pages )); endif; wp_reset_postdata(); ?> 初心者がつまずきやすいポイント query_posts を使っていると paginate_links が正しく動かない カスタムクエリ使用時は max_num_pages を明示的に指定 CSSでリンクをボタン風に整えるとクリックしやすくなる おわりに ページネーションがあると記事一覧のナビゲーションがしやすくなり、SEOやユーザー体験の面でも効果的です。 自作テーマでも、数行のコードで実装できるので、ぜひ取り入れてみてください。

文字が背景に埋もれて読みにくいとき、便利なのがテキストの縁取り（アウトライン）です。CSSだけで簡単に文字のまわりに縁をつけることができます。今回は基本から応用まで、初心者向けにわかりやすく解説します。 基本：text-shadowを使った縁取り もっとも簡単な方法は、text-shadowを4方向に重ねて、文字のまわりに影をつける方法です。 コピー .outlined-text { color: white; text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; } 応用：太めの縁取りをしたい場合 縁取りをより目立たせたいときは、さらに多方向に text-shadow を重ねます。 コピー .outlined-bold { color: yellow; text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black, 0px -2px 0 black, 0px 2px 0 black, -2px 0px 0 black, 2px 0px 0 black; } 別の方法：-webkit-text-stroke + text-shadow を併用 Webkit系ブラウザ（Chrome、Safari）で使える -webkit-text-stroke を使うと、より滑らかで太い縁が作れます。 ただし、Firefoxなどでは非対応のため、フォールバックとして text-shadow を一緒に使うのがおすすめです。 コピー .stroke-combo { color: white; -webkit-text-stroke: 2px black; text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; } このように書くと、Chromeでは -webkit-text-stroke が使われ、Firefoxでは text-shadow が働いて、両方のブラウザで美しい縁取りが表示されます。 実用例：背景画像の上の見出しに 背景に写真や色があると、テキストが読みにくくなることがあります。 そんなときにこの縁取りを使えば、テキストがくっきり目立つようになります。 初心者が気をつけたいポイント 縁の色と文字色のコントラストをしっかりつける 小さい文字には向かない：縁がつぶれて読みにくくなることがあります スマホ表示では太すぎる縁取りは避ける（メディアクエリで調整してもOK） おわりに CSSでテキストに縁取りを加えることで、視認性を高めたり、見た目のインパクトを出すことができます。 さまざまなサイトやデザインのアクセントとして、ぜひ活用してみてください！ 次回は、グラデーション文字やアニメーション文字など、さらにデザイン性を高めるテクニックを紹介予定です！

「もっと自由に、きれいにレイアウトしたい！」と思ったことはありませんか？ そんなときに役立つのが、CSSグリッドレイアウトです。 グリッドは、要素を“行と列”に分けて、キレイに並べることができるレイアウト方法です。 難しそうに見えるかもしれませんが、ポイントを押さえれば初心者でもすぐ使えるようになります！ CSSグリッドとは？ CSSグリッドは、ページの中の要素を「マス目状（グリッド）」に配置するための方法です。 上から下、左から右へ、2方向に自由にレイアウトできるのが特徴です。 たとえば、3つの写真やカードを横に並べたいとき、Flexboxでは1列にしか配置できませんが、グリッドなら「2列 × 2行」なども簡単にできます。 基本のグリッドレイアウト まずは3つのボックスを横並びに表示する基本コードです。 コピー<div class="grid-container"> <div>1</div> <div>2</div> <div>3</div> </div> コピー.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } display: grid;でグリッドレイアウトを有効にします。 grid-template-columnsは「横の列数と幅」を決めるプロパティです。 ここでは 1fr を3つ並べることで、「幅を3等分した3列レイアウト」になります。 gapは、マス目とマス目のあいだのすき間（余白）を指定しています。 応用1：エリア名でわかりやすく配置 もっと複雑なレイアウトをしたいときは、grid-template-areas を使って名前でエリアを指定できます。 コピー.grid-container { display: grid; grid-template-areas: "header header" "sidebar content"; grid-template-columns: 1fr 3fr; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } このように書くと、ページの構造を名前でわかりやすく整理できます。特にブログのレイアウトなどに便利です。 応用2：画面サイズに合わせて自動調整 レスポンシブ対応も簡単にできます。カードやボックスを、画面が広いときは複数列、狭いときは1列に並べたいときに便利です。 コピー.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } auto-fitで「入るだけ列を増やす」、minmaxで「最小幅200px・最大で広がる」ように設定しています。 スマホでもPCでも、見た目が自然になる便利な書き方です。 初心者がつまずきやすいポイント grid-container と中の要素（子要素）をセットで考える grid-template-columnsやgrid-areaなどは、綴りを間違えないように 行・列のすき間には gap を使うと簡単 おわりに CSSグリッドを使えば、見た目も整って、スマホ対応もやりやすくなります。最初は「むずかしそう…」と思うかもしれませんが、何度か試せばすぐに慣れてきます！ 次回は、グリッドとFlexboxの違いや、実践的なレイアウト例も紹介予定ですので、ぜひご覧ください！

「できるだけコードをシンプルにしたい」「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の機能を活かしてシンプルかつ安全なお問い合わせフォームを自作することができます。 プラグインなしで実現できるため、サイトの表示速度にも有利です。 今後は、自動返信メールや入力確認画面の追加など、発展編も紹介していく予定です！