DigiPressのビジュアル設定にはない箇所について独自のスタイルにカスタマイズしたい場合、テーマのCSSを直接編集するのではなく「オリジナルスタイルシート設定」にて変更したい箇所の独自のCSSを、テーマのCSSに組み込んで反映させることができます。

この場合、まずは対象の要素(タグ, class, IDなど)を知る必要があります。
ここではその対象要素の調べ方を解説します。

(スマートフォンでの表示を対象とする場合)

カスタマイズ対象の要素が、スマートフォン(モバイルテーマ)での表示である場合は、まずはブラウザの「ディベロッパーツール」を起動します。

表示された「ディベロッパーツール」から、「デバイスツールバー」を起動します。

エミュレーターモードで表示されたら、プリセットのデバイス一覧からチェックしたいデバイス名を選択します。

変更したいオブジェクトの「検証」から対象箇所を調べる

ページ上の変更したい箇所にマウスカーソルを合わせて右クリックメニューを開き、「検証」を選択します。

対象の要素の確認と反映されているCSSを確認

コンソールが開き、ページ上の該当箇所とソースの該当箇所がハイライト表示されます。
さらに、コンソール右側の「Style」タブにて該当箇所に反映されているCSSをすべて確認することができます。

ここで、オリジナルスタイルシートに最終的にCSSを登録するための対象要素のセレクタ(Class、ID、またはタグ)を調べます。

参考に、他の例として「GRAPHIE」のシングルページの投稿タイトルを調べてみましょう。

コンソールでCSSを直接編集、追加してチェックする

コンソールの「Style」では、対象要素のスタイルを変更したり、新たにCSSを追加して事前にブラウザ上でプレビューチェックが行えます。

「オリジナルスタイルシート設定」に登録する前に、ここで好みのスタイルになるまでCSSを修正してみましょう。

カスタマイズしたCSSをテーマに組み込む

希望の状態になるCSSが出来上がったら、「オリジナルCSS設定」に対象の要素についてのCSSを追加し、テーマファイルを直接編集することなくテーマのCSSとして安全に組み込みます。

テーマカスタマイザー対応テーマの場合

Luminous以前のテーマの場合

応用編

特定のページのみに独自のCSSを反映する方法