Raptioでは、サイトの見た目を調整するためにテーマディレクトリ内のスタイルシートを直接編集します。外部のプラグインに頼らず、CSSを直接制御することで、サイトの表示速度を落とさずにデザインを最適化できます。

1. スタイルシートの場所と編集

各テーマのディレクトリ内には、スタイルを定義する style.css が存在します。

ファイルの特定: /themes/有効中のテーマ名/style.css をテキストエディタで開きます。

編集: サイト全体のフォント、配色、余白などを記述します。

保存とアップロード: 編集完了後、ファイルをサーバーへ上書きアップロードします。

反映確認: ブラウザのキャッシュをクリアしてサイトを再読み込みし、変更が反映されているか確認します。

2. 効率的なカスタマイズ手順

直接テーマの style.css を編集する際は、以下のステップで進めるのが安全です。

ブラウザ開発ツールの活用: ブラウザ（Chromeなど）の「検証（Developer Tools）」機能を使用します。これにより、編集前にブラウザ上でリアルタイムにCSSを試行錯誤できます。

セレクタの特定: 調整したい要素（見出し、ボタン、サイドバー等）のクラス名やIDを特定し、適用したいスタイルをテストします。

コードの反映: 意図したデザインになったら、そのCSSコードを実際の style.css ファイルに追記・修正します。

3. 推奨される編集ルール

追記の推奨: 既存のスタイルを削除する前に、末尾に新しいスタイルを追記することで、元のデザインに戻しやすくします。

コメントアウトの活用: どの部分を何のために修正したのか、/* 修正内容 */ のようにコメントを残す癖をつけましょう。

メディアクエリの利用: モバイル表示を意識し、画面サイズごとのスタイル定義を適宜追加してください。

注意事項

キャッシュの影響: Webサーバー側でキャッシュが効いている場合、CSSを更新してもブラウザに即時反映されないことがあります。その際は、サーバー側のキャッシュ削除または設定の再読み込みを行ってください。

バックアップ: 編集を開始する前に、必ず元の style.css をコピーしてバックアップファイルを保管してください。