ホーム / 【Blogger初心者向け】CSSを書く3つの方法と使い分け【テーマ・記事内・インライン】 /

【Blogger初心者向け】CSSを書く3つの方法と使い分け【テーマ・記事内・インライン】

Bloggerでは、見た目やデザインを自由に変えられるCSS（スタイルシート）を使って、ブログをカスタマイズできます。

この記事では、BloggerでCSSを書く3つの方法を、初心者にもわかりやすく順番に解説します。
それぞれの使いどころ・おすすめシーンも紹介するので、どの方法を選べばいいか迷っている方は必見です！

■ CSSを書く3つの方法

方法 主な使い方 反映範囲 難易度
① テーマ編集で <b:skin> に書く 全ページに共通の装飾を設定 サイト全体 中〜上級
② 記事内に <style> タグで書く 複数の要素に同じ装飾を適用 その記事だけ 初級
③ HTMLタグに style="..." を書く 単発の装飾だけしたい時 その要素だけ 超初級

■ 方法①：テーマ編集画面で <b:skin> にCSSを追加する（テーマCSS）

Bloggerの「テーマ → HTMLを編集」から、テーマコード内の <b:skin> タグにCSSを直接書く方法です。

【使い方の例】

/* <b:skin> タグの中に追加 */
.my-custom-style {
  color: red;
  font-size: 16px;
}

テーマHTML内では、このように <b:skin> タグが存在します：

<b:skin><![CDATA[
  /* 既存のスタイルの下に追記してOK */
  .my-custom-style {
    color: red;
    font-size: 16px;
  }
]]></b:skin>

【ここがポイント】

  • サイト全体に影響（投稿・固定ページ・ガジェットすべてに反映）
  • 一度定義すれば、何度でも同じスタイルが使える
  • 慣れていないとちょっと怖いが、しっかり管理すればとても便利

【おすすめのシーン】

  • ブログ全体で同じ見出しデザインを使いたい
  • 自作ブログカードやボックスなど、共通スタイルを何度も使いたい
  • 毎回記事ごとにCSSを書くのが面倒

■ 方法②：記事内に <style> タグでCSSを書く（ローカルCSS）

投稿や固定ページの本文の冒頭に <style> タグを使ってCSSを書く方法です。

【使い方の例】

<style>
  .my-custom-style {
    color: red;
    font-size: 16px;
  }
</style>

<p class="my-custom-style">これはカスタムスタイルの例です。</p>

【ここがポイント】

  • 記事内だけで完結するので気軽
  • 同じ投稿内であれば、何度でもそのクラスを使える
  • 本来 <style> は <head> に書くものだが、Bloggerでは本文でも反映される

【おすすめのシーン】

  • 特定の記事だけ装飾を変えたい
  • テスト的にCSSを書いてみたいとき
  • 自分だけが見る下書きでデザインを試したいとき

■ 方法③：HTMLタグに直接 style="..." と書く（インラインCSS）

もっとも手軽なCSSの書き方で、タグの中に直接スタイルを書く方法です。

【使い方の例】

<p style="color: red; font-size: 16px;">これはインラインスタイルの例です。</p>

【ここがポイント】

  • 単発の装飾に便利
  • ただし、同じスタイルを何回も書くと管理が大変
  • 編集画面ですぐ書けて手間が少ない

【おすすめのシーン】

  • 1つの文字や段落だけ少し装飾したい
  • 急いで見た目だけ変えたいとき
  • 他のスタイルとの兼ね合いが気にならない場合

■ まとめ：どれを使えばいいの？

やりたいこと おすすめのCSSの書き方
サイト全体に共通のデザインを使いたい <b:skin> に書く
記事ごとに違うスタイルを使いたい <style> タグを記事内に書く
単発でちょっとだけ装飾したい style="..." を使う（インライン）

■ 補足：安全にCSSを追加するコツ

  • <b:skin> を編集する前に「テーマのバックアップ」を取ろう！
  • <style> の中では全角文字に注意（例：全角スペースやコロン）
  • プレビューで必ず表示確認しよう

■ さいごに

BloggerはHTMLやCSSを自由に扱えるからこそ、少し学ぶだけで見た目のクオリティがぐっと上がるブログになります。

まずは簡単なインラインスタイルや記事内の <style> から始めて、慣れてきたらテーマ全体へのカスタマイズにも挑戦してみてください！

QooQ