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

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

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

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

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

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

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

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

/* PC用(※基本テキスト設定でも対応可) */
.entry p {
    font-size:15px;
}

/* モバイル用 */
.mb-theme .entry p {
    font-size:14px;
}

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

el plano

/* PC用 */
.posttitle {
    font-size:17px;
}

/* モバイル用 */
.mb-theme .posttitle {
    font-size:20px;
}

ESCENA

/* PC用 */
.single-title {
    font-size:17px;
}

/* モバイル用 */
.mb-theme .single-title {
    font-size:20px;
}

GRAPHIE以降のテーマ

/* PC用 */
.single-article header .single-title {
    font-size:17px;
}

/* モバイル用 */
.mb-theme .single-article header .single-title {
    font-size:20px;
}

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

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

/* PC用 */
.my-area {
    font-size:15px;
    letter-spacing:0.1em;
}
.my-area img {
    width:300px;
    height:auto;
}

/* モバイル用 */
.mb-theme .mt-area {
    font-size:14px;
    font-weight:bold;
    letter-spacing:0.08em;
}
.mb-theme .my-area img {
    width:100%;
}