THE THORは色々な設定ができるのですが、フッターエリア背景色やコピーライトの文字色の設定は変更できる項目にありません。
設定できないのならCSSでカスタマイズしましょう♪
この記事では、フッターエリアの背景色、フッターのコピーライトの文字色の変更とTOPページにもどるボタンのカスタマイズについて紹介します。
色を変更するためにカラーコードが必要になります。
カラーコードについては下の記事で紹介しています。
＞＞＞カラーコードまとめ＆ クラシックエディタで コードを取得
THE THOR♪CSSコードの張り付け場所
「外観」→「カスタマイズ」→「追加ｃｓｓ」の順にクリックしていきます。
THE THORフッター♪背景色を変えるためのコード
コードは全て半角英数字です。
「/* 」〜「 */」で囲んでいる部分はコメント文になります。
/*フッターの背景色を変える*/
.bottomFooter {
background:#f9cfd1;
}
PRTHE THORフッター♪背景色を変えるためのカラーコードの紹介
backgroundがh背景色の指定になります。
＃から始まるカラーコードをご自分の好きな文字色のコードに変えて使用してください。
薄紫
background:#E6E6FA;
ベージュ
background:#FAEBD7;
オレンジ
background:#FFD0B4;
緑
background:#C6E4D5;
私の好きな淡い色合いを並べてみました(^^♪
この＃から始まるコードがカラーコードになります。
色を変えたい場合はこのカラーコードを変えます。
THE THORフッター♪文字（グレー）の色を変えるためのコード
THE THORフッター♪文字の色を変えるためのコードの紹介
colorが文字色の指定になります。
＃から始まるカラーコードをご自分の好きな文字色のコードに変えて使用してください。
THE THORフッター♪リンク設定してある文字色（白）を変えるためのコード
リンクを設定してある白文字の色を変更しています。
THE THORフッター♪グレー文字の色を変えるためのコードの紹介
グレーの文字同様の指定になります。
colorが文字色の指定になりますので、＃から始まるカラーコードをご自分の好きな文字色のコードに変えて使用してください。
TOPへ戻るボタンの色を変えて丸くする
このサイトで使用しているコードになります。
.bottomFooter__topBtn{
border-radius: 50%;
box-shadow: 2px 2px 6px -1px rgba(0, 0, 0, 0.3);
background: linear-gradient(to top, #c49b7c 50%,#d9bda7);
}
コードの説明
border-radius: 50%; → 丸形に
box-shadow: 2px 2px 6px -1px rgba(0, 0, 0, 0.3); → 影
background: linear-gradient(to top, #c49b7c 50%,#d9bda7); → ボタンのグラデーションの色指定
#c49b7c 50% → 基本となるカラーコードとグラデーションの位置を％で指定しています。
#d9bda7 → 上のカラーコードを指定します。
丸くしたくない時は、「丸形に」をコピペしないでください。
影をつけたくない時も同様です。
TOPへ戻るボタンの位置を変える
このサイトで使用しているコードです。
.bottomFooter__topBtn {
right: 15%;
}
TOPへ戻るボタンを大きくする
このサイトで使用しているコードです。
.bottomFooter__topBtn {
width: 70px;
height: 70px;
}
THE THORのフッター色を自由自在に！CSSコピペで差をつけよう まとめ
この記事では、THE THORのフッターエリアの色をCSSで自由自在にカスタマイズする方法をご紹介しました。
CSSをコピペするだけで、あなたのサイトの個性を際立たせるフッターデザインが完成します。
ぜひこの記事を参考に、理想のフッターデザインを実現してください。
他の記事も参考に、あなただけのオリジナルサイトを構築してください(^ ^)