WING(AFFINGER5及びSTINGER PRO2)のマニュアルはコチラです※パスワードは商品フォルダ内テキストを確認

AFFINGER4 CSS STINGER PRO

【カスタマイズ】テーマのCSSについて

テーマのCSSは主に以下の3つで制御されています

  1. style.css(基本的なCSS)※子テーマ使用時は親テーマと子テーマそれぞれにstyle.cssがあります
  2. st-themecss.php(カスタマイザーで制御するCSS※管理画面で無効化可)
  3. st-kanricss.php(テーマ管理の設定によって変化するCSS)

その他の特殊なCSS

  • st-rankcss.php(AFFINGERのみ ※ボタンやランキングのCSS。ランキング管理画面で無効化可)
  • st-tagcss.php(STINGER PROのみ ※ボタンや一部プラグイン用のCSS)
  • st-amp-css.php(AMPのCSS

「外観」>「テーマの編集」

CSSの優先順位について

オリジナルカスタマイザーをオンにした状態で、プラグイン「Simple Custom CSS」も使用して子テーマを利用した場合で全てに「!important」を指定して比較した場合のCSS優先順位です。

上から順に優先されます。

  1. カスタマイザーの「追加のCSS」(例:文字を赤色に)
  2. st-themecss.php(カスタマイザーの設定値)(例:文字を青色に)
  3. (Simple Custom CSS※プラグイン)(例:文字を緑色に)
  4. st-kanricss.php(AFFINGERで指定したデザイン※サイドバーの左右など)(例:文字を紫色に)
  5. 子テーマのstyle.css(例:文字をオレンジ色に)
  6. 親テーマのstyle.css(例:文字をピンク色に)

自身のCSSで思いっきりカスタマイズしたい場合、st-kanricss.phpに書かれているCSSは少ないのでテーマ管理の「オリジナルカスタマイザーをオフ」にすると子テーマ記述でも思い通りのCSSが反映されやすいかと思います。

ステ子
例えばそれぞれの箇所で違う色を指定した時、まずは「カスタマイザーの「追加のCSS」で指定した赤色に、このCSSを消すと次は「カスタマイザーで指定した青色に(st-themecss.php)」これも消すと次は・・といった具合に最終的には親テーマ(style.css)のピンク色になります。
ENJI
CSSにはメディアクエリといって横幅に応じて反映されるCSSの内容がわけられているので注意して下さい(PC幅のところに記入してもスマートフォンでは反映されない場合があります)。詳しくは最後の画像も参考にして下さい。

style.cssに記載されているメディアクエリの例

「!important」指定などの影響により上記通りにならない場合もございます。また、CARDsやYasasiiなどのオリジナル子テーマはfunctions.pnpにて別途上書き制御している場合があります。詳しくはコチラ

基本サイズ

テーマはiPadminiで縦でモバイル表示、横向きでPC閲覧時の表示になるよう目安にしております。

CSSレイアウト表をメンバーズクラブで配布しております。ぜひ、ご活用ください(コチラ※要ログイン)

NEW大幅に進化した新バージョンWING(AFFINGER5 / STINGER PRO2)好評発売中!

ユーザー様の声

ユーザーの声をさらに見る

新バージョン「WING」を見る

ご利用バージョンやテーマにより設定方法やキャプチャ画像が異なる場合がございます

※テーマアップデートにより情報が一部異なる場合がございます

-AFFINGER4, CSS, STINGER PRO

Copyright© STINGER's MANUAL , 2020 All Rights Reserved Powered by AFFINGER5.