第5回目のWordPressのサイト作り
前回の記事までの記事はこちらから
WordPress オリジナルテーマを作る〜ヘッダー〜
WordPress オリジナルテーマを作る〜ヘッダーその２〜
WordPress オリジナルテーマを作る〜メイン部分〜
WordPress オリジナルテーマを作る〜メイン部分その2〜
サイドバーとフッターを作る
今回はサイドバーを作る作業をしていきました。
今のブログはなぜか新着記事が2回表示されるようになっていたので上のごちゃごちゃしている部分を消しました。
今回とくにつまずいた部分はないんですが、ブレイクポイントを960から1070に変更しました。
サイドバー(300px)とコンテンツ部分(740px)と余白を合わせるとカラムが崩れてしまったので・・・
最初の設計は大事ですね。
では今日新しく書いた部分を記載していきます。
<!-- html 一部省略 --> <div class="side"> <div class="widget"> <div class="category"> <ul> <li class="parent"><a href="">サイト構築</a></li> <li class="child"><a href="">CSS</a></li> <li class="child"><a href="">HTML</a></li> <li class="child"><a href="">JavaScript</a></li> <li class="child"><a href="">jQuery</a></li> <li class="child"><a href="">Wordpress</a></li> <li class="parent"><a href="">ツール</a></li> </ul> </div> <div class="widget-post"> <div class="post"> <img src="img/no-img.png"> <div class="post-content"> <p class="date">投稿日</p> <p class="ttl">タイトルタイトル</p> </div> </div> <div class="post"> <img src="img/no-img.png"> <div class="post-content"> <p class="date">投稿日</p> <p class="ttl">タイトルタイトル</p> </div> </div> <div class="post"> <img src="img/no-img.png"> <div class="post-content"> <p class="date">投稿日</p> <p class="ttl">タイトルタイトル</p> </div> </div> <div class="post"> <img src="img/no-img.png"> <div class="post-content"> <p class="date">投稿日</p> <p class="ttl">タイトルタイトル</p> </div> </div> <div class="post"> <img src="img/no-img.png"> <div class="post-content"> <p class="date">投稿日</p> <p class="ttl">タイトルタイトル</p> </div> </div> </div> </div> </div> <footer> <div class="container"> <ul> <li><a href="">sample01</a></li> <li><a href="">sample02</a></li> <li><a href="">sample03</a></li> </ul> <p class="big">デザイナーを目指す人のブログ</p> <p>Webサイト作成時に勉強したことの備忘録</p> <p class="copy">Copyright© Webデザイナーを目指す人のブログ , 2017 All Rights Reserved.</p> </div> </footer>
<!-- 今回加わったcss -->
/* side */
.side {
width: 300px;
float: right;
}
.category li {
margin-bottom: 5px;
}
.category li.child {
text-indent: 10px;
}
.widget {
padding: 30px;
}
.widget-post .post img {
width: 100px;
padding-right: 0;
}
.widget-post .post {
padding: 10px 0;
}
.widget-post .ttl {
font-size: 18px;
line-height: 24px;
}
.widget-post .date {
font-size: 13px;
}
footer ul {
margin: 0 auto;
max-width: 270px;
font-size: 0;
}
footer li {
display: inline-block;
border-right: 1px solid #ccc;
padding-right: 10px;
padding-left: 10px;
font-size: 14px;
}
footer li:last-child {
border-right: none;
}
footer p {
text-align: center;
margin: 22px;
font-size: 12px;
}
footer .big {
font-size: 18px;
font-weight: 600;
}
footer .copy {
margin: 40px 0 22px;
font-weight: 600;
color: #999;
}
@media screen and (max-width: 1070px) {
/* side */
.side {
width: 100%;
float: none;
margin-top: 30px;
clear: both;
}
.widget-post .post img {
width: 110px;
padding-right: 0;
}
}
へば！
