フォントサイズについて

459 views
  1. コメントする
  2. 記事検索
  3. 更新

0
まる iPhone 2018/06/23 15:53
トップページを作成しているのですが、コンテンツのフォントサイズが変えられず困っています。


テンプレサイト様からお借りしたものです。ソースはこうなっています。

<style type="text/css">

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

@font-face
{
font-family: XANO明朝;
src: url('https://cdn.leafscape.be/XANO-mincho/XANO-mincho_web.woff')
format("woff");
}

body{
font-family:"Alegreya","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#000;
background:#4c6473;
margin:1;
padding:1;}

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

@media screen and (max-width:400px){
.wrapper{
width:100%;
margin:0 auto;}
}

.top{
margin:50px auto 20px;
width:240px;
height:160px;
background:url(##IMAGE_DATA_4_URL##);
background-size:cover;
border:solid 1px #000;
box-shadow:0 0 5px #000;
text-align:center;}

.menu{margin:0 0 15px;}

.menu a{
color:#e7e7eb;
background:rgba(0,0,0,.7);
padding:2px 6px;
margin:0 5px;}

.menu a:hover{
background:rgba(0,0,0,.7);
color:transparent;
text-shadow:0 0 1px #e7e7eb;
box-shadow:0 0 1px #000;}

.title{
font-family:"XANO明朝","Alegreya","メイリオ", sans-serif;
font-size:14px;
color:#e7e7eb;
background:rgba(0,0,0,.6);
padding:5px 10px;
margin:70px auto 0;
cursor:pointer;
display:inline-block;
transition:0.5s;}

.title:hover{
background:#000;
color:transparent;
text-shadow:0 0 1px #e7e7eb;}

.info{
background:rgba(255,255,255,.3);
margin:30px 20px 20px;
padding:15px;
display:none;
box-shadow:0 0 5px #000;}

.con{margin:40px 20px 20px;}

.box{
font-size:11px;
background:rgba(255,255,255,.3);
margin:20px;
padding:15px;
box-shadow:0 0 5px rgba(255,255,255,.3);}

strong{
text-shadow:0 0 1px #000;
font-weight:normal;}

h1{
font-family:"XANO明朝","Alegreya","メイリオ", sans-serif;
font-size:16px;
font-weight:normal;
color:transparent;
text-shadow:0 0 1px #e7e7eb;
background:rgba(0,0,0,.6);
margin:10px 0;
padding:5px 10px;
display:inline-block;
}

h2{
font-family:"XANO明朝","Alegreya","メイリオ", sans-serif;
font-weight:normal;
font-size:14px;
margin:5px 5px 5px 0;
padding:2px 10px;
color:transparent;
text-shadow:0 0 1px #000;
background:rgba(255,255,255,.5);
display:inline-block;
}

a{
color:#000;
background:rgba(255,255,255,.3);
text-decoration:none;
padding:0 3px;
transition:0.5s;
}

a:hover{background:none;}

</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.1.min.js">

</script>

<script type="text/javascript">

$(function() {
$('.title').click(function(){
$('.info').fadeToggle(1000);
});
});

</script>

これはどこを直したらサイズが変えられるのでしょうか?教えていただけると嬉しいです。

残り998件書き込み可

2
まる iPhone 2018/06/26 18:05
>>1
フォントサイズ変更できました!
ありがとうございました!

1
ななし SOV33 2018/06/24 09:51
>>0
font-sizeの後ろの数字を直すと変わります。
font-sizeは>>0の中にいくつか出ていますが、例えば
<h1>この部分</h1>
を変えたければ
h1{
font-family:略;
font-size:16px; ←ここを変える
以下略
}
という感じです。

.title
.box
などは何かのタグにクラス名として書かれています。
例えば
<p class="title">タイトル</p>
<div class="box">コンテンツ</div>
みたいな感じです。
それぞれフォントサイズを変えたい箇所のタグを見て確認してください。

解決しなければCSSじゃなくてhtmlソース(個々のページ本文のほう)も貼って、ここを変えたいと具体的に挙げれば見てくださる方がいるかも。

ついでにalice+側の機能で(編集欄から)文字サイズ設定をされると部分的にそちらが優先されます。
「何も指定しない」になっていれば全てCSSに従うのでOKです。
念のため。
1ページ中1ページ目

関連スレッド

関連スレッド



Back to Top