HPBUILD

WordPressでテーマをカスタマイズしたいと思ったとき、必ず登場するのがfunctions.phpです。 このファイルは「テーマに機能を追加するためのコード」を書き込む場所で、PHPの知識がなくてもコピペから始められる最初の一歩です。 この記事では、functions.phpの基本的な役割や子テーマで編集すべき理由、そして実際に使えるカスタマイズ例まで、初心者向けに丁寧に解説します。 functions.phpとは？ functions.phpは、WordPressテーマの中にあるファイルで、いわばテーマ専用の機能追加スクリプトです。 テーマに独自の機能を追加する 管理画面や投稿の見た目を調整する ショートコードやウィジェットなども定義可能 WordPressを「見た目だけでなく、機能面でも自分好みにしたい」と思ったら、このファイルが活躍します。 子テーマで編集する理由 functions.phpをカスタマイズするときは、必ず子テーマを使いましょう。その理由は： 親テーマのアップデートで上書きされない トラブルが起きたときに切り替えやすい 安心してコードを試せる 子テーマをまだ使っていない場合は、「WordPress 子テーマ 作り方」などで検索して最初に準備しておくのがおすすめです。 functions.phpの編集場所 WordPress管理画面から編集するには： 「外観」→「テーマファイルエディター」を開く 右側のファイル一覧から「functions.php」を選択 記述内容の末尾にコードを追加 既存のコードを削除しないよう注意しましょう。 基本のカスタマイズ例 試しに、投稿の抜粋（抜き出し）文字数を変更するコードを追加してみましょう。 コピー // 抜粋の文字数を50文字に変更 function custom_excerpt_length($length) { return 50; } add_filter('excerpt_length', 'custom_excerpt_length'); 保存すると、トップページなどの抜粋が50文字に調整されます。 functions.phpを編集するときの注意点 必ずバックアップをとる：コードにミスがあるとサイトが真っ白になることも 管理画面に入れなくなった場合：FTPソフトやサーバーパネルでfunctions.phpを修正 コードは確実に閉じる：}の閉じ忘れなどに注意 おわりに functions.phpは、テーマカスタマイズの入り口として非常に重要なファイルです。最初は不安かもしれませんが、コピペからでも十分に機能追加ができるのが魅力。 まずは子テーマを用意し、この記事で紹介したような基本コードから始めてみましょう。少しずつ慣れていくことで、より高度なWordPressカスタマイズにも挑戦できるようになります！

WordPressで技術系の記事を書いていると、HTMLやCSS、JavaScriptなどのコードを貼り付けたい場面がありますよね。 でも、単にコードをそのまま貼っても、見た目が整わず読みにくくなりがちです。 この記事ではプラグインを使わずに、WordPressで見栄えのよいコードブロックを表示する方法を紹介します。 コードを表示する基本のタグ まずはHTMLの基本的な構文を押さえましょう。 コピー <pre><code> ここにコードを記述 </code></pre> <pre>は改行や空白をそのまま表示し、<code>はコンピュータコードであることを示します。 WordPressで使うときの注意点 投稿エディターに直接<や>を打つと、HTMLとして解釈されてしまいます。以下のようにエスケープ（置き換え）する必要があります。 < → &lt; > → &gt; & → &amp; コードをきれいに表示するCSS テーマによってはコードがそのまま無装飾で表示されます。見やすく整えるために、CSSを追加しましょう。 コピー pre code { display: block; padding: 1em; background-color: #f4f4f4; border-left: 4px solid #3498db; overflow-x: auto; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.6; color: #333; } このCSSを外観 → カスタマイズ → 追加CSSに貼り付ければ、全体の見た目が整います。 テーマに合わせたクラスを追加する サイトのデザインに合わせて、枠や色を変更したい場合は独自クラスを付けて調整可能です。 コピー <pre class="my-code"><code> コード内容 </code></pre> その上で、CSSに以下を追加します： コピー .my-code { background-color: #2d2d2d; color: #eee; border-radius: 6px; } プラグイン不要のメリット サイトが軽くなる：余計なJavaScriptやCSSが読み込まれない 表示崩れが少ない：テーマに合わせて柔軟に調整可能 セキュリティ面でも安心：外部製の古いプラグインによる脆弱性リスクがない おわりに プラグインを使わなくても、<pre><code>タグとCSSを使えば、きれいなコードブロックを表示することができます。 エスケープ処理を忘れずに行い、テーマに合ったスタイルを適用するだけで、初心者でもすぐに実践できます。 技術ブログやメモ記事を書く方は、ぜひこの方法を取り入れて、読みやすく見やすい記事にしていきましょう！

WordPressの管理画面で、投稿一覧を見ていて「この記事、どのくらいのボリュームだろう？」と思ったことはありませんか？ 実は、投稿ごとの文字数を一覧に表示することができます。この記事では、functions.phpを使ったカスタマイズ方法を、初心者でもできるようにわかりやすく解説します。 完成イメージ 管理画面の「投稿一覧」に「文字数」というカラムが追加され、各記事の文字数が一目でわかるようになります。 手順1：子テーマのfunctions.phpを開く テーマを直接編集するとアップデート時に上書きされてしまうので、子テーマを使用していることを確認しましょう。WordPress管理画面から「外観」→「テーマファイルエディター」でfunctions.phpを開きます。 手順2：以下のコードを追記する コピー // 投稿一覧に「文字数」カラムを追加 function add_word_count_column($columns) { $columns['word_count'] = '文字数'; return $columns; } add_filter('manage_posts_columns', 'add_word_count_column'); // カラムに表示する文字数を取得 function show_word_count_column($column_name, $post_id) { if ($column_name === 'word_count') { $content = get_post_field('post_content', $post_id); $count = mb_strlen(strip_tags($content)); echo $count; } } add_action('manage_posts_custom_column', 'show_word_count_column', 10, 2); このコードでは、HTMLタグを除去した本文の文字数をカウントして表示しています。 応用：カスタム投稿タイプにも適用する たとえばnewsというカスタム投稿タイプにも表示させたい場合は、フィルター名を変更して追加します： コピー add_filter('manage_news_posts_columns', 'add_word_count_column'); add_action('manage_news_posts_custom_column', 'show_word_count_column', 10, 2); 注意点 テーマ更新で消えないように：子テーマのfunctions.phpに記述する 不要なときは削除できる：管理画面を壊す心配が少ない軽量なカスタマイズ プラグイン不要：管理画面の動作も軽く保てます おわりに 投稿一覧に文字数が表示されると、リライトやボリューム調整がとても効率的になります。 WordPressの管理画面を少しカスタマイズするだけで、運用のしやすさが大きく変わります。 今後もこうしたfunctions.phpの小ワザを取り入れて、便利な管理画面を作っていきましょう！

Webサイトで目立たせたい言葉があるとき、「マーカーで引いたような演出」があると便利ですよね。 実はこれ、CSSだけで簡単に実装できるんです。この記事では、CSSでマーカー風の文字装飾を作る方法を紹介します。 基本：背景色でマーカー風にする まずは一番シンプルな方法。backgroundプロパティで文字の背景に色をつけます。 コピー .marker { background: yellow; } この方法は簡単ですが、マーカーのような「下線寄りの塗り」は難しく、行の高さによって見た目が不自然になることもあります。 発展：linear-gradientで下部だけ塗る マーカーっぽい下部だけの装飾は、linear-gradientを使うと実現できます。 コピー .marker-gradient { background: linear-gradient(transparent 60%, #fce38a 60%); } 透明部分と色付き部分を60%ずつに区切り、文字の下半分だけを塗るような演出が可能になります。 複数行対応のマーカースタイル 複数行にまたがるテキストでマーカーを使いたい場合、少し工夫が必要です。 コピー .marker-multiline { background: linear-gradient(transparent 60%, #f9f871 60%); background-repeat: no-repeat; background-size: 100% 100%; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0.2em; } box-decoration-break: cloneを使うことで、行が折り返された場合でもマーカーが綺麗に続きます。 応用：選択時だけマーカー風にする テキスト選択時（ドラッグして反転したとき）にマーカー風の色を出すこともできます。 コピー ::selection { background: #ffe666; color: #000; } デフォルトの青い反転を、自サイトのカラーに合わせたマーカー風にカスタマイズ可能です。 初心者が気をつけたいポイント 背景色とのバランス：背景色と文字色が近すぎると読みにくくなるため、コントラストに注意 多用しすぎない：強調しすぎると読者がどこを見ればいいか迷ってしまう フォントサイズとの調整：小さすぎる文字だとマーカーが強すぎて不自然に見えることも おわりに CSSを使えば、シンプルなテキストでも強調演出や視線誘導が可能です。 マーカー風の装飾は、ちょっとした工夫で印象を変えられる便利なテクニック。ぜひ、見出しや注目キーワードに活用してみてくださいね。

Webサイトにアイコンを使いたいときに便利なのがFont Awesome（フォントオーサム）です。 矢印・電話・SNSロゴなど、豊富なアイコンを簡単に使える人気のライブラリです。この記事では、Font Awesomeの導入方法と基本的な使い方を初心者向けにわかりやすく解説します。 Font Awesomeとは？ Font Awesomeは、WebサイトにアイコンフォントやSVGアイコンを追加できる無料のライブラリです。 多くの開発者やデザイナーに利用されており、以下のようなアイコンを簡単に表示できます： ソーシャルメディア（Twitter, Instagram, Facebook など） UIアイコン（ハンバーガーメニュー、検索、ゴミ箱など） 視覚的な補助アイコン（チェック、注意、ハートなど） CDNでFont Awesomeを導入する 公式サイトから提供されているCDNを使えば、HTMLファイルに1行追加するだけでアイコンが使えるようになります。 コピー <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> </head> ※最新版のURLはFont Awesome公式サイト（fontawesome.com）で確認しましょう。 基本的なアイコンの使い方 アイコンを表示するには、<i>タグまたは<span>にクラス名を追加します。 コピー <i class="fa-solid fa-heart"></i> <i class="fa-solid fa-phone"></i> <i class="fa-brands fa-twitter"></i> クラスの種類： fa-solid：実線アイコン fa-regular：線画スタイル fa-brands：ブランドロゴ（Twitter, YouTubeなど） アイコンサイズを変更する サイズを変更したいときは、クラスで指定することができます。 コピー <i class="fa-solid fa-star fa-2x"></i> <i class="fa-solid fa-star fa-3x"></i> <i class="fa-solid fa-star fa-5x"></i> サイズ指定クラス（例：fa-2x, fa-3x）は、通常サイズの2倍・3倍…を意味します。 アイコンに色をつける アイコンは通常のテキストと同じようにCSSで色を変えられます。 コピー .fa-heart { color: red; } .fa-twitter { color: #1da1f2; } よく使うアイコン一覧 fa-solid fa-magnifying-glass（検索） fa-solid fa-envelope（メール） fa-brands fa-facebook（Facebook） fa-brands fa-line（LINE） 詳しくは公式の「アイコン一覧」を参照してください。 おわりに Font Awesomeを使えば、サイトに視覚的なアクセントを加えたり、ナビゲーションをわかりやすくできます。 無料で手軽に導入できるので、ぜひ積極的に使ってみてください。 次回は「SVG版Font Awesomeの使い方」や「WordPressでの導入方法」も紹介していきます！

WordPressでオリジナルテーマを使うと、SEO対策も自分で自由に調整できます。 今回は、基本的かつ効果の高いSEO対策10項目と、それぞれの具体的な実装方法を紹介します。 SEO対策10項目とその実装例 ① タイトルタグの自動出力 functions.php に以下を追加することで、<title>が自動出力されるようになります。 コピー add_theme_support('title-tag'); ② メタディスクリプションの追加 header.php 内の <head> タグ内に、以下のように記述します。 コピー <meta name="description" content="このサイトは、初心者向けにHTMLとCSSを解説しています。"> ③ セマンティックなHTML構造 セクションやコンテンツの役割ごとに適切なHTML5タグを使用します。 コピー <main> <section> <h2>サービス紹介</h2> <p>...</p> </section> </main> ④ hタグの適切な使い分け <h1>はページに1つだけ。見出し階層は論理的に。 コピー <h1>サイトのタイトル</h1> <h2>サービス紹介</h2> <h3>トリミングについて</h3> ⑤ 画像にalt属性を追加 画像の内容を伝えるテキストをalt属性に記述します。 コピー <img src="dog.jpg" alt="元気な保護犬の写真"> ⑥ パンくずリストの設置 ナビゲーションの一部として以下のように記述。構造化データにも使えます。 コピー <nav class="breadcrumb"> <a href="/">ホーム</a> > <a href="/blog/">ブログ</a> > <span>この記事のタイトル</span> </nav> ⑦ JSON-LD構造化データの追加 header.php に以下を挿入して、検索結果に情報を渡します。 コピー <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "HPBUILD", "url": "https://www.hpbuild.net" } </script> ⑧ 表示速度の改善（画像の遅延読み込み） functions.php に以下を追加して、画像のLazyLoadを有効にします。 コピー add_filter('wp_lazy_loading_enabled', '__return_true'); ⑨ モバイル対応 <head>内に以下のviewportタグを記述し、レスポンシブ対応をします。 コピー <meta name="viewport" content="width=device-width, initial-scale=1.0"> ⑩ SEOプラグインの導入 All in One SEOやYoast SEOをインストールすると、タイトル・メタ情報・構造化データなどをGUIで設定可能になります。 コピー プラグイン > 新規追加 > 「All in One SEO」または「Yoast SEO」で検索してインストール まとめ オリジナルテーマだからこそ、SEO対策も自分の手で柔軟に調整できます。まずは①〜⑤の基本対策から着手し、⑥〜⑩へと段階的に進めていくと無理なく実装できます。 次回は「SEOスコアを上げるLighthouse対策」や「検索結果に目立つ構造化データ活用法」について解説予定です。

JavaScriptで外部データを読み込んで、ページ内に表示したい──そんなときに使えるのがFetch APIです。この記事では、外部のJSONデータを取得し、記事リストをHTML上に動的に表示する基本の使い方を初心者向けにやさしく解説します。 Fetch APIとは？ fetch()は、ネットワーク越しにリソース（JSON、HTML、画像など）を非同期で取得できるJavaScriptの機能です。従来のXMLHttpRequestよりも記述がシンプルで、現在では主流の方法となっています。 このAPIを使うことで、例えば「記事一覧を読み込む」「フォームの入力を送信する」「検索結果を絞り込む」など、Webページをよりインタラクティブに動かせるようになります。 前提：JSONファイルの例 ここでは、以下のような記事一覧を含んだJSONファイルを用意したとします。 コピー [ { "title": "CSS Flexbox入門", "url": "https://example.com/flexbox" }, { "title": "HTMLフォームの基本", "url": "https://example.com/form" } ] HTML構造（表示する場所） 取得したデータを表示するため、HTMLにリストの受け皿となる<ul>要素を準備しておきます。 コピー <ul id="article-list"></ul> JavaScriptでデータ取得＆表示 JavaScriptでfetchを使ってJSONを取得し、リスト表示してみましょう。 コピー document.addEventListener("DOMContentLoaded", () => { const list = document.getElementById("article-list"); fetch("articles.json") .then(response => { if (!response.ok) throw new Error("読み込み失敗"); return response.json(); }) .then(data => { data.forEach(article => { const li = document.createElement("li"); const a = document.createElement("a"); a.href = article.url; a.textContent = article.title; li.appendChild(a); list.appendChild(li); }); }) .catch(error => { list.innerHTML = "<li>データの読み込みに失敗しました。</li>"; console.error("エラー:", error); }); }); 初心者が注意すべきポイント 初めてFetch APIを使う際には、以下の点に気をつけるとスムーズです： ファイルパスの確認： 相対パスやファイル名の誤りがよくある原因 CORSエラー： 別ドメインのデータを取得する場合、サーバー側の設定が必要 ローカル環境の制限： fetchはセキュリティ上、file://では動作しないことがあるため、ローカルサーバーで動かすのがおすすめ ポイントまとめ 非同期でデータを取得 → ページ読み込み後にリスト表示 エラーハンドリング → 通信エラー時のフォールバック表示も重要 ループでDOM生成 → 配列を使って複数の要素を自動で追加 応用例 今回紹介した基本を応用すれば、以下のような発展的な使い方も可能です。 WordPressのREST APIから最新記事を取得して表示 検索ワードによるフィルターや絞り込み機能の実装 「もっと見る」ボタンによるページネーション ローディング中のスピナーやアニメーションの表示 おわりに Fetch APIを活用すれば、静的なページでも動的なコンテンツ表示が簡単に実現できます。まずはJSONの読み込みから始めて、徐々に外部APIやCMSとの連携など、より実践的な応用にも挑戦してみてください。 エラー処理やDOM操作をしっかり理解することで、より柔軟でユーザーに優しいWebページが作れるようになりますよ！

Webサイトを操作していると、スクロールに応じてヘッダーが固定されたり、背景色が変わったりするUIをよく見かけますよね。この記事では、JavaScriptを使ってその仕組みを実装する方法を解説します。 実装イメージ ヘッダーが画面上部に固定される スクロールすると背景色が切り替わる ページトップでは透明、スクロール後は色付き背景に HTML構造 コピー <header id="site-header"> サイトのヘッダー </header> <main> <p>ここにメインコンテンツが入ります。</p> </main> CSSで基本の固定スタイルを指定 コピー #site-header { position: fixed; top: 0; width: 100%; padding: 1em; transition: background-color 0.3s; z-index: 1000; } #site-header.transparent { background-color: transparent; } #site-header.solid { background-color: #333; color: white; } JavaScriptで背景色を切り替える コピー document.addEventListener("DOMContentLoaded", () => { const header = document.getElementById("site-header"); const updateHeader = () => { if (window.scrollY > 50) { header.classList.remove("transparent"); header.classList.add("solid"); } else { header.classList.remove("solid"); header.classList.add("transparent"); } }; window.addEventListener("scroll", updateHeader); updateHeader(); // 初期状態を確認 }); 補足：ヘッダーの下に余白を作る 固定ヘッダーの分だけ、mainに余白を追加するのを忘れずに！ コピー main { margin-top: 80px; /* ヘッダーの高さに応じて調整 */ } おわりに この方法を使えば、ヘッダーの存在感をコントロールしてユーザー体験を高めることができます。アニメーションやスクロール量による変化も組み合わせれば、さらに高度な演出も可能です。 次回は「スクロール量に応じて要素をフェードインさせる方法」もご紹介予定です！