大きなモニターを使用している場合でも、Simplicity では表示幅が中央部に狭いままで、大画面ユーザーのスペースを有効活用できていない。
そこで、大きなモニターでの閲覧ユーザーに対して、幅いっぱいの記事リストを提供することにした。
header-insert.php を次のように編集する。
個別記事以外のページに no-singlepost.css を読みこませるようにする。
root@:/DocumentRoot/wp-content/themes/simplicity-child# cat header-insert.php <?php //ヘッダー部分にタグを挿入したいときは、このテンプレート挿入（ヘッダーに挿入する解析タグなど） //子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。 //例：<script type="text/javascript">解析コード</script> ?> <?php if (!is_user_logged_in()) : //ログインユーザーをカウントしたくない場合は //↓ここに挿入?> <?php endif; ?> <?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?> <?php if( ! is_single()): ?> <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/no-singlepost.css"> <?php endif; ?>
no-singlepost.css を、次の通り作成する。
root@:/DocumentRoot/wp-content/themes/simplicity-child/css# cat no-singlepost.css
@media screen and (min-width: 1360px) {
#header-in, #navi-in, #body-in, #footer-in{
width: 100% !important;
}
#main {
float: right !important;
width: 100% !important;
padding: 0 300px 0 0 !important; /* サイドバーとの距離 */
margin: 0 auto !important;
}
#sidebar {
position: absolute !important;
top: 46px !important;
right: 0px !important;
}
/*タイル状リスト*/
#main .entry{
width:320px !important;
}
}
@media screen and (min-width: 2265px) {
/*タイル状リスト*/
#main .entry{
width:640px !important;
}
}
min-width: 1360px 等の数字は随時カスタマイズ可能。
これでレスポンシブでおよそうまく表示されるようになった。
幅が広い時は、大きな画像を表示させたい。