メッセージの編集
お名前
本文
▼書体変更 『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", "MS 明朝", 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;』の削除を
編集パス
編集
記事削除
×
人気急上昇中のBL小説
BL小説 BLove
- ナノ -