こんにちは朱夏です。
WordPress自作テーマ作成やっていきます。
今回はメインページの元となるindex.htmlを作成するところまでやっていこうと思います。
作成の参考にさせていただいているyoutube動画はこちらになります。
https://youtu.be/jFAfAGWWrzk?list=PLv2-sHurmDBtMD5ZGA3abvX2YUTuMXSyP
こちらの第二回からコード書いていくところなのですが、肝心なことを忘れていました。
サイトの完成イメージ、ワイヤーフレームの作成です。
ワイヤーフレーム
というわけで、ざっくり小一時間でワイヤーフレームを作ってみました。
それがこちらになります。
そして、スマホ対応のデザインも作成してみました。
今回はこれをもとにやっていきたいと思います。
ナビゲーションバー
今回ナビゲーションバーはBootstrap4を使って実装しました。
ワイヤーフレームに書いた通りに実装しようとすると結構手間取りました。
やりたかったことは以下の通りです。
-
- タイトルとナビゲーションバーを同じ行に表示
- それぞれ右寄せと左寄せで配置
- ナビゲーションバーはレスポンシブで折り畳まれる
調整に結構時間かかりました。
そして出来上がったコードがこちらです。
<!-- タイトルとナビゲーション -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<div class="col-md-8 col-12">
<h1 class="h1 p-3 text-light">My Theme</h1>
</div>
<div class="col">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">ホーム</span></a>
<a class="nav-item nav-link" href="#">プロフィール</a>
<a class="nav-item nav-link" href="#">メニュー</a>
</div>
</div>
</div>
</div>
</nav>
<!-- タイトルとナビゲーション END -->
これでやりたかったことは全て満たす事が出来ました。
ピックアップコンテンツと投稿記事
メイン部分については、色々実験したいと思います。
-
- ピックアップコンテンツはスライダー表示
- 投稿記事はカード形式でブロック表示
- スマホでの表示順はピックアップコンテンツ＞投稿記事＞サイドバー
スライダーにはBootstrap4のカルーセルを使いました。
投稿記事のカードは、ワイヤーフレームと違い、横長のカードを使用してみました。
最後に、レスポンシブ対応のスマホでの表示順について、通常の表示ルールでは左から右、上から下が基本ルールになっているため、メインコンテンツ＞サイドバー（人気記事）＞投稿記事の順番だと何も考える必要がない状態です。
投稿記事を先に持っていきたい場合、HTMLの記述順をそれに合わせることになります。
すると、サイドバーのあった場所に投稿記事が滑り込んでくるといった事が起こってしまいます。
それを解決したのが、<div class=”row”></div>を入れ子にすることです。
簡単に書くとこんな書き方ですね。
<div class="container bg-light p-3">
<div class="row bg-primary">
<div class="col-md-8 col-12 bg-secondary">
<h1>１</h1>
<div class="row bg-warning p-3">
<div class="col-md-6 col-12 bg-danger">
<h1>２</h1>
</div>
<div class="col-md-6 col-12 bg-success">
<h1>３</h1>
</div>
</div>
</div>
<div class="col-md-4 col-12 bg-info">
<h1>４</h1>
</div>
</div>
</div>
※Bootstrap4を使っていないと正常に結果が出ません。
これを表示した結果がこちらです。
これが横幅が狭くなると表示順がこう変わります。
これらを使って書いたコードがこちらです。
<!----- メインコンテンツ ----->
<main class="m-0 px-5" style="background-color: beige;">
<div class="conatiner">
<div class="row py-3 m-0">
<!-- ピックアップコンテンツ -->
<div class="col-md-8 col-12 p-3">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!-- インジケータの設定 -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!-- スライドさせる画像の設定 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100 img-fluid" src="img/S__26001411.jpg" alt="第1スライド">
<div class="carousel-caption d-none d-md-block">
<h5>第1スライド見出し</h5>
<p>スライドイメージの紹介</p>
</div><!-- /.carousel-caption -->
</div><!-- /.carousel-item -->
<div class="carousel-item">
<img class="d-block w-100 img-fluid" src="img/S__26001413.jpg" alt="第2スライド">
<div class="carousel-caption d-none d-md-block">
<h5>第2スライド見出し</h5>
<p>スライドイメージの紹介</p>
</div><!-- /.carousel-caption -->
</div><!-- /.carousel-item -->
<div class="carousel-item">
<img class="d-block w-100 img-fluid" src="img/S__26001414.jpg" alt="第3スライド">
<div class="carousel-caption d-none d-md-block">
<h5>第3スライド見出し</h5>
<p>スライドイメージの紹介</p>
</div><!-- /.carousel-caption -->
</div><!-- /.carousel-item -->
</div><!-- /.carousel-inner -->
<!-- スライドコントロールの設定 -->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<h2>＜</h2>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<h2>＞</h2>
</a>
</div><!-- /.carousel -->
<!-- ピックアップコンテンツ END -->
<!-- 投稿記事 -->
<div class="row">
<div class="col-lg-6 col-12 p-3">
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="img/S__26001416.jpg" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">記事のタイトル</h5>
<p class="card-text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p class="card-text"><small class="text-muted">最終更新3分前</small></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-12 p-3">
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="img/S__26001416.jpg" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">記事のタイトル</h5>
<p class="card-text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p class="card-text"><small class="text-muted">最終更新3分前</small></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-12 p-3">
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="img/S__26001416.jpg" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">記事のタイトル</h5>
<p class="card-text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p class="card-text"><small class="text-muted">最終更新3分前</small></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-12 p-3">
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="img/S__26001416.jpg" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">記事のタイトル</h5>
<p class="card-text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p class="card-text"><small class="text-muted">最終更新3分前</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 投稿記事 END -->
</div>
<!-- サイドバー -->
<div class="col-md-4 col-12 p-3">
<div class=" bg-light">
<h3 class="p-3">人気記事</h3>
</div>
</div>
<!-- サイドバー END -->
</div>
</div>
</main>
<!----- メインコンテンツ END ----->
あとがき
今回はメインページのヘッダー部分とメインコンテンツ部分、サイドバーの領域確保までやっていきました。
投稿記事カードの画像サイズやピックアップコンテンツ部分のスライダーのサイズなどまだ甘い部分がありますが、今後の課題として調整していきます。
今回はここまでです。
次回もよろしくお願いします。
