サイトページのソース情報からカテゴリーのclass名を調べる方法【Mac版】を紹介します。
この内容を上から順番に進めると、ソースからカテゴリーのclass名を調べることができます。
調べる手順は下の4つです。
ソース情報からカテゴリーのclass名を調べる手順【Mac版】
- 対象のサイトページを表示する
- サイトページのソースを表示する
- ソースのカテゴリー名を検索する
- 検索結果でヒットしたclass名を確認する
目次（もくじ）
【追加CSS】ソースからカテゴリーのclass名を調べる手順【Mac版】
対象のサイトページを表示する
調べる対象のサイトページを表示してください。
下の画像はこのサイトページのトップページです。
次に表示したサイトページのソースを表示しましょう。
サイトページのソースを表示する
表示したサイトページでマウスを右クリックして、表示されたメニューから「ページのソースを表示」を選択してください。
右クリックすると下の画像のメニューが表示されます。
ソースが表示されると下のような画面が表示されていると思います。
次にソースからカテゴリー名を検索しましょう。
ソースからカテゴリー名を検索する
ソースからカテゴリー名を検索するため、まず検索窓を表示させる必要があります。
ソースに検索窓を表示する
カテゴリー名を検索するためにソースに検索窓を表示します。
使用しているキーボードがMac純正キーボードの場合には、下のショートカットキーが使えます。
ソース内の検索窓を表示するショートカットキー
[⌘]キー＋[F]キーを同時に押す
表示させた検索窓にカテゴリー名を入力しましょう。
検索窓にカテゴリー名を入力
検索窓に調べたいカテゴリー名を入力してください。
下の画像では例として「サーバー関連」を指定して検索しています。
検索結果でヒットしたカテゴリー名から、アイキャッチ画像に使用されているカテゴリーを調べましょう。
下の画像は上から（パソコンは左から）
- アイキャッチ画像のカテゴリー名（サーバー関連）
- カテゴリー名の対象ソース部分
アイキャッチ画像のサーバー関連のカテゴリー
カテゴリーの対象ソース
カテゴリー名の検索結果でヒットしたclass名を確認しましょう。
検索結果でヒットしたclass名を確認する
カテゴリー名の検索結果でヒットした、class名を対象ソースから確認します。
対象ソース内のclass名（画像内：post-list-meta）
カテゴリー名のclass名
カテゴリー
以上でソース情報からカテゴリーのclass名を調べる方法【Mac版】は終わりです。
