CSS 編集

ナビゲーションの「設定」→「CSS 編集」タブで、ポートフォリオの CSS を直接編集できます。

CSS 編集画面

画面構成

左側	右側
CSS コードエディタ	プレビュー（CSS の変更がリアルタイムで反映）

操作方法

スキンをコピーして編集する

既存のスキンをベースにカスタマイズする場合は以下の手順で行います。

「コピー元を選択」ドロップダウンからベースにしたいスキンを選択します。
「スキンをコピー」ボタンをクリックすると、エディタにそのスキンの CSS が読み込まれます。
エディタ内を直接編集します。

CSS を保存する

編集が完了したら「保存する」ボタンをクリックして保存します。

プレビューの表示切替

右側のプレビューはデバイスサイズを切り替えて確認できます。

アイコン	表示サイズ
PC アイコン	デスクトップ表示
タブレットアイコン	タブレット表示
スマホアイコン	モバイル表示

CSS 変数の例

スキンは CSS カスタムプロパティ（変数）で色やフォントサイズを管理しています。

:root {
  --primary-color: #e08c1e;      /* メインカラー */
  --secondary-color: #eb2d10;    /* サブカラー */
  --white-color: #fff;
  --dark-grey: #333333;
  --default-font-size: 1.6rem;
  --big-font-size: 4rem;
}

変数の値を変更するだけで、ポートフォリオ全体の配色を一括変更できます。

次のステップ

ポートフォリオを公開する →