コピペで簡単！ブログデザインを少し変える超基礎CSS入門

こんにちは。岐阜の拠点から、今日からブログの毎日更新をスタートする当ブログです。いよいよ8月、本格的な夏がやってきましたね。

さて、最近はめちゃトク光のような高速回線を導入して、新しくWordPressでブログを立ち上げる方が増えています。初期設定が終わって記事を書き始めると、次に必ず湧いてくるのが「もう少し、ここを自分好みのデザインに変えたいな」という思いではないでしょうか。

そこで今回は、コピペですぐに試せるカスタマイズ方法を解説します。

そもそもCSS（スタイルシート）って何？

Webサイトは、主に「HTML」と「CSS」という2つの言語で作られています。小難しい説明は省いて、家づくりに例えてみましょう。

つまり、文字の大きさや色、背景、余白などを調整して「ブログをおしゃれにする魔法の杖」がCSSです。

WordPressでCSSを追加する場所

「よし、CSSを書こう！」と思っても、間違った場所を編集してしまうとブログが真っ白になる危険があります。初心者が最も安全にカスタマイズを楽しむなら、WordPressの標準機能である「追加CSS」を使いましょう。

1. WordPressの管理画面（ダッシュボード）にログインする。
2. 左側のメニューから「外観」＞「カスタマイズ」をクリックする。
3. メニューの一番下にある「追加CSS」をクリックする。
4. 開いた入力欄に、これから紹介するコードをコピペして「公開」ボタンを押す。

ここに入力したコードは、テーマ本体のファイルを直接いじらないため、万が一記述を間違えてもコードを消せばすぐに元通りになります。

【コピペOK】ブログでよく使う基礎CSSカスタマイズ3選

現場のWeb制作でも意識していることですが、CSSは「後から見て分かりやすいこと」が一番大切です。無駄に複雑なセレクタ（対象の指定方法）は避け、.txt_wrap や .inner といった、シンプルで管理しやすいクラス名を使うのが鉄則です。

今回は、当ブログのデザインシステムにも通じる、シンプルで使いやすいコードを用意しました。

1. 特定のテキストを強調するボックス（背景色と文字色）

記事内の重要なポイントを目立たせるためのシンプルなボックスです。

See the Pen Untitled by 広瀬和哉 (@lpvcfdes-the-styleful) on CodePen.

/* シンプルなテキストラップの装飾 */
.custom_txt_wrap {
  background-color: #f9f9f9; /* 優しい薄グレーの背景 */
  color: #333333; /* 濃いグレーの文字色 */
  padding: 1.5em; /* 内側の余白 */
  border-left: 5px solid #7C974C; /* 左側にオリーブ色のアクセント線 */
  border-radius: 4px; /* 角を少し丸くする */
  margin-bottom: 2em; /* 下の要素との余白 */
}

2. 見出し（H2）を自分好みにデザイン

ブログの読みやすさを左右する見出し。下線だけのシンプルなスタイルはどんなテーマにも合います。

See the Pen Untitled by 広瀬和哉 (@lpvcfdes-the-styleful) on CodePen.

/* 記事内のH2見出しカスタマイズ */
.cmn_txt_wrap h2 {
  font-size: 1.4rem; /* 文字の大きさ */
  font-weight: bold; /* 太字 */
  border-bottom: 2px dashed #C6B18A; /* ベージュ色の破線 */
  padding-bottom: 0.5em; /* 線と文字の隙間 */
}

3. 注意を促す黄色の囲み枠

「ここは読んでほしい！」という注意書きに使える枠線です。

See the Pen Untitled by 広瀬和哉 (@lpvcfdes-the-styleful) on CodePen.

/* 注意用の黄色いボックス */
.st-mybox-yellow-custom {
  border: 2px solid #e6c86e; /* 枠線の太さと色 */
  background-color: #fffdf5; /* ほんのり黄色い背景 */
  padding: 20px;
  border-radius: 8px;
}

カスタマイズで失敗しないための鉄則

最後に、CSSを触る際の重要なアドバイスです。

また、クラス名は長すぎず短すぎず、役割がパッと見てわかるシンプルな命名（例：.btn_wrap や .alert_box など）を心がけると、半年後の自分がコードを見た時に絶望せずに済みますよ。

まとめ：まずはコピペから、ブログ作りの楽しさを！

プログラミングやWeb制作の第一歩は、「自分で書いたコードで画面が変わる楽しさ」を知ることです。今回紹介したCSSの数値を少し変える（例えば #7C974C を別のカラーコードに変える）だけでも、一気にオリジナリティが出ます。

ぜひ、あなただけの素敵なブログ空間を作ってみてくださいね。