作成：2025年10月17日

1.はじめに

WordPressで記事を書くとき、<script>タグや広告コードを貼っただけでレイアウトが崩れて困ったことはありませんか？

特にマークダウン形式で投稿していると、正しく表示するにはちょっとしたコツが必要です。

この記事では、初心者でも簡単にできる「崩れないHTMLの貼り方」を、3つの方法でわかりやすく解説します。

WordPress＋Cocoonユーザー必見の保存版ガイドです！

第1章：なぜレイアウトが崩れるのか？

WordPressのブロックエディター（Gutenberg）は、

セキュリティ保護のために、<script>タグや一部のHTMLタグを

自動的に除外したり変換したりします。

つまり、次のように本文中へ直接HTMLを書くと、

WordPressが「危険なスクリプト」と判断して崩れてしまうのです。

<script async src="https://example.com/ads.js"></script>

これが「ブロック崩れ」や「テキスト消失」の原因です。

第2章：崩れずにHTMLを表示する３つの方法

✅ 方法①：コードを見せたいだけなら、3つのバッククォートで囲む

マークダウンでは、3つのバッククォート（```）を使って、最初と最後に記載すれば、

HTMLが「実行されない表示」として安全に扱われます。

例：

```html
<script async src="https://example.com/ads.js"></script>
```

🔸このようにすると：

• HTMLコードがそのまま表示される
• 実行されないため安全
• ブロック崩れが起きない

記事で「貼り付け例」として紹介したいときに最適です。

✅ 方法②：実際に動作させたいなら「カスタムHTML」ブロックを使う

広告タグやYouTube埋め込みなど、HTMLを実行したい場合は

「段落ブロック」や「マークダウンブロック」ではなく、

「カスタムHTML」ブロックを使用します。

🔹手順

1. 投稿画面で「＋」をクリック
2. 「HTML」と入力して検索
3. 「カスタムHTML」ブロックを選択
4. 下記のようにコードを貼り付ける

プレビューで確認すれば、正しく動作します。

✅ 方法③：Cocoonテーマを使っている場合は、テーマ設定で貼る

Cocoonには、広告コードやスクリプトを安全に管理できる専用欄があります。

🔹手順

1. WordPress管理画面 → 「Cocoon設定」
2. 「アクセス解析・認証」タブをクリック
3. 「広告コード」欄にAdSenseスクリプトを貼り付け
4. 保存をクリック

これで、全ページに自動的に反映されます。

ブロックエディターで貼るより安全で、崩れる心配もありません。

第3章：NGなやり方（やってはいけない例）

以下のように書くと、WordPressが自動でコードを削除したり変換してしまいます。

<script async src="https://example.com/ads.js"></script>

これは本文ブロックの中で直接スクリプトを書いているため、

ブロック構造が壊れる原因になります。

💬 対策：必ず「コードブロック」か「カスタムHTML」を使うこと！

第4章：目的別まとめ表

第5章：マークダウン＋HTMLの使い分けのコツ

マークダウンとHTMLを同時に使うときは、

次のルールを覚えておくと安心です。

• ✅ 文章・見出し → マークダウンで書く
• ✅ コード・広告 → カスタムHTMLで書く
• ✅ 混在させず、ブロックを分ける

まとめ：崩れない＝安心して書ける

マークダウンで記事を書くと、コードが美しく整理できて気持ちいい反面、

HTMLやスクリプトの扱いで崩れることもあります。

でも、今回紹介した3つの方法を覚えておけば大丈夫です。

見せたい時はコードブロック。（3つのバッククォートで囲む）

動かしたい時はカスタムHTML。

それだけで、記事が壊れず、安心して投稿できます。

📘 この記事のテーマ

【WordPress初心者向け】HTML・AdSenseコードを安全に貼る方法を完全解説

🔸 執筆： ミータ（エスアイコムのブログ）
🔸 サイト： https://sicom-blog.com

はじめに

WordPressを始めて1か月。記事も増えてきたころ、ふと気づいたのは「読者が記事を探しづらい」ということでした。

これをきっかけに、Cocoonでヘッダーメニューを整えることに挑戦。

この記事では、初心者の私がカテゴリ設定からメニュー作成、CSS検証までを実体験として紹介します。

ChatGPTに相談しながら、一歩ずつ整えていった過程をそのまま公開します。

第1章：Cocoonを触るたびに分かる「奥の深さ」

WordPressテーマのCocoonは、無料ながら高機能。

最初は「スキン」「インデックス」「OGP」などの専門用語に戸惑いましたが、

設定画面をひとつずつ試していくと、クリック操作だけで主要な見た目や表示方法を切り替えられる“親切設計”だと分かってきました。

失敗しても元に戻せる安心感があり、初心者でも段階的にサイトを整えられます。

今回は、サイトの顔であるヘッダーメニューに取り組み、シリーズ記事をカテゴリ単位で導線化することを目標にしました。

第2章：まずは地図を描く——カテゴリーを整える

メニューはカテゴリーと連動します。

先にカテゴリーを整理しておくと、後の操作がスムーズになり、URLも整います。

手順：カテゴリーの作成

1. 管理画面で「投稿」→「カテゴリー」へ進む。
   
2. 次の4つを新規追加する（スラッグは英数字で短くする）。

URL例：https://sicom-blog.com/category/kokoro/

記事をカテゴリーに振り分ける

1. 「投稿」→「投稿一覧」を開く。
   
2. タイトル下の「クイック編集」をクリック。
   
3. 右側の「カテゴリー」で該当カテゴリにチェックを入れる。
   
4. 「更新」をクリックして保存する。

予約投稿中の記事も同様に振り分けられます。

先に分類しておくと、一覧表示やメニュー導線が整い、管理もしやすくなります。

第3章：いよいよメニューを作成（グローバルナビ）

カテゴリーが整ったら、ヘッダーにカテゴリーメニューを配置します。

Cocoonではプラグイン不要で設定できます。

ステップ1：メニュー画面を開く

1. 管理画面で「外観」→「メニュー」へ進む。
   
2. 「新しいメニューを作成」をクリック。
   
3. メニュー名を「ヘッダーメニュー」とする。
   
4. 「メニューの位置」で「ヘッダーメニュー（グローバルナビ）」にチェックを入れる。

ステップ2：カテゴリーを追加

1. 左側の「カテゴリー」タブを開く。
   
2. 作成した4つのカテゴリーを選択する。
   
3. 「メニューに追加」をクリックする。

ステップ3：順番を整える・ホームを追加する

1. 右側の「メニュー構造」でドラッグ＆ドロップして表示順を調整する。
   
2. 先頭に「ホーム」を置く場合は、左の「カスタムリンク」で次を追加する。
   

• URL：https://sicom-blog.com
• リンク文字列：ホーム

「メニューを保存」をクリックする。

完成イメージ

ホーム ｜ 心の羅針盤 ｜ 願いは叶う ｜ 潜在意識の旅路 ｜ WordPress体験談

スマートフォン表示では自動的にドロップダウンメニューに切り替わるため、特別な設定は不要です。

第4章：Cocoon設定で見た目を整える（CSSなしでも美しく）

メニューを作ったあとは、一覧ページの見た目を整える。

Cocoonの魅力は、ここもクリック操作だけでデザイン変更ができることだ。

Cocoon設定 → インデックスのおすすめ設定

この設定だけで、トップページが雑誌のように整う。

画像がズレるときは「メディア → サムネイル再生成」で修正できる。

第5章：CSSを試して分かった「安心できる仕組み」

ブログを運営していると、デザインを少し変えたくなることがある。

私も例外ではなく、「カードの影を少し付けてみたい」と思った。

そもそもCSSとは？

CSS（スタイルシート）とは、サイトの見た目を指定するルールだ。

背景色・文字の大きさ・枠線・余白・影などを設定できる。

CocoonはCSSを直接書かなくても整うが、「もう少しだけ調整したい」ときに使える。

追加CSSの追加方法（驚くほど簡単）

ChatGPTに相談して、軽い影を付けるCSSコードを教わった。

実際に追加してみると、操作は驚くほど簡単だった。

1. 管理画面で「外観 → カスタマイズ」を開く。
2. 「追加CSS」をクリック。
3. コードを貼り付け、「公開」を押す。

ほんの数行で変更が反映される。

初心者の私でも10分もかからずにできた。

初心者でも安心な理由

「追加CSS」はテーマ本体とは独立しており、元のコードを壊すことがない。

つまり、いくら書き足しても「戻せなくなる」ことはない。

不要になったら削除すれば即座に元に戻る。

この仕組みを知ったとき、「CSSって怖くない」と思えた。

自由に試しても元に戻せる――これは初心者にとって大きな安心材料だ。

実際に追加して分かったこと

カードに影をつけるコードを試すと、見た目は少し変わった。

でもページを開くスピードが遅くなった。

ChatGPTに相談しながら検証した結果、「影のCSSが原因」と分かり、削除した。

Cocoon標準でも十分に見やすく、バランスが良い。

結論として、今はCSSを使わず、標準機能だけで運営している。

教訓: 追加CSSは強力だが、必要最小限で。

デザインより「軽さ」と「安定性」を優先する。

第6章：今後の改善課題（CSSと子テーマ運用）

現在は追加CSSを使っていないが、今後少しずつ改善を進める予定だ。

これから取り組みたいことをリスト化しておく。

• 子テーマを活用する。
  Cocoonの更新時に上書きされない安全な環境を整える。
  
• 軽量なCSSのみ再導入。
  小さな影や余白など、体験を損なわない範囲で調整。
  
• PageSpeed Insightsで効果を確認。
  見た目だけでなく、速度も数値で把握する。
  
• ChatGPTに相談して最小コードを取得。
  目的を具体的に伝えれば、ピンポイントで安全なコードを提案してくれる。

第7章：カテゴリー説明文を加えて親切に

ヘッダーメニューに並んだカテゴリーをさらに分かりやすくするため、
それぞれのカテゴリーに短い説明文を追加した。

例：「心の羅針盤」カテゴリの説明

迷ったとき、心を整える小さなヒントを。考え方や気づきを短く綴ります。

これだけで読者が「このカテゴリにはどんな記事があるか」を直感的に理解できる。

WordPressの「投稿 → カテゴリー → 各カテゴリ編集」で、説明欄に1〜2文加えるだけでOKだ。

第3部｜メニューが変えたブログ運営と今後の課題・まとめ

第8章：メニューが変えた「ブログの方向性」

ヘッダーメニューを整えたことで、

サイト全体の見た目だけでなく、自分の中の意識の整理が進んだ。

カテゴリーを明確にしたことで、

「どんなテーマで」「誰に向けて」「どんな順番で読んでもらいたいか」
が自然と見えるようになった。

実際にアクセス解析を見てみると、

メニューから記事を読む読者が増えていることにも気づいた。

特に「心の羅針盤」と「願いは叶う」はクリック率が高く、

シリーズとしての流れがある記事ほど回遊が伸びやすい。

「構造を整理すると読者の行動も整理される」——これが今回の最大の発見だった。

第9章：次のステップ——トップページの強化

ヘッダーメニューが整った今、次に目指すのはトップページの充実。

訪問した瞬間に「このブログが何を発信しているのか」が伝わるように、
次のような構成を考えている。

• おすすめカードエリア
  人気記事や初めての人に読んでほしい記事を表示。
  Cocoonの「おすすめカード」機能で設定可能。
  
• アピールエリア
  ブログの理念や運営者の想いを大きく表示。
  例：「10年ぶりに再挑戦する、WordPress初心者の記録ブログ」
  
• YouTube連携
  記事内容と連動した解説動画を埋め込み。
  ChatGPTに相談しながら、ナレーション台本を効率的に作成予定。

記事と動画をセットで届ける。
これが、次の運営方針の柱になる。

第10章：体験から得た3つの教訓

1. 構成はデザインである

ブログの「見た目」は、装飾ではなく情報設計そのもの。

カテゴリと導線を整理することで、読者が自然に記事を巡るようになる。

2. 速度は正義

どれだけデザインが良くても、

ページが遅いと離脱される。

CSSを削除したことで読み込みが体感で速くなった。

「速く・軽く・迷わない」が一番のUX（ユーザー体験）だと実感した。

3. CSSは怖くない

Cocoonの「追加CSS」は、元のスタイルを壊さない仕組みになっている。

失敗しても削除すれば元通り。

だから、初心者でも安心して試せる環境がある。

ChatGPTに相談すれば、安全で軽いコードだけを取り入れられる。

第11章：5分で振り返るチェックリスト

• [ ] カテゴリーを4つ作成（kokoro, negai, senzai, wordpress）
• [ ] 投稿をカテゴリーへ割り当てる（クイック編集でOK）
• [ ] 外観 → メニュー → ヘッダーメニューに4カテゴリ＋ホームを追加
• [ ] Cocoon設定 → インデックスを「カテゴリーごと（3カラム）」に設定
• [ ] 抜粋文字数は100、スマホでは1カラム表示
• [ ] 画像は16:9、WebP形式で軽量化
• [ ] 追加CSSは未使用（必要時のみ最小で）
• [ ] 表示を確認（PC／スマホ）＋キャッシュ削除

第12章：まとめ

今日のひとこと

Cocoonの「追加CSS」は、初心者が安心して練習できる場所。

まずは標準設定で“速く・美しく”。その上で少しずつ理想を形にしていけばいい。

エピローグ：再出発のブログ運営へ

10年前にブログを始め、途中でやめてしまった私が、

再び挑戦する気持ちを取り戻せたのは、

「できることが少しずつ形になっていく」このWordPress体験があったからだ。

Cocoonのおかげで、“作る楽しさ”が戻ってきた。

そしてChatGPTと対話しながら進めることで、

ひとつひとつの学びが確実に積み重なっている。

これからもこのブログ「エスアイコムのブログ」で、

WordPress体験談や自己成長の記録を発信していきたい。

同じように再挑戦する誰かの背中を、少しでも押せたら幸いです。

はじめに

WordPressでのサイト運営、

「更新に時間がかかる」「作業がバラバラ」「分析や改善まで手が回らない」

こんな悩みはありませんか？

WordPressは便利な反面、設定や更新をすべて手動で行うと、時間と労力がどんどん奪われます。

そこで今回は、“効率的にWordPressを運営するための仕組みづくり”をテーマに、

自動化・省力化・分析の視点から実践的な方法を紹介します。

記事作成を効率化する仕組み

● テンプレート化で迷わない

記事を書くたびに構成を考えるのは非効率。
あらかじめ「見出し構成テンプレート」を作っておきましょう。

例：

H1：タイトル
H2：導入文
H2：問題提起
H2：解決策
H2：まとめ

→ これを再利用することで、記事執筆がスムーズになります。

● 再利用できるブロックを登録

WordPressの「再利用ブロック」を使えば、CTA（問い合わせボタンや定型文）を全記事に一括反映できます。

→ 更新も1か所で済み、手間が大幅削減。

作業を自動化して時短する

● プラグインでルーチンを自動化

• UpdraftPlus：自動バックアップ
• Broken Link Checker：リンク切れ検出
• WP Crontrol：定期処理のスケジュール管理

これらを組み合わせることで、
「手動チェック」「ミスの見逃し」をなくす仕組みが作れます。

● 投稿予約・SNS連携

• WP Scheduled Posts：記事をまとめて予約投稿
• Jetpack / Social Auto Poster：記事公開と同時にSNSへ自動投稿

→ “書いたら自動で拡散” の流れを作ると、更新が途切れにくくなります。

分析を仕組み化して改善に繋げる

● データの可視化

• Google Site Kitを導入すると、
  
  Search Console・Analytics・AdSenseの情報をWordPress管理画面で一括確認できます。
  
  → どの記事が読まれているかを、ログイン中にサッと把握可能。
  

● 定期的な分析スケジュールを設定

• 毎月第1週に「アクセス分析デー」を設定
• 検索順位・クリック率・滞在時間などをチェック
• 改善すべき記事をリストアップしてリライト

→ 「分析をタスク化」すると継続できるようになります。

チームや外注と共有しやすい体制を作る

● 作業フローを明文化

GoogleドキュメントやNotionで「記事制作マニュアル」を共有しておくと、

チームメンバーや外注ライターも同じ基準で作業できます。

● WordPress権限の最適化

• 管理者（Admin）
• 編集者（Editor）
• 投稿者（Author）

適切に権限を分けておくことで、セキュリティリスクも減ります。

長期的に運営を安定させるコツ

• 定期バックアップを自動化
• プラグイン・テーマの更新を月1回まとめて実施
• 不要プラグインを削除して軽量化
• セキュリティプラグインでログイン保護

「効率化＝自動化＋ルール化＋見える化」

この3つを意識すると、サイト運営がグッと楽になります。

まとめ

WordPressの運営を効率化するには、

“毎回手動でやる作業を仕組み化する” ことがポイントです。

• 記事テンプレートで作業を減らす
• 自動化プラグインで手間を省く
• 分析の仕組みで改善を続ける

これらを整えておけば、

「作業に追われるブログ運営」から「育てるブログ運営」へ進化できます。

💡 次のステップ

• WordPressの運用を自動化するおすすめプラグイン10選
• 月次でやるべきメンテナンスチェックリスト

はじめに

こんにちは !

WordPressをインストールした直後、何から設定すればいいか迷っていませんか？

便利そうなプラグインを片っ端から入れてしまうと、かえって動作が重くなったり不具合が起きたりします。

この記事では、初心者でも安心して始められるように、導入直後にやるべき初期設定と、入れすぎ注意な最小構成プラグインを分かりやすく解説します。

私自身も、最初のころにプラグインを入れすぎてトラブルになり、結局削除してやり直した経験があります。

この記事では、そんな無駄な作業を避けるために、WordPressを最小構成で安定運用する初期設定手順を紹介します。

🧭 ステップ1：まずは基本設定から（5分）

管理画面 → 「設定」→「一般」

ここでは“サイトの基本情報”を整えます。
この部分は後から変更しても大丈夫なので、気軽に設定してOKです。

✅ 保存を忘れずに！

🔗 ステップ2：パーマリンク設定（最初に一度だけ）

設定 → 「パーマリンク設定」

• 「投稿名」を選ぶ
  例：https://example.com/sample-post/

👉 この設定だけは途中変更するとリンク切れの原因になるため、最初に必ず決めておきましょう。

🎨 ステップ3：テーマを選ぶ（無料でOK）

最初は 軽くて安定している無料テーマ を選びましょう。

おすすめ：

• Cocoon（日本語対応・無料・SEOにも強い）
• Astra（軽量でシンプル）

👉 最初は子テーマを作らず、親テーマのままでOK。
カスタマイズは慣れてからで十分です。

🔌 ステップ4：必要最低限のプラグインだけ導入（5つで十分）

ここが最も大事です。
最初は「便利そう！」と思っても、まず最小構成で始めるのがポイントです。

💡 ポイント：

• 同じ機能のプラグインを複数入れない（競合の原因）
• 「表示速度系」や「カスタム系」は慣れてから導入でOK

🧱 ステップ5：SSL（https）を必ず設定

セキュリティとSEOの両面で必須です。

• サーバー管理画面で「無料SSL（Let’s Encrypt）」を有効化
• WordPressの「一般設定」でURLを
  http:// → https:// に変更

🔒 URLバーに「鍵マーク」が出ていれば成功です。

📈 ステップ6：SEOの初期設定（最短でOK）

All in One SEOを導入したら、最初はこの2つだけで十分です。

1. XMLサイトマップを有効化（自動生成されます）
2. Google Search Consoleに登録

👉 これで検索エンジンにサイトが認識されます。

✍️ ステップ7：記事作成のコツ（最初に覚えておく3つ）

1. タイトルにキーワードを入れる
   → 例：「WordPress 初期設定 方法」
2. 見出し（H2/H3）で内容を整理
3. 画像にはALT属性（説明文）を設定

💬 「読者にとってわかりやすい記事」を意識するだけでOKです。

✅ ステップ8：記事公開前チェック

• [ ] タイトル・パーマリンクを確認
• [ ] スマホで崩れていないか確認
• [ ] 画像サイズを1MB以下に
• [ ] 誤字脱字チェック

🚀 ステップ9：運用を安定させるコツ

• プラグインは月1回見直し（使っていないものは削除）
• 大きな更新（テーマやWordPress本体）はバックアップ後に実行
• 定期的に「表示速度」や「エラー」をチェック

💡 まとめ：最小構成で始めるのが一番の近道

🎯 結論

「WordPressはたくさん入れるより、少なく・軽く・安定的に使うことが大事。」

まずはこの最小構成でサイトを運用し、必要になったら1つずつ追加するスタイルが、

初心者にとって一番安全で、長く続けやすい方法です。

次回予告

次の記事は、

【保存版】WordPress運営を効率化する仕組み作り｜自動化・分析・改善のコツ

です。