この記事のまとめ
Contents
- WordPressの「カスタムHTMLブロック」は、インラインCSSとJavaScriptを直接書けるため、テーマ編集やプラグイン追加なしにページ固有のデザインを実現できます
- CSSグリッドを使ったタイル状レイアウトは、
display:gridとgrid-template-columnsの組み合わせだけで構成できます - WordPress REST APIの
/wp-json/wp/v2/postsエンドポイントに_embedパラメータを付けることで、カテゴリ別の最新記事をアイキャッチ画像つきで動的取得できます - ページ固有のCSSは、カスタムHTMLブロックに
<style>タグで書くことでそのページだけに適用されます - REST APIによる動的取得はサーバー負荷が高い時間帯に空表示になる場合があり、記事が増えてきたら静的タイルへの切り替えを検討する価値があります
「タイル状に並べたいが、プラグインは増やしたくない」
WordPressで特定テーマの記事をまとめたページを作ろうとすると、すぐにプラグインの話になりがちです。カスタム投稿タイプを使うか、ページビルダーを入れるか、あるいは有料テーマに乗り換えるか、という選択肢が浮かびます。しかし私の場合、すでにテーマとプラグインの数はある程度に抑えたいという方針があり、「標準のWordPressの範囲内でどこまでできるか」を試してみることにしました。
今回作ったのは、このブログの上海関連記事やリンクをまとめた情報ハブページ（hiroshi.today/shanghai/）です。2日間かけて実装した内容を作業メモとして残しておきます。同じことをやってみたい方、あるいはカスタムHTMLブロックで何ができるかを知りたい方の参考になれば幸いです。
なお、この記事の構成整理にはAIアシスタントを活用しています。
実装した5つの要素
今回のページで実装した内容は大きく5つあります。以下の順で解説します。
| # | 要素 | 使用技術 |
|---|---|---|
| 1 | TOC・ポップアップの非表示 | カスタムHTMLブロック（CSSのみ） |
| 2 | ヒーローバナー | カスタムHTMLブロック（インラインCSS） |
| 3 | ピン留め記事タイル | カスタムHTMLブロック（CSSグリッド） |
| 4 | 動的記事グリッド | カスタムHTMLブロック（JavaScript + REST API） |
| 5 | サイドバーウィジェット | カスタムHTMLウィジェット |
1. ページ固有のCSSを当てる：TOCとポップアップの非表示
情報ハブ系のページには、目次（TOC）プラグインやポップアップが表示されると邪魔になります。プラグインの設定でページ除外ができる場合もありますが、今回はカスタムHTMLブロックに <style> タグを直接書くことで対処しました。
Gutenbergエディタで「カスタムHTML」ブロックをページの先頭に追加し、以下を貼り付けます。
html
<style>
#toc_container { display: none !important; }
.toc_widget_list { display: none !important; }
.om-campaign-container { display: none !important; }
#om-container { display: none !important; }
</style>このCSSはそのページのHTMLに直接埋め込まれるため、サイト全体の設定に影響しません。テーマのCSSファイルを編集する必要もなく、削除したければブロックを消すだけです。クラス名やIDはご利用のプラグインによって異なりますので、ブラウザの開発者ツールで該当要素を確認してから使ってください。
2. ヒーローバナーを作る：背景画像＋テキストオーバーレイ
WordPressの標準ブロックにも「カバー」ブロックがありますが、細かいスタイル調整をしようとするとGutenbergの設定画面では限界があります。今回はすべてインラインCSSで指定することで、ピクセル単位のコントロールができました。
html
<div style="
background-image: url('https://hiroshi.today/wp-content/uploads/2026/04/Shanghai_Bund_night.jpg');
background-size: cover;
background-position: center;
height: 220px;
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0 32px;
margin-bottom: 2rem;
">
<div style="background:rgba(0,0,0,0.45);padding:16px 24px;border-radius:6px;">
<h1 style="color:#ffffff;margin:0 0 6px;font-size:2rem;letter-spacing:0.05em;">上海 / Shanghai</h1>
<p style="color:#f0f0f0;margin:0;font-size:1rem;">上海の日常と、役立つリンク。</p>
</div>
</div>2点だけ補足します。background-size: cover と background-position: center を組み合わせると、画像のアスペクト比に関わらず指定した高さ（ここでは220px）の中に画像が綺麗に収まります。また、テキストの背後に rgba(0,0,0,0.45) の半透明の黒いボックスを置くことで、背景画像の明暗に関わらずテキストが読みやすくなります。画像はWordPressのメディアライブラリにアップロードしたものを使えばそのままURLを貼り付けるだけです。
3. ピン留め記事タイルを手動で並べる：CSSグリッドの基本
特定の記事を「おすすめ」として固定表示したい場合、WordPressの標準ブロックでは3カラムのタイル状に並べることが難しいです。今回はCSSグリッドを使って実装しました。
html
<div style="margin-bottom:2.5rem;">
<h2 style="font-size:1.3rem;border-left:4px solid #1e73be;padding-left:12px;margin-bottom:1.2rem;">はじめての上海</h2>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;">
<a href="[記事URL]" style="display:block;background:#f7f8f9;border-radius:8px;overflow:hidden;text-decoration:none;color:#1a2332;transition:transform .2s;"
onmouseover="this.style.transform='translateY(-4px)'"
onmouseout="this.style.transform='translateY(0)'">
<div style="background:#1e73be;height:6px;"></div>
<div style="padding:16px;">
<p style="font-size:0.75rem;color:#888;margin:0 0 6px;">📋 準備ガイド</p>
<p style="font-weight:bold;font-size:0.95rem;margin:0;line-height:1.5;">記事タイトル</p>
</div>
</a>
</div>
</div>display:grid と grid-template-columns:repeat(3,1fr) を指定すると、子要素が自動的に3等分されます。記事を追加する場合は <a href="..."> のブロックをそのままコピーして増やすだけです。2カラムにしたければ repeat(3,1fr) を repeat(2,1fr) に変えます。カードの上部に色帯（height:6px）を置いているのは視覚的なアクセントで、カラーコードを変えれば記事のカテゴリや属性を色で区別することもできます。
4. 最新記事を自動取得する：REST APIとJavaScript
WordPressは標準でREST APIを提供しており、外部からでもページ内からでも記事データを取得できます。プラグインなしに使えるこの機能を活用して、指定カテゴリの最新記事をグリッド表示します。
html
<div style="margin-bottom:2.5rem;">
<h2 style="font-size:1.3rem;border-left:4px solid #1e73be;padding-left:12px;margin-bottom:1.2rem;">📝 上海の記事</h2>
<div id="shanghai-posts" style="display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;"></div>
</div>
<script>
fetch('/wp-json/wp/v2/posts?categories=605&per_page=9&_embed')
.then(r => r.json())
.then(posts => {
const grid = document.getElementById('shanghai-posts');
posts.forEach(p => {
const thumb = p._embedded?.['wp:featuredmedia']?.[0]?.source_url || '';
const imgHtml = thumb
? `<img src="${thumb}" alt="${p.title.rendered}" style="width:100%;aspect-ratio:16/9;object-fit:cover;">`
: `<div style="width:100%;aspect-ratio:16/9;background:#dde3ea;"></div>`;
grid.innerHTML += `
<a href="${p.link}" style="display:block;background:#f7f8f9;border-radius:8px;overflow:hidden;text-decoration:none;color:#1a2332;">
${imgHtml}
<div style="padding:12px;">
<p style="font-weight:bold;font-size:0.9rem;margin:0;line-height:1.5;">${p.title.rendered}</p>
</div>
</a>`;
});
});
</script>このコードで特に重要なのは _embed パラメータです。これを付けることで、アイキャッチ画像のURLが記事データに含まれるようになります。付けないと画像URLを別途取得するリクエストが必要になります。
カテゴリIDの確認方法は、WordPress管理画面の「投稿」→「カテゴリ」でカテゴリ名にカーソルを合わせると、ブラウザのステータスバーにURLが表示されます。そのURL中の tag_ID=XXX の数字がカテゴリIDです。per_page=9 の数値を変えれば表示件数を調整できます。
5. サイドバーをカスタマイズする：ウィジェットにHTMLを直接書く
WordPress管理画面の「外観」→「ウィジェット」から、デフォルトで入っている「最近の投稿」「コメント」「アーカイブ」「カテゴリ」を削除し、カスタムHTMLウィジェットを3つ追加しました。今回用意したのは、上海トップページへのナビゲーションボタン、天気・ニュース・生活情報などの便利リンク集、領事館・公式機関へのリンク集の3種類です。
ウィジェットを特定のページやカテゴリにのみ表示したい場合は、Widget Optionsプラグインが有用です。このプラグインを使うと、各ウィジェットの表示条件を「固定ページのみ」「特定カテゴリのみ」などの粒度で設定できます。
実装を通じて気づいたこと
3点ほど注意点として残しておきます。
インラインCSSを多用するため、コードは長くなりがちです。ただ、カスタムHTMLブロックの中で完結しているため、テーマのCSSファイルとの干渉を気にする必要がなく、後から見直す際も「このページのこのブロック」という単位で管理できます。私の場合はコードの可読性よりもページ単位での完結性を優先したため、この方法が結果的には管理しやすかったです。
REST APIによる動的取得は、サーバー負荷が高い時間帯に空表示になることがあります。ページをリロードすれば解決しますが、記事数が増えてきた段階では静的なHTMLタイルに切り替えることを検討する価値があります。
絵文字をHTMLコード内に含める場合は、ブラウザや環境によって表示が崩れることがあります。特に見出しに埋め込む場合は、実際の表示を複数のブラウザで確認してから公開することをお勧めします。
今後の課題と応用の可能性
今回のページについては、記事が増えてきた段階でタグを活用してセクションを「銭湯」「グルメ」「交通」などに分類すること、AIOSEO でのメタディスクリプションとフォーカスキーワードの設定、そしてPolylangを使った英語版ページの追加を検討しています。Google Search Consoleで流入状況を確認してからタグ整理とコンテンツ拡充の方針を決める予定です。
応用という意味では、今回の手法はどんなテーマの「まとめページ」にも使えます。旅行先別のページ、読書記録のまとめ、ツール紹介ページなど、コンテンツが増えてきたときに「一覧性のあるハブページを作りたい」と思ったときに、このアプローチを試してみてください。プラグインを追加しなくても、WordPressはすでに十分な素材を持っています。
まとめ
今回の実装を通じて、WordPressのカスタムHTMLブロックは思っていた以上に実用的だと感じました。プラグインやテーマの改造なしに、グリッドレイアウト・ヒーローバナー・動的記事取得・ページ固有のCSS制御を実現できます。コードを直接書くことに抵抗がない方であれば、Gutenbergの標準機能に限界を感じたタイミングで試してみる価値がある手法です。
北海道・帯広市出身。国際関係学を専攻し、アメリカとスウェーデンへの留学経験、マレーシア、スイス、中国、フィリピンなど複数の国での勤務・生活経験を持つ。現在はグローバルに展開する医療機器メーカーにおいて国際プロジェクトマネジメントを専門とし、異文化間の業務遂行と組織運営を主たる領域としている。
製造業での経験に加え、150を超える国・地域から35,000名が参加した2015年の第23回世界スカウトジャンボリーでは、大会主要責任者として参加各国との折衝、世界スカウト機構（WOSM）との窓口、およびリスク対応などを担った。以前は東日本大震災をはじめとする国内各地の自然災害において、災害ボランティアセンターの立ち上げ・運営支援にも携わった。
旅行・生産性・テクノロジー・グローバルキャリアをテーマに、自身の学習と思考の整理を兼ねて書いているブログです。内容が読んでくださる方の参考になれば幸いです。