📅
🔄
Blogger（ブロガー）で、記事ごとにCSSを追加したいというときはありませんか？
たとえば、特定の記事内だけで文字色を変えたり、装飾を入れたり…。そんなときに便利なのが、<style>タグやインラインスタイル（style属性）です。
この記事では、記事本文に直接CSSを書く2つの方法を紹介します。
方法①：<style>タグでCSSを書く
記事のHTML編集モードで、以下のようにCSSをまとめて書くことができます。
<style>
.custom-box {
border: 2px solid #4CAF50;
padding: 10px;
background-color: #f9fff9;
color: #333;
margin-bottom: 1em;
}
</style>
<div class="custom-box">
このボックスは記事内の<style>タグで装飾されています。
</div>
↓.custom-box {
border: 2px solid #4CAF50;
padding: 10px;
background-color: #f9fff9;
color: #333;
margin-bottom: 1em;
}
</style>
<div class="custom-box">
このボックスは記事内の<style>タグで装飾されています。
</div>
このボックスは記事内の<style>タグで装飾されています。
メリット
- 複数の要素に一括でスタイルを適用できる
- 後から編集しやすい
注意点
<style>タグは記事の冒頭か末尾に入れるのが一般的です- テーマによっては表示されないこともある（styleタグを除外する設定がある場合）
方法②：インラインスタイル（style属性）を使う
もっと簡単に「この1つの要素だけ」に装飾したいときは、style属性を使って直接書く方法があります。
<p style="color: red; font-weight: bold;">
このテキストは赤くて太字です。
</p>
↓このテキストは赤くて太字です。
</p>
このテキストは赤くて太字です。
メリット
- 記事内ですぐに適用できて、手軽
- HTML初心者でも取り組みやすい
注意点
- 複雑なデザインには不向き（CSSが分散する）
- 管理が大変になりやすい（再利用不可）
どっちを使うべき？
| 目的 | おすすめ方法 |
|---|---|
| 複数の要素を同じデザインにしたい | <style>タグを使う |
| 単発でちょっと装飾したい | インラインスタイルで十分 |
おまけ：記事装飾に便利な活用例
<style>
.note {
background: #ffffcc;
border-left: 4px solid #ffcc00;
padding: 8px;
margin: 1em 0;
}
</style>
<div class="note">
これは注意書き用のスタイルです。記事の中で強調したい部分に使えます。
</div>
↓.note {
background: #ffffcc;
border-left: 4px solid #ffcc00;
padding: 8px;
margin: 1em 0;
}
</style>
<div class="note">
これは注意書き用のスタイルです。記事の中で強調したい部分に使えます。
</div>
これは注意書き用のスタイルです。記事の中で強調したい部分に使えます。
まとめ
Bloggerで記事ごとにデザインを変えたいときは、<style>タグかインラインスタイルを使えばOK。
テーマ全体をいじらずに、記事単位で装飾をコントロールできるのが大きな魅力です。
「少しだけ目立たせたい」「ボックスを作りたい」など、ちょっとしたカスタマイズにぜひ活用してみてください。
それでは今回はこの辺で。
最後までお読みいただきありがとうございました。
0 件のコメント:
コメントを投稿