●newボタンをフローティングボタン風にする
概要
スマホ表示（ウインドウサイズ768px以下）の場合のみ、newボタンを右下に移動する
個別ページや検索結果を開いている時も常に表示される
いつでもすぐに新規ページが作れる
検索結果画面でタップすると検索ワードをタイトルとした新規ページが作られる（普通の挙動）
十字部分は設定がちょっと煩雑になってしまうため、本来の十字は非表示にしてcontentで別途十字を表示することにした
code:style.css
@media screen and (max-width: 768px) {
/* newボタンの位置を変更する */
.new-button {
position: fixed;
z-index: 1000; /* 最前面に表示 */
bottom: 5vh;
right: 10vw; /* leftにすると左下になる */
width: 50px;
height: 50px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}
/* デフォルトの十字マークを非表示にする */
.new-button .horizontal-line,
.new-button .vertical-line {
display: none;
}
/* 十字マークを設定する */
.new-button::after {
display: block;
position: absolute;
font-family: 'Font Awesome 5 Free';
content: ' \f067';
font-weight: 900; /* 必須 */
font-size: 45px;
color: var(--new-button-vertical-color, #fff);
/* 中央配置 */
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
}
https://gyazo.com/2507754e7805a6f3f62fc666dcef6a20
イメージ（右下にnewボタンがある）
https://gyazo.com/06b600e25ebff072694fe01a72a9dfb6
（カード状ではなくリスト状になっているのは全然別のCSSを適用しているやつなので気にしないでください）
#UserCSS