オプションにない箇所を好みのスタイルにカスタマイズする

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

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

前提事項

Google Chrome での作業を前提としています。

INDEX

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

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

ショートカットで呼び出す場合

【Command】(Windowsの場合は Ctrl) + 【Shift】 + 【M】

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

重要

DigiPressのモバイルテーマで正しく表示確認を行うには、デバイス選択後、ページを更新してください。

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

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

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

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

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

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

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

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

Luminous以前のテーマの場合

応用編