【WordPress】追加CSSで投稿記事をカスタマイズする方法

【WordPress】追加CSSで投稿記事をカスタマイズする方法

こんにちは。タケルです。

この記事ではWordPressの追加CSSの使い方を、初心者にもわかるように説明していきます。

  •  自分のサイトを自由にカスタマイズしたい
  •  記事へのCSSの適用方法がわからない
  •  そもそも追加CSSもわからない

こういった悩みを解決します。

追加CSSとは

追加CSSはWordPressの機能で、サイトの外観とレイアウトをカスタマイズできます。

WordPressのテーマを適用している場合は、テーマごとに見た目変わりますがさらに自分のサイトをカスタマイズしたい場合は追加CSSでの記述が必要になります

追加CSSの場所

追加CSSへのアクセス方法を説明します。

追加CSSへの入り方は2つあります。

1.WordPressのメニューから入る

WordPressのメニューから入る方法です。

menu → 外観 → CSS編集を選択

 

画面左側に追加CSSの編集欄が出てきます。

2.サイト画面のカスタマイズから入る

サイト画面から入る方法です。

サイト左上のカスタマイズを選択

 

左側メニューの一番下の追加CSSを選択する

追加CSSでの記事のカスタマイズ方法

記事へのCSS適用方法の流れは

  1. カスタマイズ対象のHTMLタグを確認
  2. 対象タグに対してCSSを記述
  3. プレビューで確認
  4. 公開

です。

まずはカスタマイズ対象のHTMLタグを確認しましょう。

編集したい記事画面で右クリック → 検証

 

検証画面(右側)の上にある要素選択アイコンをクリック
→ 編集したい文字をクリック

 

検証画面に対象のCSSを確認

 

CSSをコピー → 追加CSSへ貼り付け

 

貼り付けたCSSに任意のコードを記述

今回の例では文字色を青に変えるため、[color: #0000ff;]と記述しています。

正しく記述できていれば、プレビュー画面に反映されています。
文字色が青くなったことが確認できます。

 

今回は説明を簡単にするために、検証画面からコピーして貼り付けとしましたが、HTMLで記事を作っていれば追加CSSでのカスタマイズもより高度にできるようになります。

まとめ

WordPressの追加CSSを利用した、記事のカスタマイズ方法について簡単に説明しました。

CSSでのカスタマイズを最大限に活用するためには、HTMLでの記事投稿が必要となります。

HTMLで記事を書いて、CSSで自分なりのカスタマイズをしてみてください!