THE THOR ザ・トール 固定フッターエリア 背景色を変更

THE THOR の機能のひとつ「固定フッターエリア」の背景色を変更しました。

※カスタマイズは自己責任でお願いします。

 

THE THOR 固定フッターエリア を設定

 

固定フッターエリアは以下の手順で設定することができます。

スマホ用固定フッターの設定を「表示」にする。区切りの装飾は「無し」項目は好みで。

・固定フッターエリア 目次に戻る ボタンを設置

 

THE THOR 固定フッターエリア 背景色を変更

追加CSSにコードを記述します。

記述するコードは以下の通り。

 

単色カラーへ変更

/*固定フッターエリア単色カラー*/
.controllerFooter{
background-color: #b22222;
}

上記のコードで背景色は赤になります。

#b22222の数値を好みのカラーの数値に変更してください。

 

グラデーションカラーへ変更

現在の当サイトではこちらを設定しています。単色に比べ少々手間がかかります。

/*固定フッターエリア背景グラデ*/
.controllerFooter{
background: linear-gradient(to bottom, rgba(255,255,255,0),#191919);
}

linear-gradient(to bottom, rgba(255,255,255,0),#191919);の部分がグラデーションを指定しています。

(　)の中を変更すると様々なグラデーションを作ることができます。

 

項目は以下の通り。

• 方向または角度
• 始まりのカラーと開始位置
• 終わりのカラーと終了位置

方向はto topやto leftなど、角度の場合はdegを使います。30度なら30deg
始まりの場所と終わりの場所は％で指定
初期設定と同じで良い部分は省略可能です。サンプルのコードでは開始位置などが省略されています。

 

 

カラーを追加すると3色や4色のグラデーションも可能です。

• 30度の角度
• 20％の位置から透過0.5のオレンジでスタート
• 50％の位置で透過0.2のピンク
• 100％の位置で透過なしの水色

 

グラデーションの指定は以下の通り。

 background: linear-gradient(30deg,rgba(255,102,0,0.5) 20%, rgba(200,102,100,0.2) 50%,rgba(50,150,200,1) 100%);

少し本題からそれました。固定フッターエリアの場合はシンプルなグラデーションのほうが良いかと思います。

 

固定フッターエリア 透過グラデーションを使う理由

 

フッターを固定すると画面を占有するので、どうしても圧迫感があります。圧迫感を解消するために透過のグラデーションを使用しています。これは固定ヘッダーも同様です。

ちなみにTHR THOR のヘッダーの色を変更する場合はクラス名を.l-headerに変更すればOKです。

 

固定フッターエリアを透過するときの注意

隠れていたボタンが見えてしまう。

固定フッターエリアを半透明にすると右下に「TOP」に戻るボタンが見えてしまうので消します。

/*固定フッターエリアを半透明にして下に出てくるトップに戻るボタンを消去する*/
@media screen and (max-width : 767px){
.bottomFooter__topBtn{
opacity:0;}
}

消す方法はいくつかあると思います。ここでは透明にして見えなくしています。

 

透過で固定フッターエリアのアイコンが見づらくなる

文字の上、写真の上に重なっても見やすい色にアイコンのカラーを変更します。

/*固定フッターエリア*/
/*固定フッターエリアアイコンカラー*/
.controllerFooter__item{
color :#ffffff;
}

#ffffffがカラーになります。好みの色に変更してください。

 

あとがき

 

実装してから時間が少し経ってしまったので間違えている場所があるかもしれません。

お気づきの点があれば是非ご連絡ください。

※カスタマイズは自己責任でお願いします。

[wpap service=”with” type=”detail” id=”4297103028″ title=”世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書”]