hexoでイラスト用ポートフォリオサイトを作ったので得た学びとかを書く記事です。
サイトはこれ → https://sirakababiome.com/
↑完成したデザイン
ポートフォリオサイトを作るにあたって
今回作るにあたって
- 散々先生方から文句を言われてきた「単調すぎる」という問題をどうにかしよう
- cssフレームワークは使わない
というのを意識しました。
単調すぎる
これはひとえに私の思想が「とにかく見やすいほうが大事」ということから装飾少なめのサイトばっか作ってきたわけですが、あんまり評判がよろしくない。
なので、今回はwebフォントを使ったり、スライダーを導入したり、できることからいい感じにしてみました。
TOPページに絵が流れるスライダーがあるとやっぱりうれしくなりますね。
使用したのは Splide です。
webフォントはあんまり使いたくない派なんですが、やっぱり標準の角ゴシックだと雰囲気が出なかったのでAdobeフォントで良いのを見つけて導入してみました。
結果的に私の絵柄に合う柔らかい雰囲気になったと思います。
あとは背景にSVGを散らして動かしたりなんかして、のっぺりさも減らした……つもりです。
CSSフレームワークは使わない
Materialize大好きマンだったんですが、使用しないコンポーネントが多いこと、Materialize由来のバグが発生すると私は対処できないことを理由に今回は採用しませんでした。
とはいえMaterializeで得た知識が無駄になったとかいうわけではなく、cssのクラス名の名付けなどはMaterializeを参考にしました。感謝。
使用しているもの一覧
実際のコード（一部）
レスポンシブ対応の文字にしたり汎用のやつ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
| .full-width {
margin: 0.5rem 0;
width: 100%;
text-align: center;
justify-content: center;
}
main {
min-height: 98vh;
}
html{
font-size: inherit;
}
html,body{
overflow-x: hidden;
}
img,video{
width: 100%;
max-width: 100%;
height: auto;
max-height: 100%;
object-fit: cover;
}
body{
font-size: 100%;
line-height: 1.6;
h1 {
font-size: 2rem;
font-weight: 600;
}
h2 {
font-size: 1.5rem;
font-weight: 600;
}
h3 {
font-size: 1.4rem;
font-weight: 600;
margin-top: 2rem;
margin-bottom: 0.2rem;
}
h4 {
font-size: 1.2rem;
font-weight: 600;
margin-top: 1rem;
margin-bottom: 0.2rem;
}
h5 {
font-size: 1.1rem;
font-weight: 600;
margin-top: 1rem;
margin-bottom: 0.2rem;
}
h6 {
font-size: 1.05rem;
font-weight: 600;
margin-top: 1rem;
margin-bottom: 0.2rem;
}
}
@media screen and (max-width:480px){
body{
h1 {
font-size: 1.6rem;
font-weight: 600;
}
h2 {
font-size: 1.5rem;
font-weight: 600;
}
h3 {
font-size: 1.4rem;
font-weight: 600;
}
h4 {
font-size: 1.2rem;
font-weight: 600;
}
h5 {
font-size: 1.1rem;
font-weight: 600;
}
h6 {
font-size: 1.05rem;
font-weight: 600;
}
main {
li::marker{
font-weight: 600;
}
li{
margin-top: 0.65rem;
}
}
}
}
|
Glightboxに対応させるやつ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| hexo.extend.filter.register('after_post_render', function(data){
const imgRegex = /<img(?:.|\n)*?>/g;
const contentWithImg = data.content;
const contentWithATags = contentWithImg.replace(imgRegex, (imgTag) => {
const srcRegex = /src="([^"]+)"/;
const altRegex = /alt="([^"]+)"/;
let srcMatch = imgTag.match(srcRegex);
const altMatch = imgTag.match(altRegex);
imgTag = imgTag.replace(".png",".webp")
if (srcMatch ) {
const src = srcMatch[1].replace(".png",".webp");
const alt = altMatch && altMatch[1] ? altMatch[1] : '';
return `<a href="${src}" title="${alt}" class="glightbox" data-gallery="postImg">${imgTag}</a>`;
} else {
return imgTag;
}
});
data.content = contentWithATags;
return data;
});
|
動画の上に文字乗っけるやつ
1
2
3
4
5
6
7
8
| <a href="https://videos.b-g.icu/videos/making/20250403084434_67ee4a727ee7c.mp4" class="glightbox">
<span class="play">
<span>クリックで再生</span>
<span class="icon">play_circle</span>
</span>
<video src="https://videos.b-g.icu/videos/making/20250403084434_67ee4a727ee7c.mp4"></video>
</a>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| a:has(> video) {
position: relative;
display: block;
width: 100%;
height: 100%;
video {
display: block;
filter: brightness(0.95);
transition: filter 0.2s;
}
>span {
display: flex;
flex-flow: column;
width: 100%;
height: 100%;
position: absolute;
text-align: center;
justify-content: center;
align-items: center;
>span {
color: var(--overlay-black-on-fontcolor);
text-shadow: var(--text-shadow);
z-index: 100;
display: block;
font-weight: 600;
}
>span.icon {
font-family: var(--icon-font);
font-size: 64px;
transition: scale 0.2s;
}
}
}
|
SVGを背景に散らすやつ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.back-svg{
width: 100%;
display: block;
position: fixed;
top: 0px;
filter: opacity(30%);
svg{
max-width: 256px;
position: absolute;
fill: var(--font-link-color);
stroke: var(--font-link-color);
}
}
|
- positionをfixedにして、子要素のsvgをabsoluteにするといい感じに背景に散らせる
- 位置はtop left right bottomなどで指定したらいい感じになった
終わりに
ここどうやって実装してるんすか！ ってところあったら聞いて下さい。
終わり。
