回答編集履歴
3
flex-direction: column; を追加
test
CHANGED
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
bottom: 10px;
|
|
38
38
|
right: 10px;
|
|
39
39
|
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
40
41
|
justify-content: center;
|
|
41
42
|
align-items: center;
|
|
42
43
|
width: 80px;
|
|
@@ -66,4 +67,5 @@
|
|
|
66
67
|
- JavaScript で URL 判定をして `floating-action-button` の削除処理を加えました
|
|
67
68
|
- CSS に z-index を追加しました
|
|
68
69
|
- HTML に font-awesome アイコンを追加しました
|
|
70
|
+
- CSS に flex-direction: column; を追加しました
|
|
69
71
|
- CSS に font-size を追加しました
|
2
z-index, font-awesome を追加
test
CHANGED
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
```html
|
|
33
33
|
<style>
|
|
34
34
|
#floating-action-button {
|
|
35
|
+
z-index: 1;
|
|
35
36
|
position: fixed;
|
|
36
37
|
bottom: 10px;
|
|
37
38
|
right: 10px;
|
|
@@ -44,9 +45,13 @@
|
|
|
44
45
|
background: #0f88c4;
|
|
45
46
|
color: #fff;
|
|
46
47
|
text-decoration: none;
|
|
48
|
+
font-size: 15px;
|
|
49
|
+
}
|
|
50
|
+
#floating-action-button i {
|
|
51
|
+
font-size: 20px;
|
|
47
52
|
}
|
|
48
53
|
</style>
|
|
49
|
-
<a id="floating-action-button" href="/path/to/">
|
|
54
|
+
<a id="floating-action-button" href="/path/to/"><i class="fas fa-edit"></i>質問する</a>
|
|
50
55
|
<script>
|
|
51
56
|
(function() {
|
|
52
57
|
const path = location.pathname;
|
|
@@ -59,3 +64,6 @@
|
|
|
59
64
|
|
|
60
65
|
- a 要素の class 属性を id 属性に変えました
|
|
61
66
|
- JavaScript で URL 判定をして `floating-action-button` の削除処理を加えました
|
|
67
|
+
- CSS に z-index を追加しました
|
|
68
|
+
- HTML に font-awesome アイコンを追加しました
|
|
69
|
+
- CSS に font-size を追加しました
|
1
特定のページだけボタンを表示しない処理を追加
test
CHANGED
|
@@ -26,3 +26,36 @@
|
|
|
26
26
|
- main-before.php 中で PHP による条件分岐を用いて、特定のページのみコードを出力しない方法
|
|
27
27
|
|
|
28
28
|
上記の2つの方針が考えられます。特定のページというのは具体的にどのようなページなのでしょうか。それによって具体的なソースコードの記述内容が変わります。
|
|
29
|
+
|
|
30
|
+
### 追記
|
|
31
|
+
|
|
32
|
+
```html
|
|
33
|
+
<style>
|
|
34
|
+
#floating-action-button {
|
|
35
|
+
position: fixed;
|
|
36
|
+
bottom: 10px;
|
|
37
|
+
right: 10px;
|
|
38
|
+
display: flex;
|
|
39
|
+
justify-content: center;
|
|
40
|
+
align-items: center;
|
|
41
|
+
width: 80px;
|
|
42
|
+
height: 80px;
|
|
43
|
+
border-radius: 100%;
|
|
44
|
+
background: #0f88c4;
|
|
45
|
+
color: #fff;
|
|
46
|
+
text-decoration: none;
|
|
47
|
+
}
|
|
48
|
+
</style>
|
|
49
|
+
<a id="floating-action-button" href="/path/to/">ボタン</a>
|
|
50
|
+
<script>
|
|
51
|
+
(function() {
|
|
52
|
+
const path = location.pathname;
|
|
53
|
+
if (path === '/new-thread/' || path.startsWith('/bright/forum/')) {
|
|
54
|
+
document.getElementById('floating-action-button').remove();
|
|
55
|
+
}
|
|
56
|
+
}());
|
|
57
|
+
</script>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
- a 要素の class 属性を id 属性に変えました
|
|
61
|
+
- JavaScript で URL 判定をして `floating-action-button` の削除処理を加えました
|