diff --git a/src/components/layout.scss b/src/components/layout.scss index b1be4e7f2..f9b36fb3d 100644 --- a/src/components/layout.scss +++ b/src/components/layout.scss @@ -849,28 +849,28 @@ $call-names-cell-width-column: 190px; .call-names-wrapper { // sticky にするために明示的に高さを指定 - // → ほかに overflow の指定などでも sticky にできるが, 親レイアウトの + // → ほかに overflow の指定などでも sticky にできるが、親レイアウトの // Page コンポーネントのフッターやスタイルを変更すると他ページに影響が - // 出る可能性があるので, 画面が埋まるように高さを指定した. - height: calc(100vh - 52px /* navbar の高さ */); + // 出る可能性があるので、画面が埋まるように高さを指定した。 + // FIXME: 二重スクロールをなくす + height: calc(100vh - $navbar-height); overflow: auto; - section { - z-index: -1; // スクロール時にタイトルと説明が隠れるように + .top-explain { position: sticky; - top: 0; - left: 0; - height: max-content; - padding: 20px; + left: 0; // 横スクロール時についてこないように } // キャラの呼称表 .call-names { - width: auto; + img { + width: 3rem; + aspect-ratio: 1 / 1; + } table { width: 100%; - padding: 0; + @extend .p-0; margin: 0 auto; border-collapse: separate; table-layout: fixed; @@ -887,7 +887,7 @@ $call-names-cell-width-column: 190px; td { height: $call-names-cell-height; width: $call-names-cell-width; - padding: 5px; + @extend .p-1; // FIXME: // `table td:not([align]), table th:not([align])`セレクター によって @@ -924,17 +924,19 @@ $call-names-cell-width-column: 190px; &:hover { // NOTE: ちらつくので border ではなく outline outline: 2px solid; - border-radius: 5px; + border-radius: $radius; } } } } thead > tr { + // 一番上の行 th { background: white; border-bottom: $call-names-border; + // 左上のセル &.origin { width: $call-names-cell-width-column; z-index: 1; @@ -944,7 +946,7 @@ $call-names-cell-width-column: 190px; a { display: flex; flex-direction: column; - gap: 5px; + gap: 0.25rem; // = padding size text-align: center; justify-content: center; align-items: center; @@ -958,21 +960,22 @@ $call-names-cell-width-column: 190px; @include mobile { &.origin { - width: 100px; + width: 6rem; } } } } tbody > tr { + // 左端のキャラクター th { border-right: $call-names-border; width: $call-names-cell-width-column; - padding: 0 10px; + @extend .px-2; a { display: flex; - gap: 10px; + gap: 0.75rem; text-align: center; justify-content: flex-start; align-items: center; @@ -992,7 +995,7 @@ $call-names-cell-width-column: 190px; } @include mobile { - width: 100px; + width: 6rem; a { justify-content: center; p { @@ -1028,7 +1031,7 @@ $call-names-cell-width-column: 190px; } .origin { - padding: 0; + @extend .p-0; p { font-weight: normal; @@ -1037,13 +1040,13 @@ $call-names-cell-width-column: 190px; position: absolute; bottom: 0; left: 0; - padding: 10px; + @extend .p-2; } &:nth-child(2) { position: absolute; top: 0; right: 0; - padding: 10px; + @extend .p-2; } } diff --git a/src/pages/dormitory.tsx b/src/pages/dormitory.tsx index 4e07a2a11..1c5a13b25 100644 --- a/src/pages/dormitory.tsx +++ b/src/pages/dormitory.tsx @@ -57,7 +57,7 @@ const Dormitory: React.FC = ({ setShowingHeader }) => { -
+
= ({ setShowingHeader }) => {
- -
-
-
-

ボイボ寮とは

-

- VOICEVOX - のキャラたちの設定があると動画制作の参考になるかと思って用意した世界観です。 -

-

- 必ずしも遵守する必要はなく、自由に改変して頂いても問題ありません。 -

-
- - +
+ +
+

関連コンテンツ

+ + キャラクターの呼称表
+
-
-

VOICEVOX とは

-

- 無料で使える中品質なテキスト読み上げソフトウェアです。 -

-

- 商用・非商用問わず無料で、イントネーションの詳細な調整ができることが特徴です。 -

- - ダウンロード - -
- +
@@ -305,6 +283,56 @@ const Dormitory: React.FC = ({ setShowingHeader }) => { ) } +/** + * ボイボ寮とVOICEVOXをちょっとだけ紹介するコンポーネント + */ +export const DormitoryExplainComponent: React.FC<{ + showingDormitoryPageButton?: boolean +}> = ({ showingDormitoryPageButton = false }) => { + return ( +
+
+

ボイボ寮とは

+

+ VOICEVOX + のキャラたちの設定があると動画制作の参考になるかと思って用意した世界観です。 +

+

+ 必ずしも遵守する必要はなく、自由に改変して頂いても問題ありません。 +

+ {showingDormitoryPageButton && ( + + ボイボ寮ページへ + + )} +
+ +
+

VOICEVOX とは

+

+ 無料で使える中品質なテキスト読み上げソフトウェアです。 +

+

+ 商用・非商用問わず無料で、イントネーションの詳細な調整ができることが特徴です。 +

+ + ダウンロード + +
+
+ ) +} + export default () => { const [showingHeader, setShowingHeader] = useState(false) return ( diff --git a/src/pages/dormitory/call-names/index.tsx b/src/pages/dormitory/call-names/index.tsx index 3c5073426..6d9d5ded4 100644 --- a/src/pages/dormitory/call-names/index.tsx +++ b/src/pages/dormitory/call-names/index.tsx @@ -1,11 +1,13 @@ +import { Link } from "gatsby" +import { getSrc, getSrcSet } from "gatsby-plugin-image" +import React, { CSSProperties, ReactElement, useContext } from "react" import { Page } from "../../../components/page" -import React, { ReactElement, useContext, CSSProperties, useRef } from "react" -import { useDetailedCharacterInfo } from "../../../hooks/useDetailedCharacterInfo" +import Seo from "../../../components/seo" import { CharacterContext } from "../../../contexts/context" +import { useDetailedCharacterInfo } from "../../../hooks/useDetailedCharacterInfo" import { CharacterKey } from "../../../types/dormitoryCharacter" -import { getSrc, getSrcSet } from "gatsby-plugin-image" -import { Link } from "gatsby" -import Seo from "../../../components/seo" + +import { DormitoryExplainComponent } from "../../dormitory" function hex2rgba(hex: string, alpha = 1): [number, number, number, number] { const match = hex.match(/\w\w/g) @@ -37,10 +39,6 @@ export default function CallNamesPage() { src={getSrc(characterInfo.bustupImage)} srcSet={getSrcSet(characterInfo.bustupImage)} alt={characterInfo.name} - style={{ - width: "50px", - aspectRatio: "1 / 1", - }} /> ) } @@ -104,20 +102,28 @@ export default function CallNamesPage() { return (
-
-

キャラクターの呼称表

-

- ボイボ寮のキャラクターの呼び方一覧表です。必ずしも遵守する必要はなく、自由に改変して頂いても問題ありません。 -

+
+
+

ボイボ寮キャラクターの呼称表

+

+ + ボイボ寮 + + キャラクターの呼び方一覧表です。必ずしも遵守する必要はなく、自由に改変して頂いても問題ありません。 +

+
-
+
@@ -162,6 +168,7 @@ export default function CallNamesPage() { const backgroundColor = `rgb(${red}, ${green}, ${blue})` return ( + // FIXME: #id でキャラクターに直接アクセスするとスクロールがずれるのを直す
-
+
+ + ) }