php
1<?php get_header(); //header.phpを取得 ?> 2 3 <div id="content" class="clearfix"> 4 <aside> 5 <?php get_sidebar(); //sidebar.phpを取得 ?> 6 </aside> 7 8 <div id="errorMessage" class="clearfix"> 9 <h1>404 ERROR. PAGE NOT FOUND.</h1> 10 <span><a href="<?php echo esc_url( home_url( '/' ) ); ?>">トップに戻ります</a></span> 11 12 <label class="article404"> 13 <?php 14 // --------- 新着情報を3件表示 --------- 15 $args = array( 16 'category_name' => 'staff', // カテゴリー「staff」を読み込む 17 'posts_per_page' => 3 // 表示数 3件 18 ); 19 $the_query = new WP_Query( $args );// 新規WP query を作成 変数args で定義したパラメータを参照 20 if ( $the_query->have_posts() ) : 21 // ここから表示する内容を記入 22 ?> 23 24 <section class="section404"> 25 <h2 class="section-title">NEWS</h2> 26 <ul class="news-list"> 27 28 <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 29 // -------- ここから繰り返し---------- ?> 30 31 <li> 32 <span class="date"><?php the_time('Y.m.j'); ?></span> 33 <span class="label-info">お知らせ</span> 34 <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> 35 </li> 36 37 <?php // -------- 繰り返しここまで----------- 38 endwhile; ?> 39 40 </ul> 41 <div class="center"> 42 <a href="<?php echo home_url(); ?>/category/news/" class="btn btn-default">お知らせ</a> 43 </div> 44 </section> 45 46 <?php 47 // -------- 新着情報WP_query終了----------- 48 wp_reset_postdata(); 49 endif; 50 ?> 51 52 53 </label> 54 </div> 55 </div> 56 57 58 59 60 61<?php get_footer(); //footer.phpを取得 PHPで終了するので閉じタグは不要です
css
1@charset "utf-8"; 2 3 4 5#errorMessage { 6 width: 700px; 7 float: right; 8 margin-top: 30px; 9} 10 11 12.article404 .section404 { 13 color: #ffbe00; 14 margin-top: 300px; 15}
すごく単純なコードだとおもいますが、404エラーの際に表示されるテンプレートです。
エラー文言と、その下に投稿記事を3つ表示させています。
しかしこのarticle sectionに対してcssが効かずに困っています。
補足なのですが、このarticle
実はpage.phpの固定ページテンプレートで使ってまして、idもclassも指定しておりません。
なのでstyle.cssには
article { |
---|
------ |
} |
という風に書いてあるんですが、これがいけなかったりしますでしょうか? |
問題の部分を装飾しているcssを追記します
css
1/* Content 2 ========================================================================== */ 3 4#content { 5 width: 900px; 6 margin: 30px auto; 7} 8 9aside { 10 float: left; 11 width: 200px; 12} 13 14aside section { 15 margin-bottom: 20px; 16} 17 18article { 19 float: right; 20 width: 700px; 21} 22 23article section { 24 margin-bottom: 40px; 25} 26 27article h2 { 28 color: #ffbe00; 29} 30 31article h3 { 32 color: #888; 33} 34
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/09 03:25
2019/02/09 04:44
2019/02/09 05:27
2019/02/09 05:38
2019/02/09 08:17
2019/02/09 09:31 編集