1. ホーム
  2. ホームページの作り方
  3. 無料で使えるデモサイト
  4. archive.phpとsingle.phpの制作

archive.phpとsingle.phpの制作

archive.phpとsingle.phpの制作

それでは「archive.php」と「single.php」の作成をしていきましょう。今回のファイルは2つとも記述が長いですが、重要なポイントだけ押さえていってもらえればと思います。

特に「single.php」は投稿記事を表示する大事なファイルです。内部SEOも考慮した構造でHTMLをマークアップしていますので、タグの記述も併せてご確認ください。

こちらの「デモサイト」から実際のページを確認して頂けます。

目次 [閉じる]

archive.phpを作成する

各カテゴリーの記事を一覧表示する「archive.php」を作成していきます。ココでは「search.php」の作成時に説明を省略した「その他の記事」の出力方法を見ていきましょう。

archive.php

                	
    
                    	
  1. <?php get_header(); ?>
    2. 
                    	
  2. <main>
    3. 
                    	
  3.   <div class="breadcrumbWrap">
    4. 
                    	
  4.     <ol itemscope="" itemtype="https://schema.org/BreadcrumbList">
    5. 
                    	
  5.       <li itemscope="" itemtype="https://schema.org/ListItem" itemprop="itemListElement">
    6. 
                    	
  6.         <a itemprop="item" href="<?php echo esc_url(get_home_url()); ?>">
    7. 
                    	
  7.           <img src="<?php bloginfo('template_url'); ?>/img/icon_home.svg" alt="">
    8. 
                    	
  8.           <span itemprop="name">ホーム</span>
    9. 
                    	
  9.         </a>
    10. 
                    	
  10.         <meta itemprop="position" content="1">
    11. 
                    	
  11.       </li>
    12. 
                    	
  12.       <li itemscope="" itemtype="https://schema.org/ListItem" itemprop="itemListElement">
    13. 
                    	
  13.         <span itemprop="name"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span>
    14. 
                    	
  14.         <meta itemprop="position" content="2">
    15. 
                    	
  15.       </li>
    16. 
                    	
  16.     </ol>
    17. 
                    	
  17.   </div>
    18. 
                    	
  18.   <div class="mainInner">
    19. 
                    	
  19.     <div id="mainContents" class="mainContents">
    20. 
                    	
  20.       <section id="category">
    21. 
                    	
  21.         <div class="title">
    22. 
                    	
  22.           <h1><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></h1>
    23. 
                    	
  23.         </div>
    24. 
                    	
  24.         <div class="inner">
    25. 
                    	
  25.           <div class="postWrap">
    26. 
                    	
  26.             <?php while (have_posts()) : the_post();?>
    27. 
                    	
  27.             <article>
    28. 
                    	
  28.               <a href="<?php the_permalink(); ?>">
    29. 
                    	
  29.                 <figure class="thumbnail">
    30. 
                    	
  30.                   <?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
    31. 
                    	
  31.                 </figure>
    32. 
                      	
  32.                 <div class="txt">
    33. 
                      	
  33.                   <h2 itemprop="headline"><?php echo get_the_title(); ?></h2>
    34. 
                     	
  34.                 </div>
    35. 
                     	
  35.               </a>
    36. 
                     	
  36.             </article>
    37. 
                     	
  37.             <?php endwhile; ?>
    38. 
                     	
  38.           </div>
    39. 
                     	
  39.           <div class="paginationWrap">
    40. 
                     	
  40.             <?php wp_pagination(); ?>
    41. 
                     	
  41.           </div>
    42. 
                     	
  42.         </div>
    43. 
                     	
  43.       </section>
    44. 
                     	
  44.       <div class="recommend">
    45. 
                     	
  45.         <div class="title">
    46. 
                     	
  46.           <h2>その他の記事</h2>
    47. 
                     	
  47.         </div>
    48. 
                     	
  48.         <div class="postWrap">
    49. 
                     	
  49.           <?php
    50. 
                     	
  50.           $args = array(
    51. 
                     	
  51.             'post_type' => 'post',
    52. 
                     	
  52.             'posts_per_page' => 6,
    53. 
                     	
  53.             'orderby' => 'rand'
    54. 
                     	
  54.           );
    55. 
                     	
  55.           $the_query = new WP_Query($args);
    56. 
                     	
  56.           while ($the_query->have_posts()) : $the_query->the_post();
    57. 
                     	
  57.           ?>
    58. 
                     	
  58.           <article>
    59. 
                      	
  59.             <a href="<?php the_permalink(); ?>">
    60. 
                      	
  60.               <figure class="thumbnail">
    61. 
                      	
  61.                 <?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
    62. 
                      	
  62.               </figure>
    63. 
                      	
  63.               <div class="txt">
    64. 
                      	
  64.                 <h3 itemprop="headline"><?php echo get_the_title(); ?></h3>
    65. 
                      	
  65.                 <div class="cattegory">
    66. 
                      	
  66.                   <p><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></p>
    67. 
                      	
  67.                 </div>
    68. 
                      	
  68.               </div>
    69. 
                      	
  69.             </a>
    70. 
                     	
  70.           </article>
    71. 
                     	
  71.           <?php endwhile; ?>
    72. 
                     	
  72.         </div>
    73. 
                     	
  73.       </div>
    74. 
                    	
  74.     </div>
    75. 
                    	
  75.     <?php get_sidebar(); ?>
    76. 
                    	
  76.   </div>
    77. 
                    	
  77. </main>
    78. 
                    	
  78. <?php get_footer(); ?>
    79.

こちらもコピペしておいてください。コードは長いですが、半分は今まで見てきた内容のものです。まだ説明していない箇所と言えば「その他の記事」の項目だけですね。

                	
    
                     	
  1. <?php
    2. 
                     	
  2. $args = array(
    3. 
                     	
  3.   'post_type' => 'post',
    4. 
                     	
  4.   'posts_per_page' => 6,
    5. 
                     	
  5.   'orderby' => 'rand'
    6. 
                     	
  6. );
    7. 
                     	
  7. $the_query = new WP_Query($args);
    8. 
                     	
  8. while ($the_query->have_posts()) : $the_query->the_post();
    9. 
                     	
  9. ?>
    10. 
                     	
  10. ・
    11. 
                     	
  11. ・
    12. 
                     	
  12. ・
    13. 
                     	
  13. <?php endwhile; ?>
    14.

「その他の記事」では上記のPHPを記述しています。「・・・」の箇所には一覧表示と同じように「article」タグが記述されていますので、中身の内容は理解してもらえると思います。

上記のコードの意味をザックリ言うと、「6件の記事をランダムで一覧表示する」という事です。記事を一覧で表示する際にはいろいろな設定を加える事ができるんです。

「’post_type’ => ‘post’」で投稿記事を指定、「’posts_per_page’ => 6」で6件表示を指定、そして「’orderby’ => ‘rand’」でランダム表示を指定しています。

竹馬

あんまり難しく考えないで欲しいんですけど、この辺の設定はコピペで十分対応できます。後に紹介する「single.php」ではさらにもうひとつの指定を追加しています。

一覧ページのデザインをstyle.cssに追加

それでは「その他の記事」のデザインも「style.css」に追加していきます。ココの内容も今までおこなってきた設定とほぼほぼ同じなのでサクッとコピペしておきましょう。

style.css

                	
    
                    	
  1. ～テーマ情報省略～
    2. 
                    	
  2. ～共通デザイン省略～
    3. 
                    	
  3. ～main・パンくず・mainContents省略～
    4. 
                    	
  4. ～ヘッダー・フッター省略～
    5. 
                    	
  5. ～サイドバー・記事一覧・検索結果省略～
    6. 
                    	
  6. ～エラーページ省略～
    7. 
                    	
  7. /* ------ recommend ------ */
    8. 
                    	
  8. .recommend { margin-top: 60px }
    9. 
                    	
  9. .recommend h2 {
    10. 
                    	
  10.   font-size: 2.4rem;
    11. 
                    	
  11.   font-weight: 300;
    12. 
                    	
  12.   padding-bottom: 10px;
    13. 
                    	
  13.   border-bottom: 1px solid #c1c1c1
    14. 
                    	
  14. }
    15. 
                    	
  15. .recommend .postWrap {
    16. 
                    	
  16.   font-size: 0;
    17. 
                    	
  17.   margin-top: 40px
    18. 
                    	
  18. }
    19. 
                    	
  19. .recommend article {
    20. 
                    	
  20.   width: 100%;
    21. 
                    	
  21.   max-width: 50%;
    22. 
                    	
  22.   vertical-align: top;
    23. 
                    	
  23.   padding: 0 15px 30px;
    24. 
                    	
  24.   display: inline-block
    25. 
                    	
  25. }
    26. 
                    	
  26. .recommend article a { display: block }
    27. 
                    	
  27. .recommend article figure img { transition: all 0.3s ease-in-out }
    28. 
                    	
  28. .recommend article a:hover figure img { opacity: 0.7 }
    29. 
                    	
  29. .recommend article .txt {
    30. 
                    	
  30.   padding: 10px 20px 20px;
    31. 
                    	
  31.   background: #fff
    32. 
                    	
  32. }
    33. 
                    	
  33. .recommend article h3 {
    34. 
                    	
  34.   font-size: 1.6rem;
    35. 
                    	
  35.   font-weight: 300;
    36. 
                    	
  36.   text-align: left
    37. 
                    	
  37. }
    38. 
                    	
  38. .recommend article .cattegory p {
    39. 
                    	
  39.   font-size: 1.3rem;
    40. 
                     	
  40.   text-align: left;
    41. 
                     	
  41.   margin-top: 6px;
    42. 
                    	
  42. }
    43. 
                    	
  43. @media screen and (max-width: 768px) {
    44. 
                    	
  44.   .recommend { margin-top: 40px }
    45. 
                    	
  45.   .recommend h2 { font-size: 2rem }
    46. 
                    	
  46.   .recommend .postWrap {
    47. 
                    	
  47.     padding: 20px 10px;
    48. 
                    	
  48.     margin-top: 20px;
    49. 
                    	
  49.     background: #fff
    50. 
                    	
  50.   }
    51. 
                    	
  51.   .recommend article {
    52. 
                    	
  52.     max-width: 100%;
    53. 
                    	
  53.     padding: 0;
    54. 
                    	
  54.     display: block
    55. 
                    	
  55.   }
    56. 
                    	
  56.   .recommend article + article {
    57. 
                    	
  57.     padding: 20px 0 0;
    58. 
                    	
  58.     margin-top: 20px;
    59. 
                    	
  59.     border-top: 1px dashed #c1c1c1
    60. 
                    	
  60.   }
    61. 
                    	
  61.   .recommend article a { font-size: 0 }
    62. 
                    	
  62.   .recommend article figure {
    63. 
                    	
  63.     width: 100px;
    64. 
                    	
  64.     vertical-align: top;
    65. 
                    	
  65.     margin-right: 10px;
    66. 
                    	
  66.     display: inline-block
    67. 
                    	
  67.   }
    68. 
                    	
  68.   .recommend article .txt {
    69. 
                    	
  69.     width: calc(100% - 110px);
    70. 
                    	
  70.     vertical-align: top;
    71. 
                    	
  71.     padding: 0 10px;
    72. 
                    	
  72.     display: inline-block
    73. 
                    	
  73.   }
    74. 
                    	
  74.   .recommend article h3 {
    75. 
                    	
  75.     font-size: 1.5rem;
    76. 
                    	
  76.     margin-top: 0
    77. 
                    	
  77.   }
    78. 
                    	
  78.   .recommend article .cattegory p { margin-top: 0 }
    79. 
                    	
  79. }
    80.

「index.php」「search.php」「archive.php」で表示されるループ部分はどれも同じデザインです。「その他の記事」も同じように記事が1行に2列並んで表示されています。

もし記事の表示を1行3列や1行4列に変更されたい場合は、ご自身でカスタマイズしてみてください。個人的にサンプルブログはベースとして使ってもらって、どんどんデザインや機能を追加していってもらえると嬉しいです。

ちなみに記事の表示を1行3列にするなら、「article」の「max-width」プロパティの値を「calc(100% / 3)」とすればOKです。同じく1行4列にするなら値を「25%」に変更します。

簡単ですねぇ、せっかくなので「calc」の説明をすると、「calc」のうしろの「()」山括弧には計算式を記述する事ができます。「calc(100% / 3)」というのは「100%を3で割った数値」という意味です。

3で割った数値を指定すると「33.333333333333%」みたいになりますが、正確には3で割った値に満たない数値になります。なので、そんな時には「calc」を使うのが便利です。

single.phpを作成する

続いて「single.php」を作成していきますので、下記のコードをコピペしておいてください。投稿記事の部分には条件分岐を設定していますが、必要なければ外してもらって結構です。

single.php

                	
    
                    	
  1. <?php get_header(); ?>
    2. 
                    	
  2. <main>
    3. 
                    	
  3.   <div class="breadcrumbWrap">
    4. 
                    	
  4.     <ol itemscope="" itemtype="https://schema.org/BreadcrumbList">
    5. 
                    	
  5.       <li itemscope="" itemtype="https://schema.org/ListItem" itemprop="itemListElement">
    6. 
                    	
  6.         <a itemprop="item" href="<?php echo esc_url(get_home_url()); ?>">
    7. 
                    	
  7.           <img src="<?php bloginfo('template_url'); ?>/img/icon_home.svg" alt="">
    8. 
                    	
  8.           <span itemprop="name">ホーム</span>
    9. 
                    	
  9.         </a>
    10. 
                    	
  10.         <meta itemprop="position" content="1">
    11. 
                    	
  11.       </li>
    12. 
                    	
  12.       <li itemscope="" itemtype="https://schema.org/ListItem" itemprop="itemListElement">
    13. 
                    	
  13.         <?php
    14. 
                    	
  14.         $cat = get_the_category();
    15. 
                    	
  15.         $cat_id = $cat[0]->cat_ID;
    16. 
                    	
  16.         $link = get_category_link($cat_id);
    17. 
                    	
  17.         ?>
    18. 
                    	
  18.         <a itemprop="item" href="<?php echo $link; ?>">
    19. 
                    	
  19.           <span itemprop="name"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span>
    20. 
                    	
  20.         </a>
    21. 
                    	
  21.         <meta itemprop="position" content="2">
    22. 
                    	
  22.       </li>
    23. 
                    	
  23.       <li itemscope="" itemtype="https://schema.org/ListItem" itemprop="itemListElement">
    24. 
                    	
  24.         <span itemprop="name"><?php the_title(); ?></span>
    25. 
                    	
  25.         <meta itemprop="position" content="3">
    26. 
                    	
  26.       </li>
    27. 
                    	
  27.     </ol>
    28. 
                    	
  28.   </div>
    29. 
                    	
  29.   <div class="mainInner">
    30. 
                    	
  30.     <div id="mainContents" class="mainContents">
    31. 
                    	
  31.       <section id="post">
    32. 
                    	
  32.         <div class="inner">
    33. 
                    	
  33.           <article>
    34. 
                    	
  34.             <?php if (have_posts()) : ?>
    35. 
                    	
  35.             <?php while (have_posts()) : the_post(); ?>
    36. 
                    	
  36.             <header id="entryHeader">
    37. 
                    	
  37.               <figure class="entryThumbnail">
    38. 
                    	
  38.                 <div class="thumbnail">
    39. 
                    	
  39.                   <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
    40. 
                    	
  40.                     <span itemprop="image">
    41. 
                    	
  41.                       <?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
    42. 
                    	
  42.                     </span>
    43. 
                    	
  43.                   </a>
    44. 
                    	
  44.                 </div>
    45. 
                    	
  45.               </figure>
    46. 
                    	
  46.               <ul>
    47. 
                    	
  47.                 <li>最終更新日 <time><?php the_modified_date('Y.m.j'); ?></time></li>
    48. 
                    	
  48.                 <li><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></li>
    49. 
                    	
  49.               </ul>
    50. 
                    	
  50.               <h1><?php the_title(); ?></h1>
    51. 
                    	
  51.             </header>
    52. 
                    	
  52.             <div class="entryContent">
    53. 
                    	
  53.               <?php the_content(); ?>
    54. 
                    	
  54.             </div>
    55. 
                    	
  55.             <?php endwhile; ?>
    56. 
                    	
  56.             <?php else : ?>
    57. 
                    	
  57.             <div class="entryContent">
    58. 
                    	
  58.               <p>記事が見つかりませんでした。</p>
    59. 
                    	
  59.             </div>
    60. 
                    	
  60.             <?php endif; ?>
    61. 
                    	
  61.           </article>
    62. 
                     	
  62.         </div>
    63. 
                     	
  63.       </section>
    64. 
                     	
  64.       <div class="recommend">
    65. 
                     	
  65.         <div class="title">
    66. 
                     	
  66.           <h2>その他の記事</h2>
    67. 
                     	
  67.         </div>
    68. 
                     	
  68.         <div class="postWrap">
    69. 
                     	
  69.           <?php
    70. 
                     	
  70.           $args = array(
    71. 
                     	
  71.             'post_type' => 'post',
    72. 
                     	
  72.             'posts_per_page' => 6,
    73. 
                     	
  73.             'orderby' => 'rand',
    74. 
                     	
  74.             'post__not_in' => array(get_the_ID())
    75. 
                     	
  75.           );
    76. 
                     	
  76.           $the_query = new WP_Query($args);
    77. 
                     	
  77.           while ($the_query->have_posts()) : $the_query->the_post();
    78. 
                     	
  78.           ?>
    79. 
                     	
  79.           <article>
    80. 
                      	
  80.             <a href="<?php the_permalink(); ?>">
    81. 
                      	
  81.               <figure class="thumbnail">
    82. 
                      	
  82.                 <?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
    83. 
                      	
  83.               </figure>
    84. 
                      	
  84.               <div class="txt">
    85. 
                      	
  85.                 <h3 itemprop="headline"><?php echo get_the_title(); ?></h3>
    86. 
                      	
  86.                 <div class="cattegory">
    87. 
                      	
  87.                   <p><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></p>
    88. 
                      	
  88.                 </div>
    89. 
                      	
  89.               </div>
    90. 
                      	
  90.             </a>
    91. 
                     	
  91.           </article>
    92. 
                     	
  92.           <?php endwhile; ?>
    93. 
                     	
  93.         </div>
    94. 
                     	
  94.       </div>
    95. 
                    	
  95.     </div>
    96. 
                    	
  96.     <?php get_sidebar(); ?>
    97. 
                    	
  97.   </div>
    98. 
                    	
  98. </main>
    99. 
                    	
  99. <?php get_footer(); ?>
    100.

長いですけどPHPの記述の意味はほぼほぼ理解してもらえるかと思います。ちょこちょこ初めて見る記述がありますので、そちらの説明をおこなっていきます。

                	
    
                    	
  1. <?php
    2. 
                    	
  2. $cat = get_the_category();
    3. 
                    	
  3. $cat_id = $cat[0]->cat_ID;
    4. 
                    	
  4. $link = get_category_link($cat_id);
    5. 
                    	
  5. ?>
    6. 
                    	
  6. <a itemprop="item" href="<?php echo $link; ?>">
    7. 
                    	
  7. ・
    8. 
                    	
  8. </a>
    9.

まずはパンくずリスト内の記述です。上記のコードでカテゴリーページのURLが出力されます。手順としてはカテゴリー情報を取得した後に「<?php echo $link; ?>」でURLを出力しています。

                	
    
                    	
  1. <?php if (have_posts()) : ?>
    2. 
                    	
  2. ・
    3. 
                    	
  3. ・
    4. 
                    	
  4. ・
    5. 
                    	
  5. <?php else : ?>
    6. 
                    	
  6. <div class="entryContent">
    7. 
                    	
  7.   <p>記事が見つかりませんでした。</p>
    8. 
                    	
  8. </div>
    9. 
                    	
  9. <?php endif; ?>
    10.

次は記事の表示に関する記述です。サンプルブログでは「if文」の条件分岐を使って「記事がある時」と「記事がない時」の表示をそれぞれ設定しています。「・・・」の箇所には「記事がある時」の設定です。

「記事がない時」の設定が要らない場合は、上記のコードを削除してもらえばOKです。

                	
    
                    	
  1. <?php the_content(); ?>
    2. 
                    	
  2. <?php the_modified_date('Y.m.j'); ?>
    3.

記事の表示に関するコードも2点だけ紹介しておきます。「the_content()」で記事の本文を出力し、「the_modified_date(‘Y.m.j’)」で記事の更新日を出力します。

単純に記事を作成した日付を表示したい場合は「<?php the_date(); ?>」とします。

                	
    
                     	
  1. <?php
    2. 
                     	
  2. $args = array(
    3. 
                     	
  3.   'post_type' => 'post',
    4. 
                     	
  4.   'posts_per_page' => 6,
    5. 
                     	
  5.   'orderby' => 'rand',
    6. 
                     	
  6.   'post__not_in' => array(get_the_ID())
    7. 
                     	
  7. );
    8. 
                     	
  8. $the_query = new WP_Query($args);
    9. 
                     	
  9. while ($the_query->have_posts()) : $the_query->the_post();
    10. 
                     	
  10. ?>
    11. 
                     	
  11. ・
    12. 
                     	
  12. ・
    13. 
                     	
  13. ・
    14. 
                     	
  14. <?php endwhile; ?>
    15.

最後は「archive.php」でも紹介した「その他の記事」の部分にひとつ指定を追加していますのでご確認ください。追加したのは「’post__not_in’ => array(get_the_ID())」の1行のみです。

「その他の記事」という項目に現在見ている記事が並んでるのはおかしいですよね？ですから「’post__not_in’ => array(get_the_ID())」を追加して、「閲覧中の記事を除外」の指定を追加しています。

竹馬

どうでしょうか、PHPの記述にも少しは慣れてきたんじゃないでしょうか。正直、僕もPHPは詳しくないので、コードを見ればぼんやりと意味がわかる程度です。

記事ページのデザインをstyle.cssに追加

「single.php」も完成しましたので、記事ページのデザインを「style.css」に追加しましょう。この部分は是非ともご自身でデザインを変更していってもらいたいですね。

style.css

                	
    
                    	
  1. ～テーマ情報省略～
    2. 
                    	
  2. ～共通デザイン省略～
    3. 
                    	
  3. ～main・パンくず・mainContents省略～
    4. 
                    	
  4. ～ヘッダー・フッター省略～
    5. 
                    	
  5. ～サイドバー・記事一覧・検索結果省略～
    6. 
                    	
  6. ～エラーページ省略～
    7. 
                    	
  7. ～その他の記事デザイン省略～
    8. 
                    	
  8. /* ------ post ------ */
    9. 
                    	
  9. #post {
    10. 
                    	
  10.   padding-bottom: 40px;
    11. 
                    	
  11.   background: #fff
    12. 
                    	
  12. }
    13. 
                    	
  13. #post #entryHeader figure a { display: block }
    14. 
                    	
  14. #post #entryHeader ul {
    15. 
                    	
  15.   font-size: 0;
    16. 
                    	
  16.   padding: 0 20px;
    17. 
                    	
  17.   margin-top: 40px
    18. 
                    	
  18. }
    19. 
                    	
  19. #post #entryHeader li {
    20. 
                    	
  20.   font-size: 1.4rem;
    21. 
                    	
  21.   vertical-align: middle;
    22. 
                    	
  22.   position: relative;
    23. 
                    	
  23.   display: inline-block
    24. 
                    	
  24. }
    25. 
                    	
  25. #post #entryHeader li:first-child::after {
    26. 
                    	
  26.   content: "/";
    27. 
                    	
  27.   font-size: 1.4rem;
    28. 
                    	
  28.   margin: 0 10px
    29. 
                    	
  29. }
    30. 
                    	
  30. #post #entryHeader h1 {
    31. 
                    	
  31.   font-size: 3.2rem;
    32. 
                    	
  32.   font-weight: 300;
    33. 
                    	
  33.   padding: 0 20px;
    34. 
                    	
  34.   margin-top: 20px
    35. 
                    	
  35. }
    36. 
                    	
  36. #post .entryContent {
    37. 
                    	
  37.   font-size: 1.6rem;
    38. 
                    	
  38.   padding: 0 20px;
    39. 
                    	
  39.   margin-top: 40px
    40. 
                    	
  40. }
    41. 
                    	
  41. #post .entryContent p + p { margin-top: 20px }
    42. 
                    	
  42. #post .entryContent h2 {
    43. 
                    	
  43.   color: #fff;
    44. 
                    	
  44.   font-size: 2.4rem;
    45. 
                    	
  45.   font-weight: 300;
    46. 
                    	
  46.   padding: 10px;
    47. 
                    	
  47.   margin: 40px 0;
    48. 
                    	
  48.   background: #ff657c;
    49. 
                    	
  49.   position: relative
    50. 
                    	
  50. }
    51. 
                    	
  51. #post .entryContent h2::before {
    52. 
                    	
  52.   content: '';
    53. 
                    	
  53.   width: 98%;
    54. 
                    	
  54.   height: 1px;
    55. 
                    	
  55.   background-image: linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,255,255,.7) 60%,transparent 60%,transparent 100%);
    56. 
                    	
  56.   background-size: 10px 3px;
    57. 
                    	
  57.   position: absolute;
    58. 
                    	
  58.   top: 5px;
    59. 
                    	
  59.   left: 1%;
    60. 
                    	
  60.   z-index: 999
    61. 
                    	
  61. }
    62. 
                    	
  62. #post .entryContent h2::after {
    63. 
                    	
  63.   content: '';
    64. 
                    	
  64.   width: 98%;
    65. 
                    	
  65.   height: 1px;
    66. 
                    	
  66.   background-image: linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,255,255,.7) 60%,transparent 60%,transparent 100%);
    67. 
                    	
  67.   background-size: 10px 3px;
    68. 
                    	
  68.   position: absolute;
    69. 
                    	
  69.   bottom: 5px;
    70. 
                    	
  70.   left: 1%;
    71. 
                    	
  71.   z-index: 999
    72. 
                    	
  72. }
    73. 
                    	
  73. #post .entryContent h3 {
    74. 
                    	
  74.   font-size: 2rem;
    75. 
                    	
  75.   font-weight: 300;
    76. 
                    	
  76.   padding: 10px 0 10px 20px;
    77. 
                    	
  77.   margin: 40px 0;
    78. 
                    	
  78.   border-left: 5px solid #ff657c
    79. 
                    	
  79. }
    80. 
                    	
  80. #post .entryContent img { margin: 40px 0 }
    81. 
                    	
  81. #post .entryContent h2 + img,
    82. 
                    	
  82. #post .entryContent h2 + a img,
    83. 
                    	
  83. #post .entryContent h3 + img,
    84. 
                    	
  84. #post .entryContent h3 + a img {
    85. 
                    	
  85.   margin: 0 0 40px
    86. 
                    	
  86. }
    87. 
                    	
  87. #post .entryContent a {
    88. 
                    	
  88.   color: #ff657c;
    89. 
                    	
  89.   text-decoration: underline
    90. 
                    	
  90. }
    91. 
                    	
  91. @media screen and (max-width: 768px) {
    92. 
                    	
  92.   #post #entryHeader h1 { font-size: 2.4rem }
    93. 
                    	
  93.   #post .entryContent h2 { font-size: 1.7rem }
    94. 
                    	
  94. }
    95.

ココでは記事内の見出しデザインなどをご自身で設定してもらえたらと思います。今は見出しの「h2」タグと「h3」タグしかデザインを施していませんので、「h4」以降のタグも使われるならデザインを追加してください。

あらかじめ調整しているのは文字の「サイズ」「カラー」「太さ」、そして「余白」などです。

文字の装飾に関しては何も設定していないクリーンな状態です。なので「太文字」や「アンダーライン」や「マーカー」などが必要であれば、どんどんデザインを追加してみてください。

サンプルブログのファイル

上記のようにファイルは用意できていますでしょうか。残すところPHPファイルはあとひとつとなりました。次に作成するサイトマップページで使用する「page-sitemap.php」が最後のひとつです。

竹馬

次からは固定ページを作成していきます。サンプルブログでは「サイトマップ」と「お問い合わせ」の2ページの作成方法を違うアプローチでご紹介します。

page.phpと404.phpの制作とスクリプト サイトマップページの制作

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記