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

独自スタイルシートで装飾する

Jimdo の機能では行き届かない要素のスタイルを設定したい場合は、独自のスタイルを記述して対応します。

HTML や CSS の知識とスキルが必要となるが、よりデザインに凝ることができます。

スタイルシートをホームページ内で定義する場合の記述

ホームページのヘッダーで、独自のスタイルシートを記述できます。

記述のルールとして、定義の前後は、以下のタグでスタイルシートを宣言します。

<style type="text/css"> ~ </style>

 

さらに CDATA セクションで囲む必要もありますが、Jimdo の場合は自動的に記述してくれます。

 

<style type="text/css">

/*<![CDATA{*/

 

 

セレクタ {

 プロパティ:値;

}

 

 

/*]]>*/

</style>


ヘッダーにスタイルシートを定義する

➊ 管理メニューの「基本設定」から「ヘッダー編集」をクリックする

➋ テキストエリアにスタイルシートを記述する

➌「保存」をクリックする

「保存」ボタンは「保存完了」に変わります。

❹「X 管理メニュー」をクリックして管理メニューを閉じる

❺ プレビューで、ブラウザを更新して、スタイルの適用を確認する

セレクタを絞り込むのに役立つブラウザの機能

スタイルを適用するタグを絞り込むために、上位タグに関連付けられた id セレクターやクラスセレクターなどの属性を調べたい場合は、現在カーソールを置いている箇所のタグ属性を表示する機能デベロッパーツールを使いましょう。子孫セレクタの割り出しに役立ちます。

デベロッパーツールの表示方法は、プレビュー状態で、

1.調べたいコンテンツを右クリックし、

2.「検証」あるいは「要素を検証」をクリックします。