CUSTOMIZE デザインをカスタマイズする

1. デザインをカスタマイズする

ポートフォリオのページデザインは、HTMLなどの専門知識がなくても簡単にカスタマイズできます。
カスタマイズするには、エディレコへログイン後に表示される「マイページ」にある「ポートフォリオ一覧」から、デザインを変更したいポートフォリオの「詳細を見る」ボタンをクリックします。

edireco
edireco

「ポートフォリオ編集画面」トップページが表示されたら、「デザインカスタム」ボタンをクリックします。

edireco
edireco

2. 「デザインカスタム」の機能

「デザインカスタム」ページでは、以下のデザイン変更の設定ができます。

  • ①アイキャッチスペースのレイアウト変更(用意されているものから選択)
  • ②実績・スキル紹介スペースのレイアウト変更(用意されているものから選択)
  • ③デザインをカスタムする(背景やテキストなどの色設定、画像アップロード)

ポートフォリオが公開・非公開にかかわらずカスタマイズ可能です。また「スキルや経験」、「制作実績」を登録する前でもカスタマイズ可能です。

edireco
edireco

3. 変更したデザインをプレビューで見る

カスタマイズ中のデザインは、簡易的なプレビューで表示を確認することができます。
プレビューを見るには以下の2つの方法があります。

  • ①「デザインカスタム」ページ左下に表示される自動プレビュー
  • ②「プレビューを見る」ボタンで表示されるプレビュー
edireco
edireco

4. 「デザインを確定する」ボタン

カスタマイズ中のデザインは、「デザインを確定する」ボタンを押すと保存されます。ポートフォリオを公開中の場合は、そのまま公開ページにも反映されます。

カスタマイズ完了後や、作業途中の状態を保存しておきたい場合は、「デザインを確定する」ボタンを押すのを忘れないようにご注意ください。

edireco
edireco

5. 「元の状態に戻す」ボタン

「カスタマイズ作業中には、「元の状態に戻す」ボタンが表示されます。
デザインをカスタマイズ前の状態に戻したい場合は、このボタンを押すと設定がリセットされて、元の状態に戻すことができます。

なお「元の状態」とは、一番最後に「デザインを確定する」ボタンを押して保存した時点の状態を指します。

edireco
edireco

6. 色のカスタマイズ

ポートフォリオページで表示される各パーツの色をカスタマイズすることができます。カスタマイズできるのは以下の色です。

  • ボディ背景
  • コンテンツ背景
  • テキストカラー
  • リンクカラー
  • 名前テキストカラー
  • メインカラー
edireco
edireco

色の変更をしたい場合は、変更したいパーツの右側にあるアイコンをクリックして、カラーピッカーを表示させます。カラーピッカーの上でマウスを動かして好きな色を選ぶことで設定します。
色の細かな設定をしたい場合は、カラーピッカーの下にあるカラーコード入力欄を使って数値で指定することもできます。

数値指定をするカラーコードの種類は、RGB、HSL、HEX(HTMLカラーコード)の中から選んで指定できます。カラーコードの種類は「RGB」と表示されたエリアをクリックすると切り替わります。

edireco
edireco

Point

色をカスタマイズする時、「自分にはカラーデザインのセンスがない…」、「どんな色味にすれば良いのか分からない…」と悩んでしまうこともあります。そんな場合は、下記ページから、おすすめの配色セットを選んで設定してみてください。

すぐに使える!色彩心理学で選ぶおすすめ配色セットはこちら

7. 画像のアップロード

ポートフォリオページで表示される画像をカスタマイズできます。アップロードできる画像は以下です。

  • タイトル画像:メインで表示される画像
  • アイコン画像:自己PRとセットで表示される画像

※アイコン画像は、「ポートフォリオ編集画面」トップページからも変更できます。

※アイコン画像は、1ユーザーで1種類のみ登録・表示できます。複数のポートフォリオを作成した場合でも、ポートフォリオごとに別のアイコン画像を登録・表示することはできません。

edireco
edireco

画像の変更をしたい場合は、変更したいパーツの右側にあるアイコンを押して、画像アップロード機能を表示させます。

edireco
edireco

画像アップロード機能が表示されたら、アップロード方法を選んでボタンをクリックします。アップロード方法は、以下の中から選ぶことができます。

  • ①画像選択:パソコンなどに保存してある画像ファイルをアップロードする場合
  • ②カメラを起動:内蔵カメラで写真撮影をしてアップロードする場合
  • ③画像なし:画像を設定しない場合(デフォルトの画像が表示されます)
edireco
edireco

アップロード方法に「画像選択」または「カメラを起動」を選んだ場合は、設定する画像を編集することができます。「サイズ」、「回転」を調整して、黒い枠に収まるように画像を編集してください。「決定」ボタンを押すとアップロードが完了します。

edireco
edireco

PAGE TOP