今回はフッターのデザインを変更したいと思います。
目次
デザインの確認
ヘッダーロゴの画像を設定したのですが、フッターロゴの画像は未入力だとヘッダーロゴが出力されるようになっています。
![](https://rengelog.com/wp-content/uploads/2021/09/rengelog-footer-001-1024x685.png)
そのままですと少し画像が大きいので、小さい画像を用意します。
フッター画像の設定
![](https://rengelog.com/wp-content/uploads/2021/09/rengelog_logo_footer.png)
こちらの画像か、ご自身のサイトの画像をご用意ください。
Cocoon 設定 → フッター タブをクリックして、フッターロゴに画像をアップロードします。
![](https://rengelog.com/wp-content/uploads/2021/09/rengelog-footer-002-1024x488.png)
あまり変わって無いですが、このようになります。
![](https://rengelog.com/wp-content/uploads/2021/09/rengelog-footer-003-1024x641.png)
CSS
続いてCSSを書いていきます。
/* フッター */
#footer {
background-image: linear-gradient(to right, #DD5E89 0%, #F7BB97 51%, #DD5E89 100%);
}
.footer-bottom-logo img {
height: 30px;
padding-bottom: 10px;
}
フッターロゴが大きいので、CSSで調整しています。
#footer {
background-image: linear-gradient(to right, #DD5E89 0%, #F7BB97 51%, #DD5E89 100%);
}
またヘッダーのデザインと同様のグラデーションを指定しています。
ご自身のサイトに合わせた色に変更する場合は、こちらを変更すれば良いです。
![](https://rengelog.com/wp-content/uploads/2021/09/rengelog-footer-004-1024x641.png)
このような画面になっていると思います。
コメント