Skip to content

Commit a6d4f0f

Browse files
takusandayoootakusandayooo
committed
change: footerのスタイルを変更
1 parent 7fcbe8e commit a6d4f0f

File tree

4 files changed

+96
-78
lines changed

4 files changed

+96
-78
lines changed

‎_config.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ map: https://maps.app.goo.gl/4jicdzYEBzjtHd916
1717
twitter: DojoConJapan
1818
facebook: DojoConJapan
1919
email: [email protected]
20+
youtube: UCX3tz875ZDtU85rFkYuwl5w
2021
court:
2122
contact: https://forms.gle/7wSMSLEmjc4ucVoHA
2223
registration: https://dojocon-japan.doorkeeper.jp/events/176163

‎_includes/footer.html

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,26 @@
1-
<footer>
2-
<nav class="share">
3-
<div>
4-
<a href="https://www.facebook.com/share.php?u={{ site.url }}" target="_blank" class="share-facebook text-white" rel="noopener"><i class="fa-brands fa-square-facebook"></i> Facebook でシェア</a>
5-
</div>
6-
<div>
7-
<a href="https://x.com/share?url={{ site.url }}{{ page.url }}&text={{ site.title | url_encode }} - {{ page.title | url_encode }}&hashtags=DojoConJapan,CoderDojo&via={{ site.twitter }}&related={{ site.twitter }}" target="_blank" class="share-x text-white" rel="noopener"><i class="fa-brands fa-square-x-twitter"></i> X でシェア</a>
8-
</div>
1+
<footer class="site-footer">
2+
<div class="footer-logo">
3+
<img src="/img/2025/top/footer_logo.png" alt="DojoCon Japan 2025 Inspire Next." />
4+
</div>
5+
<div class="footer-social">
6+
<a href="https://twitter.com/{{ site.twitter }}" target="_blank" rel="noopener" class="social-x" aria-label="X">
7+
<i class="fa-brands fa-x-twitter" style="color:#000000;"></i>
8+
</a>
9+
<a href="https://www.facebook.com/{{ site.facebook }}" target="_blank" rel="noopener" class="social-facebook" aria-label="Facebook">
10+
<i class="fa-brands fa-facebook" style="color:#3b5998;"></i>
11+
</a>
12+
<a href="https://www.youtube.com/channel/{{ site.youtube }}" target="_blank" rel="noopener" class="social-youtube" aria-label="YouTube">
13+
<i class="fa-brands fa-youtube" style="color:#ff0000;"></i>
14+
</a>
15+
</div>
16+
<nav class="footer-links">
17+
<a href="/">ホーム</a>
18+
<a href="/code-of-conduct">行動規範</a>
19+
<a href="/sitemap">サイトマップ</a>
20+
<a href="/privacy">プライバシーポリシー</a>
21+
<a href="{{site.contact}}" target="_blank">お問い合わせ</a>
922
</nav>
10-
<nav class="footer-menu text-center">
11-
<ul class="footer-menu-list">
12-
<li><a href="/code-of-conduct">行動規範</a></li>
13-
<li><a href="/privacy">プライバシー・ポリシー</a></li>
14-
<li><a href="https://www.facebook.com/{{ site.facebook }}" target="_blank" rel="noopener">Facebook</a></li>
15-
<li><a href="https://twitter.com/{{ site.twitter }}" target="_blank" rel="noopener">Twitter</a></li>
16-
</ul>
17-
</nav>
18-
<p class="copyright text-center">&copy; DojoCon Japan {{ site.year }} 実行委員会</p>
19-
</footer>
23+
<div class="footer-copyright">
24+
&copy; DojoCon Japan 2025 実行委員会
25+
</div>
26+
</footer>

‎_sass/includes/footer.scss

Lines changed: 70 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,84 @@
1-
@use '../global/variables' as *;
1+
$footer-bg: #fff;
2+
$footer-link: #333;
3+
$footer-link-hover: #7cc224;
4+
$footer-icon-size: 2.2rem;
25

3-
/* stylesheet for `_includes/footer.html` */
6+
.site-footer {
7+
background: $footer-bg;
8+
text-align: center;
9+
padding: 40px 0 24px;
410

5-
footer {
6-
background-color: $secondary-color;
7-
color: #fff;
8-
padding-bottom: 12px;
9-
margin-top: auto;
10-
a {
11-
color: $white;
11+
.footer-logo img {
12+
max-width: 400px;
13+
width: 100%;
14+
height: auto;
15+
margin: 0 auto 24px auto;
16+
display: block;
1217
}
13-
.share {
14-
display: grid;
15-
grid-template-columns: 1fr 1fr;
18+
19+
.footer-social {
20+
margin-bottom: 24px;
21+
1622
a {
17-
line-height: 60px;
18-
height: 60px;
19-
width: 100%;
20-
display: block;
21-
text-align: center;
22-
text-decoration-line: none;
23+
display: inline-block;
24+
margin: 0 14px;
25+
font-size: $footer-icon-size;
26+
color: #000;
27+
width: 48px;
28+
height: 48px;
29+
line-height: 48px;
30+
border-radius: 50%;
31+
background: #ffffff;
32+
transition: background 0.2s, color 0.2s;
33+
2334
&:hover {
24-
opacity: .8;
35+
background: $footer-link-hover;
36+
color: #fff;
2537
}
2638
}
27-
&::after {
28-
content: '';
29-
clear: both;
30-
display: block;
31-
}
32-
.share-twitter,
33-
.share-facebook,
34-
.share-line {
35-
display: block;
36-
}
37-
.share-facebook {
38-
background-color: $color-facebook;
39-
}
40-
.share-x {
41-
background-color: $color-x;
42-
}
43-
.share-line {
44-
background-color: $color-line;
45-
display: none;
46-
}
4739
}
48-
.footer-menu {
49-
.footer-menu-list {
50-
list-style: none;
51-
padding: 0;
52-
margin-top: 1.5em;
53-
li {
54-
display: inline;
55-
padding: 0 .5em;
56-
a {
57-
&:hover {
58-
color: white;
59-
opacity: 0.8;
60-
}
61-
}
40+
41+
.footer-links {
42+
margin-bottom: 16px;
43+
44+
a {
45+
display: inline-block;
46+
margin: 0 10px;
47+
color: #000;
48+
text-decoration: none;
49+
font-size: 1rem;
50+
transition: color 0.2s;
51+
52+
&:hover {
53+
color: $footer-link-hover;
6254
}
6355
}
6456
}
65-
}
6657

67-
@media screen and (max-width: 800px) {
68-
.share a {
69-
width: 100%;
70-
}
71-
.share-line {
72-
display: block;
58+
.footer-copyright {
59+
font-size: 0.98rem;
7360
}
7461
}
62+
63+
// レスポンシブ対応
64+
@media (max-width: 600px) {
65+
.site-footer {
66+
padding: 32px 0 18px;
67+
68+
.footer-logo img {
69+
max-width: 220px;
70+
margin-bottom: 18px;
71+
}
72+
.footer-social a {
73+
margin: 0 8px;
74+
font-size: 1.7rem;
75+
width: 36px;
76+
height: 36px;
77+
line-height: 36px;
78+
}
79+
.footer-links a {
80+
margin: 0 5px;
81+
font-size: 0.97rem;
82+
}
83+
}
84+
}

‎img/2025/top/footer_logo.png

91.7 KB
Loading

0 commit comments

Comments
 (0)