Open7
WP_趣味用オリジナルテーマのメモ書き
ピン留めされたアイテム
sunaoこのメモ書きの使い方。
コメントはページごとに作成
追加は返信で行う
メモ内容は機能の考え方,WPタグの説明,コードロジック,CSSを書いていく
sunao構想
テンプレートをコピーしてからやること
- style.cssのコメントアウト(テーマ名など)を編集する
- reset.cssのbodyでベースのフォントを決めておく
ルール
- h1タグはあってもなくてもいい。気にしない。
レスポンシブ
/*------------------------------------------
Responsive Grid Media Queries - 1366, 1024, 768, 480
1366-1024 - デスクトップ（デフォルトのグリッド）
1024-768 - タブレット横長
768-480 - タブレット縦長
480-less - スマホ
--------------------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1366px) { }
@media all and (min-width: 768px) and (max-width: 1024px) { }
@media all and (min-width: 480px) and (max-width: 768px) { }
@media all and (max-width: 480px) { }
ヘッダー
- header-logoクラスでロゴの差し替え
このFontAwesomeはレギュラーがFREEじゃないと表示されない
.home-icon::after {
content: '\f359';
font-family: 'Font Awesome 5 Free';
font-weight: 300;
}
functions.php
記事詳細 single.php
noteっぽくしたい
/* 記事詳細 */
.article-title-single {
font-size: 1.6rem;
margin-top: 2rem;
margin-bottom: 2rem;
font-weight: bold;
}
.article-contents-single ul li {
margin-left: 1rem;
list-style-type: disc;
list-style: inside;
}
.article-contents-single p {
font-size: 16px;
margin-bottom: 1.2rem;
line-height: 1.6em;
}
.article-contents-single h2 {
font-size: 1.6rem;
margin: 40px 0px 16px 0px;
}
.article-contents-single h1 {
font-size: 1.8rem;
}
.article-contents-single h3 {
font-size: 1.2rem;
}
TOP / front-page.php
取得したpostを一覧表示 / 更新日時,サムネイル取得
1件目だけ違うCSSを当てる
flexの最初の要素の横幅を優先する
.container {
display: flex;
}
.item {
flex-grow: 1; /* すべての要素が均等に伸びる */
}
.item:first-child {
flex-grow: 2; /* 最初の要素の横幅を優先 */
}