SAMPLE IMAGE この画像は差し替えてご利用ください

040 スタイルの指定

Jimdo には、文字の色や背景色などをカスタマイズできるスタイルが用意されている。

040-1 スタイル指定の範囲について

一括変更

全体の雰囲気を変更するために、全体のスタイルを指定することもできます。これを「一括変更」と呼びます。

例えば、メニューバーをはじめ、見出し、横線(水平線)、リンクなどすべてを同時に変更することもできます。

jdg040_12
jdg040_12
jdg040_13
jdg040_13

詳細設定

ここで扱うスタイルは、特定のコンテンツのスタイルだけを設定するものとなります。

例えば、「大見出し」の書式をスタイルで指定した場合は、ホームページ内にあるすべての「大見出し」が同じ書式になる。

スタイル指定の範囲

[033 見出しと文書の作成]では、「文書」のコンテンツの個々の文字列(テキスト)または段落に書式を指定したが、ここ「040 スタイルの指定」で指定する書式は、ホームページ全体の「書式」に指定されることに注意すること。

040-2 汎用テンプレートでのスタイルの設定開始方法

[スタイル設定]パネルを表示する

jdg040_00:「管理メニュー」を開く
jdg040_00:「管理メニュー」を開く

管理メニュー」をクリックする。

jdg040_01:「デザイン」をクリックする
jdg040_01:「デザイン」をクリックする

デザイン」をクリックする。

jdg040_11:「スタイル」をクリックする
jdg040_11:「スタイル」をクリックする

スタイル」をクリックする。

画面上部にスタイル設定パネルが表示される

jdg040_14:スタイル設定パネル
jdg040_14:スタイル設定パネル

040-3 スタイル詳細設定のスイッチ オフ → 全体のスタイル設定

スタイル詳細設定のオン/オフ切り替えスイッチは、「一括変更」か「詳細部分」を設定するか切り替えられます。

jdg022_05:スタイル詳細設定スイッチのオン/オフの意味
jdg022_05:スタイル詳細設定スイッチのオン/オフの意味

スイッチを「オフ」にすると、レイアウト全体に対して広範囲のスタイル変更ができます(「一括変更」)。基本となる色を一つ選ぶと、その色に合わせて全体の配色(見出し、テキストリンク、ボタンの色など)を自動的に設定してくれます。統一感のある配色が簡単に行えます。

 

レイアウト全体に指定できるスタイルは、全体の[配色(カラー)]と、見出しとテキストの[フォント]です。

このスイッチを「オン」にすると、それぞれの項目に対して細かいスタイルが変更できます(「詳細設定」)。

まず全体のスタイルを設定し、次に個々のスタイルを設定する

個別にスタイル変更をしたあとで、「オフ」に切り替えてスタイル変更をしてしまうと、先に変更した部分が上書きされてしまいます。まずはスイッチを「オフ」にして全体のスタイル変更(「一括変更」)をしてから、「オン」に切り替え「詳細設定」することがお奨めです。

040-3 スタイル詳細設定のスイッチ オフ → 一括変更

➊ [スタイル設定]パネルを表示する

➋ 詳細設定スイッチをオフにする

jdg040_02:詳細設定スイッチをオフ
jdg040_02:詳細設定スイッチをオフ

➋ カラーを選択してスタイルの変化を確認してみます。

以下のカラーの設定をスライドショーで表示します。

  • rgb(206, 0, 0)
  • rgb(232, 145, 42)
  • rgb(242, 195, 20)
  • rgb(66, 129, 143)
  • rgb(103, 75, 169)
  • rgb(168, 75, 121)
  • rgb(119, 166,48) ← オリジナルカラー

040-4 スタイル詳細設定のスイッチ オン → 個別のスタイル設定

スタイル詳細設定スイッチをオンにして、個別のスタイルを設定します。

その詳細は、以下のページにて紹介します。

040-5 カラーパレットについて

Jimdo のスタイルや背景、文字の色などを変更するときに表示されるのが「カラーパレット」です。実は色を変更する他、透明度の設定などもできたりします。

カラーパレットでできること

カラーパレットは、「文章」機能で文字の色を変えるときや、「スタイル」機能で背景、ナビゲーション、見出し等のカラー設定をする際に表示されます。

カラーパレットの基本機能

jdg040_10:カラーパレット
jdg040_10:カラーパレット

①カラーチップ

あらかじめ用意されているカラーチップから選ぶことができる

②最近使ったカラー

カラーパレット機能で使用したカラーが新しい順に表示されている

③カラーセレクター

表示されているカラースライダー(④)で選んだ色の濃さを選ぶことができる

④カラースライダー

スライダーを動かすことで、使用する色を変更することができる

⑤透明度

スライダーを動かすことで、透明度を設定することができる。左に動かすほど透明に近くなる

⑥カラーコード

色番号を指定して、カラーを設定することができる

040-6 カラーコードを調べる

アイコンを使ったり編集するときは、カラーコード(RGBや16進数)をメモしておくと、同じ色を繰り返し使うことができます。カラーコードを調べるには、ColorZillaEyeDropperといった、ウェブサイト上に落ちている色をそのまま使えるような便利なソフトがおすすめです。