第4回目のWordPressのサイト作り
前回の記事までの記事はこちらから
WordPress オリジナルテーマを作る〜ヘッダー〜
WordPress オリジナルテーマを作る〜ヘッダーその２〜
WordPress オリジナルテーマを作る〜メイン部分〜
ブログの投稿一覧をレスポンシブにする
今回の主な作業は前回作ったPC版の記事投稿一覧画面にアイコンを追加して、レスポンシブにした時のレイアウトを整えることでした。
アイコンにはFontawesomeを使っています。
２箇所ほどつまずいた点があったので先に書いておきます。
1つ目
Fontawesomeが反映されない。
今回CDNを利用してFontawesomeを使おうとしたのですが、何度やっても反映されない。
htmlソースはあってるはずなのに・・・
色々試していたらCDNのバージョンが古かったのが原因だったようです。
ブログとかに掲載しているやつをそのままコピーして貼り付けるとバージョンが古い場合があるから、公式サイトから必ず持ってくるようにしましょう。
2つ目
ブログの本文がサムネイルの下に回り込む。
サムネイルをfloat:left;にしていて、タイトルや本文抜粋部分には特に指定をしていませんでした。パソコン版で表示する場合は特に問題ありませんが、スマホ版にして画面幅が小さくなると本文抜粋がサムネイルの下に回り込んでしまいました。
これは右側に表示される部分（.post-content）にoverflow: hidden;を指定することで解決しました。
ではでは今日追加した部分のソースを書いていきます。
<!-- html 一部省略 -->
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Webデザイナーを目指す人のブログ</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#navtoggle').click(function(){
$('header').toggleClass('nav_open');
});
});
</script>
</head>
<body>
<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>
</body>
<!-- 今回加わったcss -->
.post-content {
overflow: hidden;
}
@media screen and (max-width: 960px) {
.main {
width: 100%;
padding: 10px;
margin-top: 10px;
}
.post img {
width: 20%;
min-width: 100px;
}
h1 {
padding: 80px 0 10px;
}
.container {
padding-left: 0px;
padding-right: 0px;
}
}
へば！
