こんにちは。macco（まっこ）といいます。
前回と同じく、今回も引き続きWrite模写コーディングを進めていきたいと思います。
本記事を読むことで、Write模写コーディングの中心部分（mainタグ）をどのようにデザインしたらよいか分かります。
対象となる部分は以下の３か所です。
１．キービジュアル
２．記事一覧
３．ページネーション
今までのWrite模写コーディングの内容を知りたい方は、第１回と第２回の記事リンクを貼っておきますので、良かったらご覧ください↓
なお本記事は「【第２回】WPテーマWriteの模写コーディング～ヘッダー～」が終わっている人向けに書いていますのでご了承ください。
では続きを進めていきたいと思います。
前回終了時のHTMLとCSS
前回の記事「【初心者向け】【第２回】WPテーマWriteの模写コーディング～ヘッダー～」終了時のHTMLとCSSはこちらです。
※bodyタグ部分を抜粋
<body>
<div class="container">
<header>
<nav class="gnav">
<div class="logo-area">
<a href="#" class="logo">Write</a>
<p>書くためのテーマ</p>
</div>
<div class="menu-area">
<ul>
<li class="menu-home">
<a href="#">ホーム<i class="fas fa-chevron-down"></i></a>
</li>
<li class="menu-page">
<a href="#">ページ<i class="fas fa-chevron-down"></i></a>
</li>
<li>
<a href="#">タイポグラフィー</a>
</li>
<li>
<a href="#">お問い合わせ</a>
</li>
</ul>
</div>
<div class="search-area">
<img src="img/search-icon.png" class="search" alt="検索">
</div>
</nav>
</header>
<main>
<div>
<img src="img/cropped-nicole-honeywill-730102-unsplash.jpg" alt="key-visual">
</div>
<p class="page-lead">Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
<article>
<div>
<header>
<a href="#">2018年9月1日</a>
</header>
</div>
<div>
<a href="#">書くためのテーマ</a>
<p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
</div>
</article>
<article>
<div>
<header>
<a href="#">2018年3月5日</a>
</header>
</div>
<div>
<a href="#">画像付きの投稿</a>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
</div>
</article>
<article>
<div>
<header>
<a href="#">2018年3月5日</a>
</header>
</div>
<div>
<a href="#">引用付きの投稿</a>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…</p>
</div>
</article>
<article>
<div>
<header>
<a href="#">2018年3月5日</a>
</header>
</div>
<div>
<a href="#">コメント付きの投稿</a>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p>
</div>
</article>
<article>
<div>
<header>
<a href="#">2018年3月3日</a>
</header>
</div>
<div>
<a href="#">吾輩は猫である</a>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p>
</div>
</article>
<article>
<div>
<header>
<a href="#">2018年3月3日</a>
</header>
</div>
<div>
<a href="#">名前はまだ無い。どこで生れたかとんと見当がつかぬ。</a>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p>
</div>
</article>
<div class="pagination">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">次へ<i class="fas fa-angle-double-right"></i></a>
</div>
</main>
<footer>
<div class="footer-top">
<div class="profile-area">
<div>
<img src="img/profile-m.png" class="profile-img" alt="profile-image">
</div>
<div class="profile-name-block">
<p>John Doe</p>
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-instagram"></i>
</div>
<p>これはプロフィールウィジェットです。ここにはプロフィール画像・名前・自己紹介文・ソーシャルリンク（最大7つ）を設定することができます。</p>
</div>
<div class="footer-right">
<p class="footer-title">フッター右</p>
<p>3つのフッター右ウィジェットエリアはフッターの右側に表示され、使用する数によって幅は自動的に調整されます。1つも使用しない場合は表示されません。</p>
</div>
<div class="resent-posts">
<p class="footer-title">最近の投稿</p>
<div>
<a href="#" class="post-title">書くためのテーマ</a>
<header>
<p>2018年9月1日</p>
</header>
</div>
<div>
<a href="#" class="post-title">画像付きの投稿</a>
<header>
<p>2018年3月5日</p>
</header>
</div>
<div>
<a href="#" class="post-title">引用付きの投稿</a>
<header>
<p>2018年3月5日</p>
</header>
</div>
</div>
<div class="category">
<p class="footer-title">カテゴリー</p>
<div>
<a href="#">サンプル投稿</a>
</div>
<div>
<a href="#">投稿フォーマット</a>
</div>
<div>
<a href="#">普通の投稿</a>
</div>
<input type="text" placeholder="検索...">
</div>
</div>
<div class="footer-bottom">
<div>
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-instagram"></i>
</div>
<small>Powered by <a href="">WordPress</a> | Theme: <a href="">Write</a> by Themegraphy</small>
</div>
</footer>
</div>
</body>html {
font-size: 18px;
}
body {
font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
}
.container {
max-width: 1024px;
margin: 0 auto;
}
a {
color: #666;
text-decoration: none;
}
.logo {
color: #333;
display: block;
font-size: 2rem;
font-weight: bold;
}
.gnav {
width: 100%;
height: auto;
margin-top: 3rem;
margin-bottom: 4rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
ul {
list-style-type: none;
margin-block-start: 0;
margin-block-end: 0;
padding-inline-start: 0;
}
.menu-area ul {
display: flex;
justify-content: space-between;
}
.menu-area li {
padding: 1rem 1rem 0 1rem;
}
.menu-area a {
font-size: .9rem;
}
.menu-area a i {
font-size: .6rem;
padding-left: .5rem;
}Writeのメインは大まかに３つのブロックでできている
冒頭でお話したとおり、Writeのメインのデザインは以下の３つのブロックに分けることができます。
- キービジュアル
- 記事一覧
- ページネーション
各用語の説明
キービジュアル
キービジュアルとは、ページ全体の印象を与える画像のことを指します。
ちなみに、キービジュアルのことをメインビジュアルと呼ぶ場合もあります。
記事一覧
記事一覧とは、タイトルと本文冒頭の組み合わせで１つのブロックになっているものが一覧で表示されている部分を指します。
YouTubeを思い浮かべてもらうと分かりやすいと思います。
動画を検索したあとに、各動画の見本画像とタイトルのブロックが縦にずらっと並んでいる部分を動画一覧といいます。
記事か動画かの違いなだけで、同じ一覧であることには変わりないということです。
ページネーション
最後にページネーションについて説明します。
例えば記事が30件あるとします。
画面表示の都合により１ページに10件までしか表示できない場合、１．２．３．といったようにページを分割します。
その分割されたページにアクセスするためのナビゲーションのことを、ページネーションと呼びます。
説明は以上になります。
それではキービジュアルからデザインしていきましょう。
キービジュアルのデザイン
表示を確認すると画像の部分については、特にCSSを新たに追記する必要はなさそうなので、画像下にあるテキストをCSSでデザインしましょう。
.page-lead {
color: #666;
font-size: 1.6rem;
margin: 4rem 0;
line-height: 1.8;
}テキストの色やフォントサイズ、上下に余白とテキストどうしの行間が調整されました。
記事一覧のデザイン
次に記事一覧のデザインを行います。
日付と記事タイトル、文章が縦に並んでいるのでFlexBoxを使って横並びにします。
「align-items: baseline;」は、高さが違うアイテムが複数あってもベースラインを揃えるという指定になります。
「flex: 1;」「flex: 2;」は1:2の比率で幅を指定するという指定になります。
左側の日付は1/3、右側の記事タイトル、文章が2/3ということになります。
article {
display: flex;
align-items: baseline;
margin-bottom: 3rem;
}
article div:first-child {
flex: 1;
}
article div:last-child {
flex: 2;
}記事のタイトルと文章にデザインがあたっていないので、CSSで調整します。
article div:last-child a {
font-size: 1.2rem;
color: #333;
font-weight: bold;
margin-bottom: 1rem;
}
article div:last-child p {
font-size: .9rem;
color: #666;
margin-top: 1rem;
line-height: 1.8;
}これで記事一覧のデザインができました。
ページネーションのデザイン
最後にページネーションのデザインを行います。
ページネーションの枠に「display: flex;」「justify-content: center;」を指定し、中央寄せにします。
あとは各aタグに対してWriteと同じようになるように調整します。
.pagination {
display: flex;
justify-content: center;
margin-bottom: 8rem;
}
.pagination a {
font-size: .9rem;
border: solid 1px #ccc;
padding: 0.5rem 1rem;
margin-right: 1rem;
}
.pagination a:first-child {
background: #eee;
font-weight: bold;
cursor: text;
}
.pagination a:last-child i {
font-size: small;
color: #ccc;
padding-left: 0.5rem;
}ほぼ同じようなページネーションのデザインができました。
最後に
今回はWrite模写コーディングのメイン箇所を解説してきましたが、いかがでしたでしょうか。
今後Web制作やサービスを作ってみたい目標があるのなら、少しでもいいので学習を続けてみましょう。
私も、Web業界に未経験で入ってからだいぶ時間が経ちましたが、最近になってようやく色々と整理できてきました。
本記事があなたにとって、１つでも新たな情報の入手や励みになれたら嬉しいです。
最後までお付きあい頂きありがとうございました。
続きを執筆しましたので、良かったらご参照ください。
2020/10/25追記
本テーマのまとめ記事はこちら↓
