8/30　YATTA

ナデガタ

◆登場キャラ一覧のページ作成

HTML＆CSSは前から作ってたんだけど、今回PHPを絡めて再度作り直し。

固定ページのスラッグ:charactorについてのPHPファイル、page-charactor.phpを作成
　→ほかの固定ページのデフォであるindex.phpを流用し、HTMLを追記
　　→ヘッダーを<?php get_header('charactor');?>とし、投稿ページのカテゴリー：キャラクターと同じheader-charactorを呼び出す
　　　→デフォのcommon.cssとは違うcharactor.cssを呼び出す

1章のキャラ15人を幅960pxに収める→5人192px3行
アイコンを180*180に→object-fit: contain ;などでうまくいかなかったためHTMLに直接width="180"と記載。CSSの書き方要確認。

◆キャラの個別ページの作成


まず記事に乗せる全身画像
　→横長のティーティーを210：280にするので他キャラも3：4に。
→グリッド作成
　横幅960を120*8に
　　キャラの画像を360→縦幅は480に。他グリッド調整

.chara {
 margin: 0 auto; 
 font-size: 1rem; 
 background: #333366 ;
 display: grid;
 grid-template:
 "... ...  ...  ...  ...    ...    ...    ...    ...    ..."1rem
 "... top  top  top  serif  serif  serif  serif  serif  ..."135px
 "... top  top  top  role   role   role   role   role   ..."105px
 "... top  top  top  status detail detail detail detail ..."240px
 "... ...  ...  ...  ...    ...    ...    ...    ...    ..."0px
 "... text text text text   text   text   text   text   ..."1fr
 "... ...  ...  ...  ...    ...    ...    ...    ...    ..."10px
 / 0px 120px 120px 120px 120px 120px 120px 120px 120px 0px;
 

}

こんな感じ。

グリッドは↓を参考にしている


こんな感じ。

幅があってなかったり行間が間抜けだったりするが目下「そもそもキャラ1人分しか書いてねえ」のが問題。フォーマットはできたわけで、後はガシガシ書いていく。

デザインが稚拙なのはある程度しゃーない。デザインの本読んで理解追い付かなくて…みたいな学習工程の迷走はもうこりごり。

今は自己満足できるサイトを作るのを第一のモチベーションにして、その中でコードを書く癖、調べる習慣、なじむ感覚を身につければ名みたいな低いハードルでやっていく。

サイトをやるのに一番いいのは、ある程度カスタマイズに満足いったらちゃんとしたテーマを導入してそっちで作り替えることだと思う。

◆おいおいやること

記事内のリンク充実。リンクのborderをもうちょっと落ち着いた色に
　h3.h4のマーカーの色を調整
　　一覧、個別共にレスポンシブ対応。画像がスカスカになったり崩れたり。
カテゴリー別のCSS再調整、画像とかマーカーとか。h4のクソダサさ問題。
　フッター無駄な項目の整理
　　Google Search Console登録
　　　アイキャッチをクリックでタグに飛ぶ→保留
　　　　admin-emailを右上に
　　　　　ブースのリンクをサイドバーに。


この記事が気に入ったらサポートをしてみませんか？