質問編集履歴
7
htmlを実際に出力した形に変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
<section class="workstyle-copy">
|
|
22
22
|
<div class="workstyle-copy-wrap">
|
|
23
23
|
<!-- 背景用の動画ファイル -->
|
|
24
|
-
<video class="workstyle-copy-video" poster="/img/high-five.png" autoplay loop muted >
|
|
24
|
+
<video class="workstyle-copy-video" poster="https://koukoku-unyou.com/wp-content/themes/%E5%BA%83%E5%91%8A%E9%81%8B%E7%94%A8%28Layout-07%29//img/high-five.png" autoplay loop muted >
|
|
25
|
-
<source src="/img/city.mp4">
|
|
25
|
+
<source src="https://koukoku-unyou.com/wp-content/themes/%E5%BA%83%E5%91%8A%E9%81%8B%E7%94%A8%28Layout-07%29//img/city.mp4">
|
|
26
|
-
<source src="/img/high-five.mov">
|
|
26
|
+
<source src="https://koukoku-unyou.com/wp-content/themes/%E5%BA%83%E5%91%8A%E9%81%8B%E7%94%A8%28Layout-07%29//img/high-five.mov">
|
|
27
27
|
</video>
|
|
28
28
|
<!-- オーバーレイ -->
|
|
29
29
|
<div class="overlay"></div>
|
6
cssをわかりやすいように修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -114,6 +114,7 @@
|
|
|
114
114
|
font-weight: bold;
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
+
//hatenaさんに頂いたコード
|
|
117
118
|
.workstyle-copy-wrap {
|
|
118
119
|
position: relative;
|
|
119
120
|
}
|
5
htmlの更新
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
<section class="workstyle-copy">
|
|
22
22
|
<div class="workstyle-copy-wrap">
|
|
23
23
|
<!-- 背景用の動画ファイル -->
|
|
24
|
-
<video class="workstyle-copy-video" poster="
|
|
24
|
+
<video class="workstyle-copy-video" poster="/img/high-five.png" autoplay loop muted >
|
|
25
|
-
<source src="
|
|
25
|
+
<source src="/img/city.mp4">
|
|
26
|
-
<source src="
|
|
26
|
+
<source src="/img/high-five.mov">
|
|
27
27
|
</video>
|
|
28
28
|
<!-- オーバーレイ -->
|
|
29
29
|
<div class="overlay"></div>
|
4
css更新
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -114,4 +114,15 @@
|
|
|
114
114
|
font-weight: bold;
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
+
.workstyle-copy-wrap {
|
|
118
|
+
position: relative;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.workstyle-copy-title {
|
|
122
|
+
position: absolute;
|
|
123
|
+
top: 50%;
|
|
124
|
+
left: 50%;
|
|
125
|
+
-webkit-transform: translate(-50%, -50%);
|
|
126
|
+
transform: translate(-50%, -50%);
|
|
127
|
+
}
|
|
117
128
|
```
|
3
htmlとcssの更新
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -16,8 +16,26 @@
|
|
|
16
16
|
|
|
17
17
|
お手数ですがよろしくお願いします。
|
|
18
18
|
|
|
19
|
+
【更新】
|
|
20
|
+
```
|
|
21
|
+
<section class="workstyle-copy">
|
|
22
|
+
<div class="workstyle-copy-wrap">
|
|
23
|
+
<!-- 背景用の動画ファイル -->
|
|
24
|
+
<video class="workstyle-copy-video" poster="<?php echo get_template_directory_uri(); ?>//img/high-five.png" autoplay loop muted >
|
|
25
|
+
<source src="<?php echo get_template_directory_uri(); ?>//img/city.mp4">
|
|
26
|
+
<source src="<?php echo get_template_directory_uri(); ?>//img/high-five.mov">
|
|
27
|
+
</video>
|
|
28
|
+
<!-- オーバーレイ -->
|
|
29
|
+
<div class="overlay"></div>
|
|
30
|
+
<!-- 背景の上に表示させたいコンテンツ -->
|
|
31
|
+
<div class="workstyle-copy-title">
|
|
32
|
+
<p>Be Simple</p>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</section>
|
|
19
36
|
|
|
20
37
|
```
|
|
38
|
+
```
|
|
21
39
|
.workstyle-copy {
|
|
22
40
|
height: 500px;
|
|
23
41
|
position: relative;
|
|
@@ -35,7 +53,6 @@
|
|
|
35
53
|
}
|
|
36
54
|
|
|
37
55
|
.workstyle-copy-wrap {
|
|
38
|
-
max-width: 1140px;
|
|
39
56
|
margin: 0 auto;
|
|
40
57
|
overflow: hidden;
|
|
41
58
|
}
|
|
@@ -92,7 +109,7 @@
|
|
|
92
109
|
|
|
93
110
|
.workstyle-copy-title p {
|
|
94
111
|
font-family: 'Pacifico', cursive;
|
|
95
|
-
font-size:
|
|
112
|
+
font-size: 14vw;
|
|
96
113
|
color: rgba(68, 255, 0, 0.9);
|
|
97
114
|
font-weight: bold;
|
|
98
115
|
}
|
2
cssの更新、画像の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
https://koukoku-unyou.com/recruit/
|
|
2
2
|
上記のメインビジュアル部分についての質問です。
|
|
3
|
+
【Q1】
|
|
3
4
|
https://qiita.com/Shinji-m/items/69a392685699f3ba95fb
|
|
4
5
|
このサイトを見て、テキスト<p>Be Simple</p>の縦中央揃えをしようとしたのですが、
|
|
5
6
|
```
|
|
@@ -9,6 +10,10 @@
|
|
|
9
10
|
などでうまく行きませんでした。(載ってるものを全部試しましたが、うまく行きませんでした。)
|
|
10
11
|
padding-topとレスポンシブで無理やり中央っぽいところに配置は出来るのですが、
|
|
11
12
|
なるべく自動で中央に配置出来るようにしたいです。
|
|
13
|
+
【Q2】
|
|
14
|
+
あとなぜかテキストの下の部分が一部欠けてしまいます。
|
|
15
|
+
|
|
16
|
+
|
|
12
17
|
お手数ですがよろしくお願いします。
|
|
13
18
|
|
|
14
19
|
|
|
@@ -75,7 +80,6 @@
|
|
|
75
80
|
display: -webkit-box;
|
|
76
81
|
display: -ms-flexbox;
|
|
77
82
|
display: flex;
|
|
78
|
-
width: 50%;
|
|
79
83
|
-webkit-box-pack: center;
|
|
80
84
|
-ms-flex-pack: center;
|
|
81
85
|
justify-content: center;
|
|
@@ -88,7 +92,7 @@
|
|
|
88
92
|
|
|
89
93
|
.workstyle-copy-title p {
|
|
90
94
|
font-family: 'Pacifico', cursive;
|
|
91
|
-
font-size:
|
|
95
|
+
font-size: 240px;
|
|
92
96
|
color: rgba(68, 255, 0, 0.9);
|
|
93
97
|
font-weight: bold;
|
|
94
98
|
}
|
1
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
display: flex;
|
|
7
7
|
align-items: center;
|
|
8
8
|
```
|
|
9
|
-
などでうまく行きませんでした。
|
|
9
|
+
などでうまく行きませんでした。(載ってるものを全部試しましたが、うまく行きませんでした。)
|
|
10
10
|
padding-topとレスポンシブで無理やり中央っぽいところに配置は出来るのですが、
|
|
11
11
|
なるべく自動で中央に配置出来るようにしたいです。
|
|
12
12
|
お手数ですがよろしくお願いします。
|