タグ・デザイン掲示板

[

幅とフォントの変更
by 匿名

2023-06-16 10:03
こちらのテンプレートをお借りしてるのですが、質問は受け付けてないとのことでお聞きします。
スマホ向けに小説本文でもう少し横幅を狭くしたり、フォントを変えるにはどこを変えたらいいのでしょうか。よろしくお願いします。
ここからHTMLです。
<style type="text/css">
@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
@import url('https://fonts.googleapis.com/css?family=Limelight');

@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti&display=swap');

body {
background: #fff;
color: #333;
font-size: 12px;
font-family: 'Nunito', メイリオ, sans-serif;
line-height: 200%;
letter-spacing: 2px;
margin: 0;
}

header {
max-width: 800px;
margin:-10px auto 40px;
padding: 0 20px;
}

a {
color: #555;
text-decoration: underline;
}

a:hover {
color: #888;
}

h1 {
font-family: 'Limelight', 'Kaisei Opti', メイリオ, sans-serif;
font-size: 24px;
font-weight:200;
color:#000;
margin: 20px auto;
padding: 5px;
line-height: 100%;
}

h2,h3,h4,h5 {
font-family: 'Limelight', 'Kaisei Opti', メイリオ, sans-serif;
font-size: 13px;
margin: 0;
padding: 0;
letter-spacing: 0;
font-weight:200;
}

h2,h3,h4 {
padding: 1px 5px;
display: inline-block;
margin-bottom: 5px;
}

h2 {
color:#fff;
background: #274a78;
border: solid 1px #274a78;
}

h3 {
color: #000;
border: solid 1px #000;
}

h4 {
color:#fff;
border: solid 1px #ba2636;
background: #ba2636;
}

h5 {
margin-top:10px;
}

input[type] {
font-family: 'Nunito', メイリオ, sans-serif;
color: #000;
background: #fff;
padding: 2px 5px;
margin:0 5px;
border:none;
border-bottom: 1px solid #000;
border-radius: 0;
width: 60px;
height: auto;
-webkit-appearance: none;
box-shadow: none;
text-shadow: none;
text-align: center;
}

input[type=submit] {
width: 60px;
height: auto;
color: #000;
border:1px solid #000;
background: #fff;
cursor: pointer;
}

.cau {
margin: 40px 0 0;
padding: 10px;
border: solid 1px #000;
}

.wrp {
max-width:800px;
margin: 50px auto 30px;
}

.bl,.red {
background: #274a78;
padding: 20px 15px;
display: inline-block;
}

.red {
background: #ba2636;
margin-left:30px;
}

.name {
margin-top: -15px;
text-align: right;
}

.top {
padding: 15px;
}

.top a {
margin-right: 3px;
letter-spacing: 0;
}

.sec {
margin: 0 0 30px 10px;
}

.text {
padding: 15px;
font-size: 13px;
line-height: 250%;
}

.ft {
text-align: right;
margin: 30px 0;
}

</style>

pc
[編集]

by 匿名

2023-06-16 21:43
小説本文の横幅については小説本文に適用させている箇所がわからないのでなんとも言えないのですが、フォントを変更するのでしたら

font-family: 'Nunito', メイリオ, sans-serif;
font-family: 'Limelight', 'Kaisei Opti', メイリオ, sans-serif;

の部分で使いたいフォントに書き換えれば変更できます。

詳しい「font-familyの書き方」(サルワカ)
https://saruwakakun.com/html-css/basic/font-family-how-to
font-familyメーカー(サルワカ)
https://saruwakakun.com/font-family

pc
[編集]

by 匿名

2023-06-17 09:10
詳しく教えて下さってありがとございます！
横幅は諦めます……。

pc
[編集]

by ぬま

2023-06-18 22:26
小説本文ページのHTMLタグが分かれば、横幅部分についてはお力になれるかもしれないなあと思いました。

文章画面レイアウトの部分ですね。もう自身で解決されていたらすみません。

pc
[編集]

by 匿名

2023-06-19 03:11
お返事ありがとうございます。
一応、文章のタグはこんな感じになっております。
<header>
<div class="bl"></div><div class="red"></div><h1>#title#</h1></header><div class="wrp"><div class="text">#text#</div></div>

細かいところはCSSに入ってる感じですかね……。

pc
[編集]

by ぬま

2023-06-21 22:13
ありがとうございます。

CSSの部分にメディアクエリーで
@media screen and (max-width:599px) {

.wrp {
max-width:400px;
margin: 30px;
}

.text {
padding: 30px;
}

}

のような形で、変えてみたらどうかなあと思いました。
文章部分はtextで設定されていましたが、横幅の設定はwrpのmax-widthで設定されているので……。

PCでの表示を変えたくない、というのならこの書き方がいいかなあ、と。
余白が多すぎたら、marginかpaddingを消してください。

デベロッパー表示を使えるようになると便利なので、こちらのサイトの記事などわかりやすいかなあと思います。

デベロッパーツールの使い方を画像付き解説！CSS編集の強力な味方にしよう
https://do.gt-gt.org/how-to-use-developper-tool/

pc
[編集]

[