第3回目のWordPressのサイト作り
前回の記事はこちらから
WordPress オリジナルテーマを作る〜ヘッダー〜
WordPress オリジナルテーマを作る〜ヘッダーその2〜
ブログの投稿一覧を作る
今回の主な作業はパソコンで見た時のメインとサイドをわけて、ブログの投稿一覧を作るです。
アイコンまで入れたかったんですけど、今日は入れれませんでした。
明日以降の作業でいれていきたいと思います。
<!-- 今回追加したhtml --> <div class="container"> <div class="main"> <div class="post"> <img src="img/no-img.png"> <div class="post-content"> <p class="ttl">タイトルタイトル</p> <div class="post-meta"> <ul> <li>投稿日</li> <li>カテゴリ</li> </ul> </div> <div class="post-txt"> <p>本文本文本文本文本文本文本文本文</p> </div> </div> </div> <div class="post"> <img src="img/no-img.png"> <div class="post-content"> <p class="ttl">タイトルタイトル</p> <div class="post-meta"> <ul> <li>投稿日</li> <li>カテゴリ</li> </ul> </div> <div class="post-txt"> <p>本文本文本文本文本文本文本文本文</p> </div> </div> </div> <div class="post"> <img src="img/no-img.png"> <div class="post-content"> <p class="ttl">タイトルタイトル</p> <div class="post-meta"> <ul> <li>投稿日</li> <li>カテゴリ</li> </ul> </div> <div class="post-txt"> <p>本文本文本文本文本文本文本文本文</p> </div> </div> </div> </div> <div class="side"> サイド部分 </div> </div> </body>
<!-- 今回加わったcss --> .main { width: 740px; background-color:#fff; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; padding: 0 30px 30px; box-sizing: border-box; float: left; margin-top: 30px; } .post { overflow: hidden; border-bottom: 1px solid #ccc; padding-bottom: 30px; padding-top: 30px; } .post img { float: left; padding-right: 15px; } .ttl { font-size: 20px; font-weight: 600; } .post-meta, .post-txt { font-size: 14px; color: #868686; } .post-meta { padding: 5px 0; } .post-meta li { display: inline-block; } .side { width: 300px; float: right; }
へば!