「すぐにつくれて、ちょうどいい」WordPressテーマ SYN Ownd

2026年1月14日：アップデートのお知らせ、SYN Ownd 0.2.0 を公開しました

  1. SYN
  2. よくある質問
  3. 「デベロッパーツール」を利用して効率よくテンプレートをカスタマイズしよう

「デベロッパーツール」を利用して効率よくテンプレートをカスタマイズしよう

2026年1月22日

2025年10月28日

SYN編集部 のアイコン SYN編集部

SYN（シン）のカスタマイズを行う際、サイト制作に慣れていない場合は、文字の色やサイズの変更や余白の調整などを、具体的にどのように操作すればよいか分からないことがあります。

とくに少し凝ったカスタマイズを行う場合、CSSの編集が必須になりますが、何千行もあるCSSのうち、どの部分を変更すれば思い通りの箇所を変えられるのか分からず、目安がないと途方に暮れてしまう方もいらっしゃるのではないでしょうか。

そんなときに便利なのが、ブラウザ「Google Chrome」に搭載されている「デベロッパーツール」です。

この機能を使うと、CSSのどの箇所を編集すればよいか、また編集した際にどのように表示が変化するかをリアルタイムで確認できるため、カスタマイズ作業が格段に効率的になります。

※Microsoft Edgeには「開発者ツール」、Mozilla Firefoxには「開発ツール」というように、同様のツールが他にもありますが、ここでは最も使いやすいものとしてChromeを紹介しています。

ここでは、実際の画面を見ながら変更方法をご紹介します。

デベロッパーツールの使用方法

基本的な画面と操作方法の説明

まずはChromeの「デベロッパーツール」を起動してみましょう。
Chromeブラウザを起動し、カスタマイズしたいページを開いて「デベロッパーツール」を起動します。

このとき、ブラウザのメニューから呼び出すこともできますが、変更したい箇所にマウスカーソルを合わせて右クリックし、表示されるメニューから「検証」をクリックすると、最初からその箇所が選択された状態でデベロッパーツールが開くため、とても便利です。

起動すると、デベロッパーツールのパネルが開き、『そのページのHTMLを確認できるエリア』と、『現在選択している箇所に適用されているCSSスタイルの一覧が表示されるエリア』が表示されます。

画像内（1）が「そのページのHTMLを確認できるエリア」です。
灰色に変わっているのが、選択している個所を構成するHTMLにあたります。

また画像内（2）は「現在選択している場所に適用されているCSSのスタイル一覧のあるエリア」です。

CSSのスタイルを指定するために必要な要素の名称

特定のHTMLや特定の状態にあるHTMLをCSS上で指定するものを「セレクタ」といいます。
さらに、指定されているスタイルの左側にある「color」や「text-decoration」を「プロパティ」、右の「#333」や「none」などを「値」と呼びます。

.hdr__catchphrase .container {
font-weight: bold;
}

セレクタ{
プロパティ: 値;
}

このCSSの例では、ヘッダーバーにあるテキストを太字にしています

CSSの基本的な使い方は、セレクタを使ってスタイルを適用したいHTML要素を指定し、プロパティでその要素のどの部分（サイズや余白、色など）をどのように変更するかを値で指定する、という流れです。

最後に画像内（3）には選択している個所の幅と高さが表示されています。

ロゴ画像を指定して調べると、上画像のように画像サイズが表示されます。

ここを見ると、現在編集しようとしている箇所の範囲がどこからどこまでか分かります。
最初は情報が多くて戸惑うかもしれませんが、慣れてくると、デベロッパーツールによってページのカスタマイズに必要最低限の情報が一覧できることが分かるようになると思います。

既存のスタイルの変更手順

SYN（シン）では、カスタマイザーを使って、サイトのメインカラーやリンクカラーなど、基本的な設定を行うことができます。
今回はデベロッパーツールの使い方の例として、記事ページのタイトルを調整してみます。

記事ページに移動し、デベロッパーツールで記事タイトルの要素を確認すると、以下のようなCSSが設定されています。

.entry__ttl {
    font-size: 1.5em;
    font-weight: 700;
    position: relative;
    width: 100%;
}

記事の見出しの下に余白（マージン）を追加

デベロッパーツールでは、ブラウザ上でCSSを追加、修正して、変更を確認することができます。

デベロッパーツールでの変更は、あくまでブラウザ上で「変更したらどうなるか」を確認しているだけですので、実際に公開しているサイト自体を変更しているわけではありません。

デベロッパーツールで、以下のように「margin-bottom: 100px;」を追加した例です。

.entry__ttl {
    font-size: 1.5em;
    font-weight: 700;
    position: relative;
    width: 100%;
    margin-bottom: 100px;
}

このようにデベロッパーツール上でCSSの調整や追加を行い、プロパティの確認やデザインの調整をします。
その上で、実際にサイトへ反映させる際には、カスタマイザーの「追加CSS」に加えたり、子テーマの「style.css」に追加してサイトに反映します。

新しいスタイルを追加する

例として、記事ページの見出し下にマージンを追加しています。
実際にサイトへ適用する手順も確認していきましょう。

カスタマイザーの追加CSSを利用する

追加したいCSSは以下でした。

.entry__ttl {
    margin-bottom: 100px;
}

追加したいプロパティだけにすると、上記のようなCSSになります。
このCSSをカスタマイザーの追加CSSに登録してみましょう。

カスタマイザーで表示を確認

「外観」>「カスタマイズ」から「追加CSS」に進みます。
プレビューしやすくするために、プレビュー画面で記事ページへ移動します。
次に、「追加CSS」に先ほどのCSSを追加してみると、プレビュー画面にきちんと反映されていることが確認できます。

スタマイザー上で該当ページを表示することで、変更内容をリアルタイムで確認。

プレビューで見た目を確認して問題なければ、「公開」をクリックして保存します。

style.css を編集

子テーマの「style.css」に追加する場合は、「外観」>「テーマファイルエディター」から編集し、ファイルを更新します。
また、FTPを使って子テーマのファイルにアクセスし、ローカル環境で作業しても問題ありません。

バックアップを忘れずに

本番環境のCSSを編集や上書きする際は、念のため事前にバックアップを取っておきましょう。
バックアップを取ってから作業していただければ、万が一表示エラーなどが発生した際にも元の状態に戻すことができます。

記事一覧へ戻る

関連記事 Relation Entry

関連する記事はまだありません。

目次