ここまでは自分のパソコンの中で練習してきましたが、いよいよ本番です。 「WordPressを使っているけれど、ここだけ少しデザインを変えたい！」という時に、今回の知識がどう役立つかを解説します。
1. 「カスタムHTML」ブロックを活用する
WordPressの投稿画面（ブロックエディタ）には、「カスタムHTML」というブロックがあります。
・使い方：ブロック追加ボタン（＋）から「カスタムHTML」を選択。
・メリット：通常のブロックでは作れない、自分専用のボタンやレイアウトを直接コードで書けます。
例えば、前回の「ボタン風リンク」をこの記事の中にだけ入れたい時は、ここに直接コードを貼り付ければOKです。
2. 特定の場所だけ色を変える（インラインCSS）
「この1行だけ、どうしても特殊な色にしたい」という時は、HTMLタグの中に直接CSSを書く方法が便利です。
記述例：
<p style=”color: blue; font-weight: bold;”>ここだけ青くて太い文字になります</p>
わざわざ設定画面を開かなくても、カスタムHTMLブロックの中でサッと書けるので、時短テクニックとして重宝します。
3. サイト全体にCSSを適用する（追加CSS）
「サイト内のすべてのボタンを角丸にしたい」など、全体に関わるデザインを変えたい時は、WordPressの管理画面にある「追加CSS」という場所を使います。
・場所：外観 ＞ カスタマイズ ＞ 追加CSS
ここに、例えば以下のようなコードを書くと、サイト全体のh2見出しに自動でアンダーラインを引くことができます。
h2 { border-bottom: 2px solid #007bff; }
4. 注意点：テーマのデザインとケンカさせない
WordPressには「テーマ（デザインの型）」が最初から入っています。 自分で書いたCSSが効かない時は、テーマ側の設定が優先されていることが多いです。
そんな時は、CSSの末尾に「!important」をつけると、自分の指示を最優先させることができます。
例： color: red !important;
（※ただし、使いすぎると後で修正が大変になるので、どうしてもという時の「奥の手」にしましょう）
まとめ
・「カスタムHTMLブロック」を使えば、自由なレイアウトが作れる。
・ちょっとした変更は「style属性」で直接書く。
・全体のデザイン変更は「追加CSS」に書く。
HTMLとCSSを知っているだけで、有料テーマを買わなくても自分好みのサイトにカスタマイズできるようになりますよ！
コメント