テーマカラーの確認
現在は「」が適用されています。
「テーマカラー」とは，全てのページを同じ色調にし，サイト全体としての統一感を出そうというものです。
用意された「カラーセット」を切り換えて，季節の変わり目，学期の変わり目などには「テーマカラー」を変更して，気分を一新しましょう!!
変更は，簡単な操作で行うことができます。
用意された「カラーセット」を適用するとどんな印象に変わるか，上のボタンをクリックして確認することができます。
「css」フォルダ内の「settei.css」の中の１行を変更すると，全ページの「テーマカラー」を変更することができます。
事前に準備された「テーマカラー」は，「テーマカラーの待機」の部分に青色で示されています。
このうち１種類を赤の部分に設定します。
編集して保存した「settei.css」をアップロードすると，「テーマカラー」の変更が反映されます。
settei.css
@charset "utf-8";
/* ▼▼▼ここにテーマカラーセットを設定する▼▼▼ */
@import "color_marron.css"; ← 下の中から１つをここに設定する
/* ▲▲▲ここにテーマカラーセットを設定する▲▲▲ */
/* テーマカラーの待機（この中から１つを上に設定する）
@import "color_marron.css";
@import "color_darkolivegreen.css";
@import "color_midnightblue.css";
@import "color_orangered.css";
@import "color_purple.css";
@import "color_deeppink.css";
*/
ヘッダー部分（各ページ最上部）の「学校教育目標」及び スラードショー内の「スローガン」は，「settei.css」の次の赤字部分を書き変えると変更することができます。
settei.css
/*------------------------------------------------------------
★★ 全ページの h1 に表示される「学校教育目標」等の設定★★
------------------------------------------------------------*/
h1 p:before{
content:"自ら学び人間性豊かな子を育てる";
}
/*---------------------------------------
/* ★★ トップページのスライドショー内の
h2,h3 に表示される「学校教育目標」等の設定★★
--------------------------------------------*/
.slogan h2:before{
content:"自ら学び人間性豊かな子を育てる";
}
.slogan h3:before{
content:"未来を拓くリーダー性を育成する学校";
}
トップページの「お知らせ」，「コロナ関連」，「伊勢丘小トピックス」の表示件数等も「settei.css」の次の赤字部分を書き変えると変更することができます。
settei.css
*-----------------------------------------------------------------
/* ★★ トップページの「コロナ関連」コーナーの表示・非表示設定★★
-----------------------------------------------------------------*/
/*
表示・・・・ display:block;
非表示・・・ display:none;
*/
#corona_corner{
display:block;
}
※コロナ禍が収束したら，このコーナーを非表示にすることができます。
/*------------------------------------------------------------
/* ★★ トップページの各コーナーの表示件数の設定★★
------------------------------------------------------------*/
/* 「お知らせ」の表示件数指定 */
/* 次の「-n+?」の「?」に表示したい件数の数値を指定する */
#toppage #info li:nth-child(-n+8){
display: block;
}
/* 「新型コロナウィルス関連情報」の表示件数指定 */
/* 次の「-n+?」の「?」に表示したい件数の数値を指定する */
#toppage #corona li:nth-child(-n+3){
display: block;
}
/* 「伊勢丘小トピックス」の表示件数指定 */
/* 次の「-n+?」の「?」に表示したい件数の数値を指定する */
#toppage #topics li:nth-child(-n+2){
display: block;
}
