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

header.phpとfooter.phpの制作

header.phpとfooter.phpの制作

続いては「header.php」と「footer.php」を作成していきます。部分毎にファイルを作っておけば、修正する際にひとつのファイルを変更するだけで済むというメリットがあります。

サンプルブログでは「header.php」と「header-top.php」の2種類のヘッダーを用意しています。内容はほぼほぼ同じなんですが、トップページのみサイト名を「h1」タグで記述しています。

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

目次 [閉じる]

header.phpを作成する

まずはトップページ以外で使う「header.php」をご紹介しますのでコピペしておいてください。「header.php」ではサイト名の記述を「p」タグでおこなっています。

header.php

                	
    
                    	
  1. <!DOCTYPE html>
    2. 
                    	
  2. <html>
    3. 
                    	
  3. <head>
    4. 
                    	
  4. <meta charset="UTF-8">
    5. 
                    	
  5. <title><?php wp_title(''); ?></title>
    6. 
                    	
  6. <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    7. 
                    	
  7. <link rel="apple-touch-icon-precomposed" href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon.png">
    8. 
                    	
  8. <link rel="icon" href="<?php bloginfo('template_url'); ?>/favicon.ico">
    9. 
                    	
  9. <link rel="preconnect" href="https://fonts.googleapis.com">
    10. 
                    	
  10. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    11. 
                    	
  11. <link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400;500&display=swap" rel="stylesheet">
    12. 
                    	
  12. <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css">
    13. 
                    	
  13. <?php wp_head(); ?>
    14. 
                    	
  14. </head>
    15. 
                    	
  15. <body>
    16. 
                    	
  16.   <header id="header">
    17. 
                    	
  17.     <div class="inner">
    18. 
                    	
  18.       <div class="logo">
    19. 
                    	
  19.         <a href="<?php echo esc_url(get_home_url()); ?>">
    20. 
                    	
  20.           <p>サンプルブログ</p>
    21. 
                    	
  21.         </a>
    22. 
                    	
  22.       </div>
    23. 
                    	
  23.       <div class="menuBtn">
    24. 
                    	
  24.         <a href="javascript:void(0)" class="menuTrigger">
    25. 
                    	
  25.           <div class="menuIcon">
    26. 
                     	
  26.             <span></span>
    27. 
                    	
  27.             <span></span>
    28. 
                     	
  28.             <span></span>
    29. 
                     	
  29.           </div>
    30. 
                    	
  30.         </a>
    31. 
                    	
  31.       </div>
    32. 
                    	
  32.     </div>
    33. 
                    	
  33.   </header>
    34. 
                     	
  34.   <div class="drawerNav">
    35. 
                     	
  35.     <nav>
    36. 
                     	
  36.       <ul>
    37. 
                     	
  37.         <li><a href="<?php echo esc_url(get_home_url()); ?>">ホーム</a></li>
    38. 
                    	
  38.         <?php
    39. 
                     	
  39.           $args = array(
    40. 
                    	
  40.             'parent' => 0,
    41. 
                    	
  41.             'orderby' => 'term_order',
    42. 
                     	
  42.             'order' => 'ASC'
    43. 
                     	
  43.           );
    44. 
                     	
  44.           $categories = get_categories($args);
    45. 
                      	
  45.         ?>
    46. 
                      	
  46.         <?php foreach($categories as $category) : ?>
    47. 
                      	
  47.         <li><a href="<?php echo get_category_link($category->term_id); ?>"><?php echo $category->name; ?></a></li>
    48. 
                      	
  48.         <?php endforeach; ?>
    49. 
                      	
  49.         <li><a href="<?php echo esc_url(get_home_url()); ?>/sitemap/">サイトマップ</a></li>
    50. 
                      	
  50.         <li><a href="<?php echo esc_url(get_home_url()); ?>/contact/">お問い合わせ</a></li>
    51. 
                     	
  51.       </ul>
    52. 
                     	
  52.     </nav>
    53. 
                     	
  53.   </div>
    54.

ココでは「head」タグ内の記述を確認しておきます。「body」タグ内の記述に関しては次項の「header-top.phpを作成する」で紹介させて頂きます。

                	
    
                    	
  1. <meta charset="UTF-8">
    2. 
                    	
  2. <title><?php wp_title(''); ?></title>
    3. 
                    	
  3. <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    4.

「title」タグでページの「タイトル」を設定しています。「wp_title(”)」と記述する事によって、管理画面で設定している各ページの「タイトル」を出力する事ができます。

「meta」タグでは文字コード（charset=”UTF-8″）と「viewport」を設定しています。「viewport」を記述する事によってスマホで見た時にはスマホ用のデザインが表示されます。

サンプルブログは「レスポンシブ」で制作していますので、パソコンで見た時とスマホで見た時のデザインが違います。ただ「viewport」の記述がないとデザインが切り替わらないので注意してください。

                	
    
                    	
  1. <link rel="apple-touch-icon-precomposed" href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon.png">
    2. 
                    	
  2. <link rel="icon" href="<?php bloginfo('template_url'); ?>/favicon.ico">
    3.

上記では「アップルタッチアイコン」と「ファビコン」の読み込み設定をおこなっています。

「アップルタッチアイコン」と「ファビコン」の作成方法は省略しますので、気になる方は「アップルタッチアイコンとファビコンを指定する」をご覧ください。

                	
    
                    	
  1. <link rel="preconnect" href="https://fonts.googleapis.com">
    2. 
                    	
  2. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    3. 
                    	
  3. <link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400;500&display=swap" rel="stylesheet">
    4.

こちらはGoogleフォントの「Kiwi Maru」を読み込んでいます。ちょっとクセのあるフォンとなのでお好みで変更してください。

こちらも見てください

                	
    
                    	
  1. <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css">
    2.

そして「style.css」の読み込みです。「bloginfo(‘template_url’);」の記述は色んなところで使っていますので覚えておいてください。

「bloginfo(‘template_url’);」と記述するとテーマフォルダのURLが指定できます。サンプルブログなら「https://chepirare.com/sample/02/wp-content/themes/Sample/」となります。

                	
    
                    	
  1. <?php wp_head(); ?>
    2.

「header.php」には「wp_head();」を記述しておかなければいけません。記述場所は「head」タグの閉じタグの直前に記述するようにします。

竹馬

「head」タグ内で重要なのが「wp_head();」の記述です。「header.php」には忘れずに記述しておきましょう。この記述がないとサイトに不具合が生じてしまう事があります。

header-top.phpを作成する

続いて「header-top.php」を見ていきますが、「header.php」と違う箇所はひとつだけです。「header-top.php」ではサイト名の記述を「h1」タグでおこなっています。

header-top.php

                	
    
                    	
  1. <!DOCTYPE html>
    2. 
                    	
  2. <html>
    3. 
                    	
  3. <head>
    4. 
                    	
  4. <meta charset="UTF-8">
    5. 
                    	
  5. <title><?php wp_title(''); ?></title>
    6. 
                    	
  6. <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    7. 
                    	
  7. <link rel="apple-touch-icon-precomposed" href="<?php bloginfo('template_url'); ?>/img/common/apple-touch-icon.png">
    8. 
                    	
  8. <link rel="icon" href="<?php bloginfo('template_url'); ?>/favicon.ico">
    9. 
                    	
  9. <link rel="preconnect" href="https://fonts.googleapis.com">
    10. 
                    	
  10. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    11. 
                    	
  11. <link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400;500&display=swap" rel="stylesheet">
    12. 
                    	
  12. <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css">
    13. 
                    	
  13. <?php wp_head(); ?>
    14. 
                    	
  14. </head>
    15. 
                    	
  15. <body>
    16. 
                    	
  16.   <header id="header">
    17. 
                    	
  17.     <div class="inner">
    18. 
                    	
  18.       <div class="logo">
    19. 
                    	
  19.         <a href="<?php echo esc_url(get_home_url()); ?>">
    20. 
                    	
  20.           <h1>サンプルブログ</h1>
    21. 
                    	
  21.         </a>
    22. 
                    	
  22.       </div>
    23. 
                    	
  23.       <div class="menuBtn">
    24. 
                    	
  24.         <a href="javascript:void(0)" class="menuTrigger">
    25. 
                    	
  25.           <div class="menuIcon">
    26. 
                     	
  26.             <span></span>
    27. 
                    	
  27.             <span></span>
    28. 
                     	
  28.             <span></span>
    29. 
                     	
  29.           </div>
    30. 
                    	
  30.         </a>
    31. 
                    	
  31.       </div>
    32. 
                    	
  32.     </div>
    33. 
                    	
  33.   </header>
    34. 
                     	
  34.   <div class="drawerNav">
    35. 
                     	
  35.     <nav>
    36. 
                     	
  36.       <ul>
    37. 
                     	
  37.         <li><a href="<?php echo esc_url(get_home_url()); ?>">ホーム</a></li>
    38. 
                    	
  38.         <?php
    39. 
                     	
  39.           $args = array(
    40. 
                    	
  40.             'parent' => 0,
    41. 
                    	
  41.             'orderby' => 'term_order',
    42. 
                     	
  42.             'order' => 'ASC'
    43. 
                     	
  43.           );
    44. 
                     	
  44.           $categories = get_categories($args);
    45. 
                      	
  45.         ?>
    46. 
                      	
  46.         <?php foreach($categories as $category) : ?>
    47. 
                      	
  47.         <li><a href="<?php echo get_category_link($category->term_id); ?>"><?php echo $category->name; ?></a></li>
    48. 
                      	
  48.         <?php endforeach; ?>
    49. 
                      	
  49.         <li><a href="<?php echo esc_url(get_home_url()); ?>/sitemap/">サイトマップ</a></li>
    50. 
                      	
  50.         <li><a href="<?php echo esc_url(get_home_url()); ?>/contact/">お問い合わせ</a></li>
    51. 
                     	
  51.       </ul>
    52. 
                     	
  52.     </nav>
    53. 
                     	
  53.   </div>
    54.

サイト名を「h1」タグと「p」タグで使い分ける意図は、固定ページや記事ページのタイトルに「h1」タグを使いたいからです。基本的に「h1」タグは1ページにひとつしか設定する事ができません。

これはSEO対策のひとつで、検索エンジンにより強いメッセージを伝えるためにおこなっています。「header.php」と「header-top.php」で「サンプルブログ」と記述している個所はご自身のサイト名に変更しておいてください。

それでは「body」タグ内の記述を見ていきます。「header」タグの中にはサイト名と三本線のメニューボタンを配置しています。そして三本線をクリックすると「drawerNav」内のメニューが表示される仕様です。

                	
    
                     	
  1. <?php echo esc_url(get_home_url()); ?>
    2.

このコードを記述するとトップページのURLを記述する事ができます。トップページへリンクを貼るなら「href」属性の値を「<?php echo esc_url(get_home_url()); ?>」とすればOKです。

そしてお問い合わせページへリンクを貼るなら「<?php echo esc_url(get_home_url()); ?>/contact/」と記述します。後にお問い合わせの固定ページを作成しますので、その際にパーマリンクを「contact」に設定していきます。

                	
    
                    	
  1. <?php
    2. 
                     	
  2.   $args = array(
    3. 
                    	
  3.     'parent' => 0,
    4. 
                    	
  4.     'orderby' => 'term_order',
    5. 
                     	
  5.     'order' => 'ASC'
    6. 
                     	
  6.   );
    7. 
                     	
  7.   $categories = get_categories($args);
    8. 
                      	
  8. ?>
    9. 
                      	
  9. <?php foreach($categories as $category) : ?>
    10. 
                      	
  10. <li><a href="<?php echo get_category_link($category->term_id); ?>"><?php echo $category->name; ?></a></li>
    11. 
                      	
  11. <?php endforeach; ?>
    12.

こちらは管理画面でカテゴリーを作成すれば自動的にカテゴリーページへのリンクが生成される設定です。サンプルブログはできる限り管理画面の操作だけでブログが運営できるようにこの形にしました。

ザックリ説明すると、「get_categories」でカテゴリーを情報を取得し、「get_category_link」でカテゴリーページのURL、「$category->name」でカテゴリー名を出力しています。

ヘッダーデザインをstyle.cssに追加

「header.php」を作りましたので、ヘッダー部分のデザインも「style.css」に追加しておきましょう。前回、記述したコードの下に追加していってもらえればOKです。

style.css

                	
    
                    	
  1. ～テーマ情報省略～
    2. 
                    	
  2. ～共通デザイン省略～
    3. 
                    	
  3. ～main・パンくず・mainContents省略～
    4. 
                    	
  4. /* ------ header ------ */
    5. 
                    	
  5. #header {
    6. 
                    	
  6.   width: 100%;
    7. 
                    	
  7.   height: 80px;
    8. 
                    	
  8.   background: #fff;
    9. 
                    	
  9.   position: fixed;
    10. 
                    	
  10.   top: 0;
    11. 
                    	
  11.   transition: all 0.3s;
    12. 
                    	
  12.   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    13. 
                    	
  13.   z-index: 100
    14. 
                    	
  14. }
    15. 
                    	
  15. body.change #header { height: 60px }
    16. 
                    	
  16. #header .inner {
    17. 
                    	
  17.   width: 100%;
    18. 
                    	
  18.   font-size: 0;
    19. 
                    	
  19.   margin: 0 auto;
    20. 
                    	
  20.   position: relative
    21. 
                    	
  21. }
    22. 
                    	
  22. #header .logo {
    23. 
                    	
  23.   vertical-align: middle;
    24. 
                    	
  24.   padding: 0 30px 0 20px;
    25. 
                    	
  25.   position: relative;
    26. 
                    	
  26.   display: inline-block;
    27. 
                    	
  27.   z-index: 100
    28. 
                    	
  28. }
    29. 
                    	
  29. #header .logo a { display: block }
    30. 
                    	
  30. #header .logo a:hover { color: #000 }
    31. 
                    	
  31. #header .logo h1,
    32. 
                    	
  32. #header .logo p {
    33. 
                    	
  33.   font-size: 2.4rem;
    34. 
                    	
  34.   font-weight: 500;
    35. 
                    	
  35.   line-height: 80px;
    36. 
                    	
  36.   transition: all 0.3s;
    37. 
                    	
  37.   position: relative;
    38. 
                    	
  38.   display: inline-block
    39. 
                    	
  39. }
    40. 
                    	
  40. body.change #header .logo h1,
    41. 
                    	
  41. body.change #header .logo p {
    42. 
                    	
  42.   line-height: 60px
    43. 
                    	
  43. }
    44. 
                    	
  44. 
                    	
  45. /* menu trigger */
    46. 
                    	
  46. .menuBtn {
    47. 
                    	
  47.   width: 60px;
    48. 
                    	
  48.   height: 60px;
    49. 
                    	
  49.   vertical-align: middle;
    50. 
                    	
  50.   text-align: center;
    51. 
                    	
  51.   position: absolute;
    52. 
                    	
  52.   top: 0;
    53. 
                    	
  53.   bottom: 0;
    54. 
                    	
  54.   right: 0;
    55. 
                    	
  55.   z-index: 100
    56. 
                    	
  56. }
    57. 
                    	
  57. .menuTrigger,
    58. 
                    	
  58. .menuTrigger span {
    59. 
                    	
  59.   transition: all .4s;
    60. 
                    	
  60.   display: inline-block
    61. 
                    	
  61. }
    62. 
                    	
  62. .menuTrigger .menuIcon {
    63. 
                    	
  63.   width: 25px;
    64. 
                    	
  64.   height: 20px;
    65. 
                    	
  65.   position: relative;
    66. 
                    	
  66.   top: 30px;
    67. 
                    	
  67.   transition: 0.3s;
    68. 
                    	
  68.   display: inline-block
    69. 
                    	
  69. }
    70. 
                    	
  70. body.change .menuTrigger .menuIcon { top: 20px }
    71. 
                    	
  71. .menuTrigger span {
    72. 
                    	
  72.   width: 100%;
    73. 
                    	
  73.   height: 2px;
    74. 
                    	
  74.   background: #000;
    75. 
                    	
  75.   position: absolute;
    76. 
                    	
  76.   left: 0
    77. 
                    	
  77. }
    78. 
                    	
  78. .menuTrigger span:nth-of-type(1) { top: 0 }
    79. 
                    	
  79. .menuTrigger span:nth-of-type(2) { top: 9px }
    80. 
                    	
  80. .menuTrigger span:nth-of-type(3) { bottom: 0 }
    81. 
                    	
  81. .menuTrigger span:nth-of-type(1) { animation: menu-bar01 .75s forwards }
    82. 
                    	
  82. .menuTrigger.active span:nth-of-type(1) { transform: translateY(9px) rotate(-45deg) }
    83. 
                    	
  83. .menuTrigger.active span:nth-of-type(2) {
    84. 
                    	
  84.   left: 50%;
    85. 
                    	
  85.   animation: active-menu-bar02 .8s forwards;
    86. 
                    	
  86.   opacity: 0
    87. 
                    	
  87. }
    88. 
                    	
  88. @-webkit-keyframes active-menu-bar02 {
    89. 
                    	
  89.   100% { height: 0 }
    90. 
                    	
  90. }
    91. 
                    	
  91. @keyframes active-menu-bar02 {
    92. 
                    	
  92.   100% { height: 0 }
    93. 
                    	
  93. }
    94. 
                    	
  94. .menuTrigger.active span:nth-of-type(3) { transform: translateY(-9px) rotate(45deg) }
    95. 
                    	
  95. @media screen and (max-width: 800px) {
    96. 
                    	
  96.   #header { height: 60px }
    97. 
                    	
  97.   #header .inner { padding: 0 0 0 2% }
    98. 
                    	
  98.   #header .logo { padding: 0 }
    99. 
                    	
  99.   #header .logo h1,
    100. 
                    	
  100.   #header .logo p {
    101. 
                    	
  101.     font-size: 2rem;
    102. 
                    	
  102.     line-height: 60px
    103. 
                    	
  103.   }
    104. 
                    	
  104. 
                    	
  105.   /* menu trigger */
    106. 
                    	
  106.   .menuTrigger .menuIcon { top: 20px }
    107. 
                    	
  107. }
    108. 
                    	
  108. 
                    	
  109. /* drawer nav */
    110. 
                    	
  110. .drawerNav {
    111. 
                    	
  111.   width: 100%;
    112. 
                    	
  112.   height: 100%;
    113. 
                    	
  113.   padding-top: 80px;
    114. 
                    	
  114.   margin: 0 auto;
    115. 
                    	
  115.   position: fixed;
    116. 
                    	
  116.   top: 0;
    117. 
                    	
  117.   transition: all 0.3s ease-in-out;
    118. 
                    	
  118.   pointer-events: none;
    119. 
                    	
  119.   overflow-y: scroll;
    120. 
                    	
  120.   opacity: 0
    121. 
                    	
  121. }
    122. 
                    	
  122. body.change .drawerNav { padding-top: 60px }
    123. 
                    	
  123. .drawerNav.open {
    124. 
                    	
  124.   min-height: 100vh;
    125. 
                    	
  125.   padding-bottom: 100px;
    126. 
                    	
  126.   background: #fff;
    127. 
                    	
  127.   pointer-events: auto;
    128. 
                    	
  128.   opacity: 1;
    129. 
                    	
  129.   z-index: 99
    130. 
                    	
  130. }
    131. 
                    	
  131. .drawerNav ul { padding-bottom: 50px }
    132. 
                    	
  132. .drawerNav li {
    133. 
                    	
  133.   font-size: 1.6rem;
    134. 
                    	
  134.   border-bottom: 1px solid #c1c1c1;
    135. 
                    	
  135.   position: relative;
    136. 
                    	
  136.   overflow: hidden
    137. 
                    	
  137. }
    138. 
                    	
  138. .drawerNav li a {
    139. 
                    	
  139.   line-height: 60px;
    140. 
                    	
  140.   padding: 0 4%;
    141. 
                    	
  141.   position: relative;
    142. 
                    	
  142.   display: block;
    143. 
                    	
  143.   overflow: hidden;
    144. 
                    	
  144.   z-index: 2
    145. 
                    	
  145. }
    146. 
                    	
  146. @media screen and (max-width: 800px) {
    147. 
                    	
  147.   .drawerNav { padding-top: 60px }
    148. 
                    	
  148. }
    149.

サンプルブログのヘッダーは上部に固定しています。さらに画面を下へスクロールするとヘッダーの高さが縮むようになっています。高さが縮む動きは要らなければ設定を外してお使いください。

                	
    
                    	
  1. #header { height: 80px }
    2. 
                    	
  2. body.change #header { height: 60px }
    3.

「#header」の高さだけ見てもらうとわかりやすいと思います。元の高さは「80px」ですが、スクロールすると「60px」に縮みます。「body.change」が付いている要素は高さが縮んだ時に変化する要素です。

ココの仕組みは、まずjQueryの設定で80px以上スクロールすると「body」タグに「change」というクラスを追加します。そして、「change」が付与されている場合のデザインとして高さを縮めています。

竹馬

今回のスクロールでクラスを付与、三本線メニューの動きなどは「main.jsを作成する」でまとめて紹介させて頂きます。まずはPFPファイルをひと通り揃えていきますね。

footer.phpを作成する

次に「footer.php」を作成していきますので、下記のコードをコピペしておいてください。「header.php」と同じく、今度は「wp_footer()」の記述が必要になります。

footer.php

                	
    
                    	
  1.   <footer>
    2. 
                    	
  2.     <div class="inner">
    3. 
                    	
  3.       <nav>
    4. 
                    	
  4.         <ul>
    5. 
                    	
  5.           <li><a href="<?php echo site_url(); ?>/sitemap/">サイトマップ</a></li>
    6. 
                    	
  6.           <li><a href="<?php echo site_url(); ?>/contact/">お問い合わせ</a></li>
    7. 
                    	
  7.         </ul>
    8. 
                    	
  8.       </nav>
    9. 
                    	
  9.     </div>
    10. 
                    	
  10.     <div class="copyright">
    11. 
                    	
  11.       <small>&copy; <span>2022</span> サンプルブログ.</small>
    12. 
                    	
  12.     </div>
    13. 
                    	
  13.   </footer>
    14. 
                    	
  14. <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.min.js"></script>
    15. 
                    	
  15. <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/main.js"></script>
    16. 
                    	
  16. <?php wp_footer(); ?>
    17. 
                    	
  17. </body>
    18. 
                    	
  18. </html>
    19.

ココは特に難しい記述もなく、至ってシンプルな形の「footer.php」です。ページの一番下に記述しているコピーライトはご自身の情報に書き換えてください。

サンプルブログでは「© 2022 サンプルブログ.」という形です。コピーライトマークは特殊文字で記述していますので、「&copy;」と記述すると「©」が表示されます。

                	
    
                    	
  1. <?php wp_footer(); ?>
    2.

そして「footer.php」には「wp_footer();」を記述しておきます。記述場所は「body」タグの閉じタグの直前です。こちらも記述がないと不具合の原因になりますので注意してください。

フッターデザインをstyle.cssに追加

最後にフッター部分のデザインも「style.css」に追加しておきましょう。フッターはCSSも難しくないと思いますので、サラッと各プロパティを確認してみてください。

style.css

                	
    
                    	
  1. ～テーマ情報省略～
    2. 
                    	
  2. ～共通デザイン省略～
    3. 
                    	
  3. ～main・パンくず・mainContents省略～
    4. 
                    	
  4. ～ヘッダーデザイン省略～
    5. 
                    	
  5. /* ------ footer ------ */
    6. 
                    	
  6. footer {
    7. 
                    	
  7.   width: 100%;
    8. 
                    	
  8.   background: #fff
    9. 
                    	
  9. }
    10. 
                    	
  10. footer .inner {
    11. 
                    	
  11.   width: 1180px;
    12. 
                    	
  12.   padding-top: 40px;
    13. 
                    	
  13.   margin: 0 auto
    14. 
                    	
  14. }
    15. 
                    	
  15. footer nav {
    16. 
                    	
  16.   font-size: 0;
    17. 
                    	
  17.   padding: 0 10px
    18. 
                    	
  18. }
    19. 
                    	
  19. footer nav ul {
    20. 
                    	
  20.   font-size: 0;
    21. 
                    	
  21.   text-align: center
    22. 
                    	
  22. }
    23. 
                    	
  23. footer nav li {
    24. 
                    	
  24.   font-size: 1.5rem;
    25. 
                    	
  25.   vertical-align: top;
    26. 
                    	
  26.   padding: 0 20px;
    27. 
                    	
  27.   position: relative;
    28. 
                    	
  28.   display: inline-block
    29. 
                    	
  29. }
    30. 
                    	
  30. footer nav li + li::before {
    31. 
                    	
  31.   content: "|";
    32. 
                    	
  32.   color: #c1c1c1;
    33. 
                    	
  33.   position: absolute;
    34. 
                    	
  34.   left: 0
    35. 
                    	
  35. }
    36. 
                    	
  36. footer nav a:hover {
    37. 
                    	
  37.   color: #000;
    38. 
                    	
  38.   opacity: 0.7
    39. 
                    	
  39. }
    40. 
                    	
  40. footer .copyright {
    41. 
                    	
  41.   width: 1180px;
    42. 
                    	
  42.   text-align: center;
    43. 
                    	
  43.   argin: 40px auto 0
    44. 
                    	
  44. }
    45. 
                    	
  45. footer .copyright small {
    46. 
                    	
  46.   font-size: 1.3rem;
    47. 
                    	
  47.   line-height: 60px
    48. 
                    	
  48. }
    49. 
                    	
  49. @media screen and (max-width: 900px) {
    50. 
                    	
  50.   footer .inner { width: 100% }
    51. 
                    	
  51.   footer nav li {
    52. 
                    	
  52.     font-size: 1.3rem;
    53. 
                    	
  53.     padding: 10px 15px
    54. 
                    	
  54.   }
    55. 
                    	
  55.   footer nav li + li::before { content: "" }
    56. 
                    	
  56.   footer .copyright {
    57. 
                    	
  57.     width: 100%;
    58. 
                    	
  58.     margin: 20px auto 0
    59. 
                    	
  59.   }
    60. 
                    	
  60. }
    61.

それではこれで「header.php」と「footer.php」が完成しましたので、今まで作成したファイルを確認しておきます。省略しましたけど「アップルタッチアイコン」と「ファビコン」も加えておきますね。

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

上記のようにファイルは揃っていますでしょうか。個人的に「アップルタッチアイコン」と「ファビコン」も設定しておく事をオススメしますので、追い追いでも良いので準備していってください。

竹馬

次は管理画面も使ってサイドバーを作成していきます。そしてワードプレスなら簡単にサイト内検索も設置する事ができますので、検索ボックスの設定も見ていきましょう。

テーマに必要なファイル sidebar.phpとsearch.phpの制作

よく読まれている記事

おすすめの記事

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

チェピレア日記