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

040 スタイルの指定

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

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

ここで扱うスタイルは、「ホームページ全体に対してスタイルを指定する」ものとなります。

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

また、大見出しに限らず、全体の雰囲気を変更するために、全体のスタイルを指定することもできます。

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

スタイル指定の範囲

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

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

[管理]メニューの[スタイル]ボタンは「ローラー」のボタン

独自テンプレートの場合は、「A」マーク

汎用テンプレートの場合

jdg040_00
jdg040_00

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

独自テンプレートの場合

jdg040_01
jdg040_01

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

スタイル詳細設定のオン/オフ切り替えスイッチは、「ホームページ全体」か「詳細部分」を変更するか切り替えられます。

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

このスイッチを「オン」にすると、それぞれの項目に対して細かいスタイルが変更できます。また、スイッチを「オフ」にすると、レイアウト全体に対して広範囲のスタイル変更ができます。

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

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

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

➊ 管理メニュー[スタイル]を選択します。

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

➋ 詳細設定スイッチをオフにします。

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といった、ウェブサイト上に落ちている色をそのまま使えるような便利なソフトがおすすめです。