記事の公開日とタグを取得し、表示領域に合わせて文字サイズをレスポンシブルに調整する方法を紹介します。レスポンシブル対応は「@media (max-width: 表示領域の指定)」をCSSに設定することで可能です。
@media (max-width: 表示領域の指定)を各表示領域に設定することで、閲覧環境に合わせたレスポンシブルなブログの作成できます。
以外と簡単です。色々試してみてください。
single.phpに書き込むコード
下記内容をパンくずリストを設置したい場所に追記してください。
[php]
<div class=”datetag”>
<!–公開日の表示–>
<span class=”kiji-date”><i class=”fa fa-pencil-square-o”></i>
公開日：<?php echo get_the_date(); ?></span>
<!–タグの取得–>
<span class=”kiji-tag”>
記事分類：<?php the_tags(”, ‘, ‘); ?></span>
</div>
[/php]
style.cssに書き込むコード
下記内容をstyle.cssに追記してください。
[css]
/*——————————————-*/
/*———-公開日,タグ設定ここから———-*/
/*——————————————-*/
/*公開日,タグ表示エリア設定ここから*/
.datetag{
border-bottom:dotted 2px #00CCFF;
padding:0px 0px 5px 0px;
margin-bottom:0px;
}
/*公開日,タグ表示エリア設定ここまで*/
/*公開日表示設定ここから*/
.kiji-date {
padding:1px 5px 1px 5px;
color:#f0f0f0;
background-color:#3A3F3F;
font-size:14px;
}
/*公開日表示設定ここまで*/
/*タグの設定ここから*/
.kiji-tag {
padding:1px 1px 1px 5px;
color:#f0f0f0;
background-color:#449287;
font-size:14px;
}
.kiji-tag a {
width:auto;
padding:1px 5px 1px 1px;
color:#f0f0f0;
font-size:14px;
border-radius:2px;
}
.kiji-tag a:hover {
color:#c3aab0;
}
/*レスポンシブル対応*/
@media (max-width: 600px){
.kiji-tag,.kiji-tag a {font-size:12px;}
.kiji-date {font-size:12px;}
}
/*タグの設定ここまで*/
/*——————————————-*/
/*———-公開日,タグ設定ここまで———-*/
/*——————————————-*/[/css]
表示内容
あなたの快適なブログ生活に役立ちますように。
