WordPress＋CSS日記
昨日悩んでたやつ、「固定ページのテンプレートを変える」でだいぶ解決した。んで、色々調整してできたのが以下のページ。
ざくざくアクターズというゲームを紹介するサイトを作りたい。
サイトの全体図もまだ何もなく、まず主人公の紹介。それで各キャラ用のテンプレとして流用して、各キャラ紹介して、キャラまとめページ作って…いつ目途がつくんだろうか。
そもそも作った↑これでいいのか、クソダサじゃないか、密じゃないか…でもまぁ、今自分ができる工夫は詰め込めた気がする。
以下、上で使ってるHTMLとCSSを、流用できる部分だけ張っておく。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="chara-tenple.css">
</head>
<!-- これ以下をWordPressにコピペ -->
<div class="chara">
<div class="top"><img src=""></div>
<h1 class="name container-serif"></h1>
<h2 class="role container-serif"></h2>
<section class="status">パラメーター画像(準備中)</section>
<div class="detail container-serif">
<p>役割</p>
<p>・</p>
<p>・</p>
<p>・</p>
</div>
<div class="serif">
<img src="">
</div>
<article class="text">
<div class="container-serif">
<h1><a class="marker"></a></h1>
<h1><a class="marker"> 戦闘の役割＝</a></h1>
<h1 class="special"><a class="marker">主な固有技</a></h1>
<h3 class="skil"><a class="marker"></a></h3>
<div class="large"><img src=""></div>
<h3 class="skil"><a class="marker"></a></h3>
<div class="large"><img src=""></div>
</div>
</article>
</div>
<!-- 以上をWordPressにコピペ -->
</html>
<!-- <a class="marker"></a> マーカー-->各キャラごとの内容を上のテンプレに追加していく。
{ box-sizing: border-box;}
.chara {
margin: 0 auto;
font-size: 1rem;
background: #333366;
display: grid;
grid-template:
"... ... ... ... ... ... ..."10px
"... top top name name name ..."min(12vw,144px)
"... top top status role role ..."min(12vw,144px)
"... top top status detail detail ..."min(15vw,180px)
"... top top serif serif serif ..."min(10.8vw,130px)
"... ... ... ... ... ... ..."min(10.8vw,130px)
"... text text text text text ..."1fr
"... ... ... ... ... ... ..."10px
/ min(1vw,12px) min(18vw,216px) min(18vw,216px) min(18vw,216px) min(18vw,216px) min(18vw,216px) min(1vw,12px);
}
.top{
grid-area: top;
}
.top img{
width:min(36vw,432px);
object-fit: contain;
object-position: 0;
}
.name{
grid-area:name;
font-size: min(7vw,84px);
text-align: center;
margin:0;
}
h1 .name{
vertical-align: baseline;
}
.role{
text-align: center;
grid-area:role;
font-size: min(4vw,48px);
margin:0;
vertical-align:bottom;
}
.detail{
grid-area:detail;
font-size:min(2vw,24px);
}
.detail p{
margin: 0;
line-height: 1.5;
}
.status{
grid-area: status;
background: gray;
}
.serif{
grid-area: serif;
margin: 0em;
padding: 0em;
}
.serif img{
object-fit: cover;
object-position:0;
width: min(54vw,648px);
vertical-align:bottom;
}
article{
grid-area: text;
font-size: min(2vw,24px);
}
.container-serif div {
width:90%;
margin: 0 auto;
}
article .bar{
height: min(2vw,24px);
opacity: 0;
}
/* テキスト内のスペース */
.space{
hight:100px;
opacity: 0;
}
/* テキスト間のスペース */
article .container-serif img{
width: 100%;
}
article .container-serif div.large{
width: 90%;
margin: 0 auto;
}
/* 縦に長い画像の横幅を少し減らす */
.bold{
font-weight: bold;
border:1px solid red;
}
/* 用語を強調 */
div h1 a.marker{
background: linear-gradient(transparent 0%, #663333);
font-weight: bold;
}
/* 下線 赤系統 */
div h3 a.marker{
background: linear-gradient(transparent 0%, #330066);
font-weight: bold;
}
/* 下線 紫系統 */
.container-serif
{
border : double 4px #fff ;
border-radius: 8px;
background: linear-gradient(#333366,#000033 );
color:white;
font-style: 'MS PGothic';
-webkit-text-stroke: 0.03rem #000;
}
article .container-serif{
margin-top: 10px;
object-position: 50% 50%;
}
/* メディアクエリ */
@media screen and (max-width: 768px) {
.chara {
display: grid;
grid-template:
"... name ..."
"... serif ..."
"... role ..."
"... status ... "100px
"... detail ..."
"... ... ..."10px
"... text ..."
"... top ..."
/5% 90% 5%;
}
.serif img{
text-align: left;
width: 100%;
object-fit: cover;
object-position: left;
}
.detail{
font-size :4vw;
}
article{
font-size:3.5vw
}
.top{
display: none;
}
}
こっちは弄らずに使える予定。
メディアクエリ、横幅にvw使えばいいやん→あかん無限に横幅広がる、からの、各グリッドの横幅をmin(18vw,216px)としたことで、横浜の最大値が216*5+12*2より大きくならなくて済んだので助かった。縦の幅とフォントサイズも同じ感じで合わせる。ざっくりタブレット以下っぽい横幅の時は1カラムにした。それが正解かどうかはわからない。っつーかデザインの正解なんて素人にはわかるはずがないのでまぁ不格好なもんでも形にしていって慣れるしかねえ。
この記事が気に入ったらサポートをしてみませんか？