目的
- コピーライトバーの上に、ロゴのみを目立つ形で載せたい。
実行結果
Copyright© 2025-2026 プログラミング備忘録 foo All Rights Reserved.
解説
- ロゴのみを中央に置きました。ロゴを主張させたいサイトにオススメです。
HTML
<footer>
<div class="structure_5_3"><img src="../../image/structure/5-3.png" /></div>
<div>Copyright© 2025-2026 <a href="https://note-book.foo/">プログラミング備忘録 foo</a> All Rights Reserved.</div>
</footer>CSS
footer {
}
.structure_5_3 {
background-color: #FCFAF2;
display: flex;
justify-content: center;
align-items: center;
width: 96%;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 30px;
padding-left: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
overflow: hidden;
z-index: 0;
}
.structure_5_3::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='structure_5_3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.12' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeDiffuseLighting in='noise' lighting-color='%23ffffff' surfaceScale='2.5'%3E%3CfeDistantLight azimuth='45' elevation='80'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23structure_5_3)'/%3E%3C/svg%3E");
background-size: 80px 80px;
background-repeat: repeat;
pointer-events: none;
mix-blend-mode: multiply;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: "";
position: absolute;
opacity: 0.38;
z-index: -1;
}
.structure_5_3 img {
width: 20%;
}
.structure_5_3 + div {
font-size: 16px;
line-height: 1.8;
color: #FFFFFF;
background-color: #2D4032;
display: flex;
justify-content: center;
align-items: center;
width: 96%;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
overflow: hidden;
z-index: 0;
}
.structure_5_3 + div::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='structure_5_3_dark'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.15' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeDiffuseLighting in='noise' lighting-color='%23ffffff' surfaceScale='4.0'%3E%3CfeDistantLight azimuth='45' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23structure_5_3_dark)'/%3E%3C/svg%3E");
background-size: 70px 70px;
background-repeat: repeat;
pointer-events: none;
mix-blend-mode: screen;
width: 100%;
height: 100%;
content: "";
position: absolute;
top: 0;
left: 0;
opacity: 0.14;
z-index: -1;
}
.structure_5_3 + div a {
color: #FFFFFF;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;
}
.structure_5_3 + div a:hover {
opacity: 0.95;
}footer {
}
.structure_5_3 {
background-color: #FCFAF2;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 30px;
padding-left: 0px;
position: relative;
overflow: hidden;
z-index: 0;
}
.structure_5_3::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='structure_5_3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.12' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeDiffuseLighting in='noise' lighting-color='%23ffffff' surfaceScale='2.5'%3E%3CfeDistantLight azimuth='45' elevation='80'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23structure_5_3)'/%3E%3C/svg%3E");
background-size: 80px 80px;
background-repeat: repeat;
pointer-events: none;
mix-blend-mode: multiply;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: "";
position: absolute;
opacity: 0.38;
z-index: -1;
}
.structure_5_3 img {
width: 20%;
}
.structure_5_3 + div {
font-size: 11px;
line-height: 1.8;
background-color: #2D4032;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
position: relative;
overflow: hidden;
z-index: 0;
color: #ffffff;
}
.structure_5_3 + div::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='structure_5_3_dark'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.15' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeDiffuseLighting in='noise' lighting-color='%23ffffff' surfaceScale='4.0'%3E%3CfeDistantLight azimuth='45' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23structure_5_3_dark)'/%3E%3C/svg%3E");
background-size: 70px 70px;
background-repeat: repeat;
pointer-events: none;
mix-blend-mode: screen;
width: 100%;
height: 100%;
content: "";
position: absolute;
top: 0;
left: 0;
opacity: 0.14;
z-index: -1;
}
.structure_5_3 + div a {
color: #FFFFFF;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;
}