独自スタイルシートで装飾する
Jimdo の機能では行き届かない要素のスタイルを設定したい場合は、独自のスタイルを記述して対応します。
HTML や CSS の知識とスキルが必要となるが、よりデザインに凝ることができます。
スタイルシートをホームページ内で定義する場合の記述
ホームページのヘッダーで、独自のスタイルシートを記述できます。
記述のルールとして、定義の前後は、以下のタグでスタイルシートを宣言します。
<style type="text/css"> ～ </style>
さらに CDATA セクションで囲む必要もありますが、Jimdo の場合は自動的に記述してくれます。
<style type="text/css">
/*<![CDATA[*/
セレクタ {
プロパティ:値；
}
/*]]>*/
</style>
ヘッダーにスタイルシートを定義する
➊ 管理メニューの「基本設定」から「ヘッダー編集」をクリックする
➋ テキストエリアにスタイルシートを記述する
<style type="text/css">
/*<![CDATA[*/
セレクタ {
プロパティ:値；
}
/*]]>*/
</style>
➌「保存」をクリックする
「保存」ボタンは「保存完了」に変わります。
❹「X 管理メニュー」をクリックして管理メニューを閉じる
❺ プレビューで、ブラウザを更新して、スタイルの適用を確認する
セレクタを絞り込むのに役立つブラウザの機能
スタイルを適用するタグを絞り込むために、上位タグに関連付けられた id セレクターやクラスセレクターなどの属性を調べたい場合は、現在カーソールを置いている箇所のタグ属性を表示する機能デベロッパーツールを使いましょう。子孫セレクタの割り出しに役立ちます。
デベロッパーツールの表示方法は、プレビュー状態で、
１．調べたいコンテンツを右クリックし、
２．「検証」（Google Chrome の場合）あるいは「要素を検証」（FireFox の場合）をクリックします。
