タグ・デザイン掲示板

[

小説のHEADの表記について
by はな

2021-12-09 19:02
とあるテンプレート配布サイト様にて、お借りしてきたテンプレで小説を作ろうと思ったのですが、思うように表示されません……。
元々h1部分は文字が縦書きだったのですが、writing-mode をhorizontal-tb;に書き換えて横文字にすると、なぜか画像が表示されなくなってしまいます。

こちらのテンプレート配布サイト様は、現在倉庫化してしまっているため、メッセージでのやり取りは出来ません……。

何かわかる方がいらっしゃれば、何卒回答お願い致します。

下記が小説のHEADです。

<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Alegreya');

@font-face
{
font-family: はれのそら明朝;
src: url('https://cdn.leafscape.be/Harenosora/harenosora_web.woff2')
format("woff2");
}

body{
font-family:"Alegreya","游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ明朝", serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#000;
background:#b0c4de;
margin:0;
padding:0;}

@media screen and (min-width:601px){
.wrp{
width:400px;
margin:0 auto;}

.wrp2{
width:600px;
margin:0 auto;}
}

@media screen and (max-width:600px){
.wrp,.wrp2{
width:100%;
margin:0 auto;}
}

.op{
padding:50px 0 30px;
background:#fff;
border-bottom:double 5px #b0c4de;}

.op a{
color:#164a84;
padding:0 5px;
border-bottom:solid 1px #c5c1c0;
}

.op a:hover{
color:#b0c4de;
border-bottom:solid 1px #eee;
}

.top{
margin:20px;
padding:0;
}

.act{
margin:20px 10px 0;
padding:0 10px 10px;
border:double 3px #fff;
}

.tp{
margin:30px 0 10px;
padding:15px 0;
background:#fff;
border-top:double 5px #b0c4de;
border-bottom:double 5px #b0c4de;}

.text{
font-size:13px;
letter-spacing:2px;
margin:20px;
}

.text p{
color:#555;
font-size:11px;
letter-spacing:1px;
margin:20px 10px;
padding:10px;
border:double 3px #c5c1c0;
}

.ft{
max- width:250px;
margin:0 auto 20px;
text-align:center;}

.ft a{
color:#164a84;
background:rgba(255,255,255,.8);
text-decoration:none;
padding:0 3px;
}

a:hover{background:none;}

header{
width:290px;
height:auto;
background:url(##画像URL##) no-repeat;
background-size:290px;
background-position:center;
margin:0 auto;
padding:0;}

h1{
font-family:Alegreya,はれのそら明朝, sans-serif;
font-weight:normal;
font-size:20px;
margin:0 auto;
padding:0 25px;
background:#fff;
writing-mode:tb-rl;
writing-mode:vertical-rl;
-moz-writing-mode:vertical-rl;
-o-writing-mode:vertical-rl;
-webkit-writing-mode:vertical-rl;}

h2{
font-family:Alegreya,はれのそら明朝, sans-serif;
font-weight:normal;
font-size:14px;
margin:0 10px;
padding:0 10px;
color:#fff;
background:#b0c4de;
position:relative;
bottom:10px;
display:inline-block;}

h3{
font-family:Alegreya,はれのそら明朝, sans-serif;
font-weight:normal;
font-size:14px;
margin:30px 20px;
padding:2px 0;
text-align:center;}

a{
color:#164a84;
text-decoration:none;
padding:0 3px;
}

a:hover{background:rgba(255,255,255,.8);}

input[type],textarea{
height:60px;
width:90%;
font-family:"Alegreya","游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ明朝", serif; sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#b0c4de;
color:#000;
border:solid 1px #b0c4de;
margin:5px;
padding:3px 5px;
-webkit-appearance: none;
border-radius:0;
box-shadow:none;
}

input[type=text]{
height:auto;
width:80px;}

input[type=submit]{
height:auto;
width:80px;
cursor:pointer;
text-shadow:none;
border:solid 1px #555;
background:#555;
color:#fff;
font-weight:normal;
}

</style>

pc
[編集]

by 匿名

2021-12-11 00:27
こんにちは。
推測ですが、縦書き→横書きに変更したことでh1の高さが低くなったのに加え、h1の背景色が#fff（白色）なので、画像が文字の背景色の後ろに隠れてしまっているのではないかと思われます。

ちょっと無理やりですが、h1を以下に書き換えてみるとうまくいくかもしれません。

h1{
display: table-cell;
vertical-align: middle;
font-family:Alegreya,はれのそら明朝, sans-serif;
font-weight:normal;
font-size:20px;
margin:0 auto;
padding:0 43px;
background:none;
writing-mode:horizontal-tb;
-moz-writing-mode:horizontal-tb;
-o-writing-mode:horizontal-tb;
-webkit-writing-mode:horizontal-tb;
height: 100px;}

◇追加部分
　display: table-cell;
　vertical-align: middle;
　height: 100px;

◇変更部分
　background:#fff;→none;
　writing-mode:vertical-rl;→horizontal-tb;
　padding:0 25px;　→0 43px;

・もしh1の文字が中央にならない場合は
　padding:0 43px;の「43」部分を調整してみてください。
・高くしたい場合はheight: 100px;の「100」を大きくしてみてください。

pc
[編集]

by はな

2021-12-16 16:34
ありがとうございます。
教えてくださった通りにやってみた結果、表示できました。

もし差し支えなければもうひとつ教えて頂きたいのですが、小説文章のtext部分のフォントを変えたいと思っています。
MSゴシックにしたいのですが、HEADのtextをどう変更したらいいのでしょうか？

何度も申し訳ありません……。

pc
[編集]

by 774

2021-12-20 02:02
▼書体変更
『font-family』の値で変更できます。
指定フォントが閲覧端末に入っていないと反映されないので留意を。

大抵のことは「やりたいこと HTMLorCSSorJavaScript」での検索で解説サイトさんなりなんなりの情報がみつかります。(本件なら「MSゴシック CSS」でも出ます)
過疎掲示板に書き込んで返答を待つより早く済むので参考までに。

▼他
▽次回からの注意点
本件だとたまたま「<h1>要素は<header>要素内に配置する人が多い」という思考で匿名さんも返答でき、たまたまそれがあっていたのだと思います。
しかしCSSは基本的にHTMLの記述ありきなのでそれだけ出されても解決しない場合が大多数です。
提示されていない事については予測で返答するしかありません。　クイズ大会開催を防ぐためにも、次回から相談の際は全体レイアウトも提示した方が無難です。

▽最適化
『(-ベンダープレフィックス-)writing-mode:horizontal-tb』や『background:none』は初期値の再指定でしかないので行ごと消しちゃった方がスッキリすると思いますよ。
また、初期値や同値の再指定が他にもあるのでそちらも(全体レイアウト等で上書きしていなければ)削って良いと思います。

▽例
<style>

@import url('https://fonts.googleapis.com/css?family=Alegreya');

@font-face
{
font-family: "はれのそら明朝";
src: url('https://cdn.leafscape.be/Harenosora/harenosora_web.woff2')
format("woff2");
}

body {
margin: 0;
padding: 0;
background: #b0c4de;
color: #000;
font-family: "Alegreya","游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ明朝", serif;
font-size: 12px;
letter-spacing: 1px;
line-height: 150%;
}

a {
padding: 0 3px;
color: #164a84;
text-decoration: none;
}
a:hover {
background: rgba(255,255,255,.8);
}

.wrp ,.wrp2 {
margin: 0 auto;
}

@media screen and (min-width:601px){

.wrp { width: 400px}
.wrp2 { width: 600px}

}

.op {
padding: 50px 0 30px;
background: #fff;
border-bottom: double 5px #b0c4de;
}

.op a {
padding: 0 5px;
border-bottom: solid 1px #c5c1c0;
}

.op a:hover {
border-bottom-color: #eee;
color: #b0c4de;
}

.top {
margin: 20px;
padding: 0;
}

.act {
margin: 20px 10px 0;
padding: 0 10px 10px;
border: double 3px #fff;
}

.tp {
margin: 30px 0 10px;
padding: 15px 0;
background: #fff;
border-top: double 5px #b0c4de;
border-bottom: double 5px #b0c4de;
}

.text {
margin: 20px;
font-size: 13px;
letter-spacing: 2px;
}

.text p {
margin: 20px 10px;
padding: 10px;
border: double 3px #c51c0;
color: #555;
font-size: 11px;
letter-spacing: 1px;
}

.ft {
margin: 0 0 20px;
text-align: center;
}

.ft a {
background: rgba(255,255,255,.8);
}

header {
display: flex;
max-width: 290px;
margin: 0 auto;
background: url(#mtr数_url#) no-repeat 50% 50% / cover;
}

h1 ,h2 ,h3 {
font-family: "Alegreya", "はれのそら明朝", serif;
font-weight: normal;
}

h1 {
margin: 0 auto;
padding: 20px 25px;
background: #fff;
font-size: 20px;
}

h2 {
position: relative;
bottom: 10px;
display: inline-block;
margin: 0 10px;
padding: 0 10px;
background: #b0c4de;
color: #fff;
font-size:14px;
}

h3 {
margin: 30px 20px;
padding: 2px 0;
text-align: center;
font-size: 14px;
}

input[type] ,textarea {
-webkit-appearance: none;
width: 80px;
height: auto;
margin: 5px;
padding: 3px 5px;
border-radius: 0;
border: solid 1px #b0c4de;
background: #b0c4de;
color: #000;
font: inherit;
}

textarea {
width: 90%;
height: 60px;
}

input[type="submit"] {
cursor: pointer;
border: solid 1px #555;
background: #555;
color: #fff;
}

</style>

▽補足
・全体の字体変更：『body{}』間の『font-family』
・見出しの字体変更：『h1 ,h2 ,h3 {}』間の同上

・webフォントを読み込んでいるようなので、変更時使わなくなったものの読み込みは削除するようにしましょう。
├『"Alegreya"』不使用
│　→『@import url(中略);』削除
└『"はれのそら明朝"』不使用
　　→『@font-face{中略}』削除

・大元準拠で『h1』要素に背景色をつけています。透明がよい場合は『h1{}』間の『background: #fff;』の削除を

pc
[編集]

by はな

2021-12-22 19:09
お返事遅れてすみません。

色々教えてくださった通り、HEADのtext部分を変更したら、なんとかフォントを変えることができました。

回答者様のお言葉通り、フォントやCSSについて詳しく解説しているサイト様がいくつかございましたので、今後はそちらも参考にさせていただきます。
教えてくださりありがとうございます。

また、次回からはこういったことを質問する際、全体のレイアウトも載せるように致します。
ご忠告感謝致します。

細かく説明してくださり、本当にありがとうございます。

pc
[編集]

[