• Popular
  • Category
  • Tags
  • アーカイブ

News

follow us in feedly
Toggle

高度なカスタマイズ

PCとモバイルテーマで分けて任意のCSSを反映させる方法

PCとモバイルテーマで分けて任意のCSSを反映させる方法

DigiPressのテーマオプションではCSSを直接編集せずに本文のフォントサイズなどを変更したり、オプションにないスタイルの変更については「オリジナルスタイルシート設定」によって管理画面から独自のCSSをテーマにマージして組み込むことができます。

例えば、スマートフォン(モバイル)での表示のみ記事のフォントサイズを多少大きくするなど、ある特定のコンテンツの表示だけPCでの表示とは分けてCSSでスタイリングしたいときがある場合も、モバイルテーマであることを示す専用のCSSのセレクタ(.mb-theme)を既存のCSSセレクタの先頭に加えれば、オリジナルスタイルシート設定のみで実現できます。

モバイル専用テーマを持つテーマが対象です。

各テーマは最新版にアップデートしておいてください。
反映されない場合は .mb-themebody.mb-theme としてください。

各テーマごとのPC、モバイル分離用CSS指定例

以下はPCとモバイル用で表示を分ける場合のCSS指定例です。このようなCSSをDigiPressの「オリジナルスタイルシート設定」に追加して保存してください。

記事本文(pタグ)のフォントサイズを分ける場合

記事タイトルのフォントサイズを分ける場合

el plano

ESCENA

GRAPHIE以降のテーマ

独自のCSSを定義し、PCとモバイルで表示を分ける場合

独自の ".my-area" というCSSセレクタを定義し、PCとモバイルでスタイルを分ける場合のサンプルは以下をご参考ください。

その他役に立つDigiPresテーマTips

URL
TBURL
Return Top