こんにちは朱夏です。
今日もコードを書いていきます。
今回は、サイドバーとフッター部分を作って、トップページとなるindex.htmlを完成させたいと思います。
勉強させていただいている動画はこちら。
それではやっていきます。
サイドバーには、ワイヤーフレームに描いたものに追加で検索窓を追加したいと思います。
というわけで、サイドバーに組み込むのは以下の3つになります。
-
- 検索窓
- 人気記事一覧
- Twitterタイムライン埋め込み
ここは縦一列にスマホ表示でも順番が入れ替わったりさせる必要が無いので、そのままコードを書き込んでい行きます。
出来上がったコードがこちらです。
<!-- サイドバー -->
<div class="col-md-4 col-12 p-3">
<!-- 検索窓 -->
<div class="py-3">
<div class="">
<form class="form-inline my-2 my-lg-0">
<input type="search" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索...">
<button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
</form>
</div>
</div>
<!-- 検索窓 END -->
<!-- 人気記事一覧 -->
<div class=" bg-light shadow">
<h3 class="pt-3 px-3 text-center">人気記事一覧</h3>
<div class="p-3">
<div class="py-3 border-top text-center">
<h5><a href="#" class="text-secondary">記事タイトル1</a></h5>
</div>
<div class="py-3 border-top text-center">
<h5><a href="#" class="text-secondary">記事タイトル2</a></h5>
</div>
<div class="py-3 border-top text-center">
<h5><a href="#" class="text-secondary">記事タイトル3</a></h5>
</div>
</div>
</div>
<!-- 人気記事一覧 END -->
<!-- Twitter -->
<div class="py-3">
<div class="shadow">
<a class="twitter-timeline" data-height="500" data-theme="light" href="https://twitter.com/syunatsu1?ref_src=twsrc%5Etfw">Tweets by syunatsu1</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
<!-- Twitter END -->
</div>
<!-- サイドバー END -->
検索窓はBootstrapからです。
人気記事一覧は、記事タイトルのみのシンプルなものにしていますが、サムネイルがあった方が見栄えが豪華になるかなとは考えたりしています。
実際にWordPress用に書き換える時に変えるかもしれません。
Twitterはパララックスサイトのテンプレートを作成してた時に使った公式の埋め込みタグ生成ページから作成、張り付けました。
サイトはこちらです。
これでメイン部分は出来たので、次に行きます。
フッターには以下のコンテンツを組み込んでいきます。
-
- プロフィール
- リンク
- テキストエリア
プロフィールは動画のしもむらともきさんのプロフィールを真似して作りました。
リンク部分は、フッター側のナビゲーションの様なイメージです。
テキストエリアは、スペース埋めで作ったので特に使い道を決めていません。
ポートフォリオのリンク置き場とかの方が有用かもしれませんね。
出来上がったコードはこちらです。
<!----- フッター ----->
<footer class="bg-dark">
<div class="container">
<div class="row p-3">
<!-- プロフィール -->
<div class="col-lg-4 p-5">
<h4 class="font-weight-bolder text-center text-light border-bottom">プロフィール</h4>
<div class="p-3">
<img class="img-fluid rounded-circle" src="img/snap1.jpg" alt="">
</div>
<div class="text-center">
<h4 class="d-inline-block border-bottom border-info text-light">朱夏</h4>
</div>
<p class="text-light p-3">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<!-- プロフィール END -->
<!-- テキストリンク -->
<div class="col-lg-4 p-5 border-secondary border-right border-left">
<h4 class="font-weight-bolder text-center text-light border-bottom">リンク</h4>
<div class="py-3">
<ul class="text-light">
<li><a class="text-light" href="#">リンク１</a></li>
<li><a class="text-light" href="#">リンク２</a></li>
<li><a class="text-light" href="#">リンク３</a></li>
<li><a class="text-light" href="#">リンク４</a></li>
<li><a class="text-light" href="#">リンク５</a></li>
</ul>
</div>
</div>
<!-- テキストリンク END -->
<!-- テキスト -->
<div class="col-lg-4 p-5">
<h4 class="font-weight-bolder text-center text-light border-bottom">テキスト</h4>
<div class="py-3">
<p class="text-light">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
<!-- テキスト -->
</div>
<p class="text-center">(c)test.com</p>
</div>
</footer>
<!----- フッター END ----->
これで、index.htmlのコードは全て書き終えました。
実際の動作はこんな感じになりました。
ほぼほぼ想定通りの動きが出来ました。
細かい微調整は、先を進めながらやっていこうと思います。
今回で、メイン部分となるindex.htmlを書き終える事が出来ました。
1つ目のテーマの時より色々な事を盛り込んでいる割には、作業時間がそれほどかかっていないので、多少は成長したのかなと思います。
次回は、作成したトップページを元に、固定ページ、投稿ページを作成していきます。
今回はここまでです。
次回もよろしくお願いします。
