WordPressを使っていると、
「ちょっとだけデザインを変えたいな…」とか、
「見出しの色を変えたいけどプラグイン入れるほどじゃない」なんて思うこと、ありませんか？
そんなときに役立つのが、HTMLを少しだけ使う方法です。
正直なところ、難しい専門知識は不要です。タグをちょっと覚えるだけで、記事の見栄えはぐっと良くなります。
そもそもWordPressでHTMLはどこに書けるの？
WordPressでは基本的に 「ブロックを追加（「＋」マーク）」 を使いますよね？
その中で「カスタムHTML」というブロックを選ぶと、自由にHTMLコードを入力できます。
これだけです。実際にプレビューで確認しながら進められるので安心ですよ。
- 記事編集画面で「＋」をクリック
- 「カスタムHTML」を選ぶ
- 好きなコードを入力する
よく使う簡単なHTMLタグ
「HTMLって専門的で難しそう…」と思う人も多いですが、実は使うのは数種類で十分。
たとえばこんな感じです：
<p>これは段落（パラグラフ）のタグです。</p>
<strong>太字にしたいときはこれ！</strong>
<a href="https://fukugrow.com">リンクを貼るとき</a>
<ul>
<li>箇条書きの1つ目</li>
<li>箇条書きの2つ目</li>
</ul>どうでしょう？
見た目はちょっとコードっぽいですが、読めば意味がなんとなく分かりますよね。
実際に記事でどう使える？
例えば、副業ブログや商品紹介の記事でよく使うのがリンクや強調です。
- 「ここだけは読者に伝えたい！」 → <strong>で太字にする
- 「公式サイトはこちら」 → <a href=”URL”>公式サイト</a> でリンク
さらに、ちょっと工夫すれば読者にとってグッと見やすい記事になります。
画像付きのアフィリエイトリンクを貼る
もしASPや楽天・Amazonなどのアフィリエイトを利用しているなら、画像付きリンクを使うのもおすすめです。
例えばこんな感じ：
<a href="https://affiliate-link.example" target="_blank" rel="noopener noreferrer">
<img src="https://image.example/item.jpg" alt="おすすめ商品の画像" width="300">
</a>このコードのポイント：
- <a>タグでリンク先を指定
- その中に<img>タグを入れることで、画像をクリックできるようになる
- target=”_blank”で新しいタブで開く
- rel=”noopener noreferrer”でセキュリティも確保
実際に表示すると、画像バナーをクリックすればアフィリエイトリンクへ飛べるようになります。
HTMLを触るときの注意点
便利だからといって、HTMLを入れすぎると逆にゴチャゴチャしてしまいます。
あくまで「ちょっと装飾したいとき」に使うのがポイントです。
それから、もしコードを閉じ忘れるとデザインが崩れることもあります。
たとえば <strong> で始めたら、必ず </strong> で閉じましょう。
まとめ
WordPressは初心者に優しいCMSですが、ちょっとしたHTMLの知識があるだけで、記事は格段に見やすくなります。
- HTMLは「カスタムHTMLブロック」で入力
- よく使うのは <p> <strong> <a> <ul><li> くらいでOK
- コードを閉じ忘れないように注意
この3つを覚えるだけで十分です。
「正直、プラグインを入れるまでもないけど、ちょっとだけ見栄えを良くしたい」
そんなときに、この記事を思い出してもらえたら嬉しいです。
