CSSセレクタとは該当のページ上のパーツをプログラム上で見つけるために利用する目印です。

unifyナビゲーションでは、位置調整機能にてCSSセレクタを入力すると、より親和性の高いレイアウトが実現できます。

【利用箇所】
ヘッダーナビゲーションのCSSセレクタ
メインエリアのCSSセレクタ
上部マージン用CSSセレクタ 

ここでは、CSSセレクタの確認方法と、利用者が多いテーマでの入力例を記載します。

テーマ別入力例へ

CSSセレクタの確認方法

①開発者ツールを開き、要素タブ(英語の場合はElementsタブ)を選択する

開発者ツール
WindowsF12(もしくは右クリック>検証)
MacOS[ opion ]+[ command ]+[ I ](もしくは右クリック>検証)
開発者ツールの開き方

②ページ要素の選択ツールを利用して、指定したいパーツをクリックする

CSSクラスタの選択

該当のhtmlタグが開発者ツール上で選択状態になります。

③開発者ツールで指定したいタグのid(もしくはclass)をコピーする

任意のタグをコピーする

添付画像の例では、classの「l-main」をコピーしています。

④識別記号を追加してから入力する。

idをコピーした場合、「#xxxxx」形式、classをコピーした場合「.xxxx」形式で入力します。

例①id=”breadcrumb”をコピーした場合

カスタマイズに「#breadcrumb」を入力する

「#breadcrumb」を入力します。

例①class=”content”をコピーした場合

カスタマイズに「.content」を入力する

「.content」を入力します。

上記手順を以下で動画でまとめています。

テーマ別入力例

利用者が多いテーマでの入力例を記載します。
※なお、各サイトによって利用プラグインやテーマの設定が異なるため、記載内容によって正確に動作するものを保証するものではありません。

また、全テーマを把握することは不可能であるので、以下に記載のテーマが無い場合は、上記「CSSセレクタの確認方法」から入力値を見つけて設定してください。

Cocoon

ヘッダーナビゲーションのCSSセレクタ#header
メインエリアのCSSセレクタ#main
上部マージン用CSSセレクタ(PC)
上部マージン用CSSセレクタ(SP)

JIN

ヘッダーナビゲーションのCSSセレクタ#header-box
メインエリアのCSSセレクタ.entry-content
上部マージン用CSSセレクタ(PC)
上部マージン用CSSセレクタ(SP)

JIN:R

ヘッダーナビゲーションのCSSセレクタ#commonHeader
メインエリアのCSSセレクタ#postContent
上部マージン用CSSセレクタ(PC)#commonHeader ※ヘッダーを追尾している場合のみ指定
上部マージン用CSSセレクタ(SP)#commonHeader ※ヘッダーを追尾している場合のみ指定

SANGO

ヘッダーナビゲーションのCSSセレクタ#header
メインエリアのCSSセレクタ#entry
上部マージン用CSSセレクタ(PC)
上部マージン用CSSセレクタ(SP)

AFFINGER5

ヘッダーナビゲーションのCSSセレクタ#st-menuwide
メインエリアのCSSセレクタmain
上部マージン用CSSセレクタ(PC)
上部マージン用CSSセレクタ(SP)

AFFINGER6

ヘッダーナビゲーションのCSSセレクタ#st-menuwide
メインエリアのCSSセレクタmain
上部マージン用CSSセレクタ(PC)
上部マージン用CSSセレクタ(SP)

SWELL

ヘッダーナビゲーションのCSSセレクタ#breadcrumb
メインエリアのCSSセレクタ.l-mainContent__inner
上部マージン用CSSセレクタ(PC)#fix_header ※ヘッダーを追尾している場合のみ指定
上部マージン用CSSセレクタ(SP)#header ※ヘッダーを追尾している場合のみ指定

THE THOR

ヘッダーナビゲーションのCSSセレクタ.breadcrumb
メインエリアのCSSセレクタ.content
上部マージン用CSSセレクタ(PC).l-header ※ヘッダーを追尾している場合のみ指定
上部マージン用CSSセレクタ(SP).l-header ※ヘッダーを追尾している場合のみ指定

STORK19

ヘッダーナビゲーションのCSSセレクタ#header
メインエリアのCSSセレクタ.entry-content
上部マージン用CSSセレクタ(PC)#header ※ヘッダーを追尾している場合のみ指定
上部マージン用CSSセレクタ(SP)#header ※ヘッダーを追尾している場合のみ指定

Diver

ヘッダーナビゲーションのCSSセレクタ#header
メインエリアのCSSセレクタ.single-post-main
上部マージン用CSSセレクタ(PC)#nav_fixed ※ヘッダーを追尾している場合のみ指定
上部マージン用CSSセレクタ(SP)#nav_fixed ※ヘッダーを追尾している場合のみ指定