求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

ヘッダーとフッターを表示 - カスタムテーマ

ヘッダーとフッターを表示

f:id:web-0220:20190407183618g:plain

一般設定

f:id:web-0220:20190407205202g:plain

ヘッダーを表示

サイト名を表示する
<body <?php body_class(); ?>>
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>

<div class="container">

《プレビュー》

f:id:web-0220:20190407205719g:plain

サイトの説明を表示する
<body <?php body_class(); ?>>
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>

<div class="container">

《プレビュー》

f:id:web-0220:20190407205514g:plain

ヘッダーとしてマークアップする
<body <?php body_class(); ?>>

<header>
<div class="siteinfo">

<h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>

</div><!-- /.siteinfo -->
</header><!-- /header -->
ヘッダーのデザインを指定する
/* ヘッダー */
header {
  margin-bottom: 40px;
  background-color: #4A5F7E;
  color: #FFF;
}
header a {
  color: #FFF;
  text-decoration: non;
}
.siteinfo {
  overflow: hidden;
  padding-top: 14px;
  padding-bottom: 14px;
}
.siteinfo h1 {
  float: left;
  margin: 0;
  font-size: 20px;
}
.siteinfo p {
  float: right;
  margin: 0;
  margin-top: 5px;
  font-size: 12px;
}

《プレビュー》

f:id:web-0220:20190408085020g:plain

フッターを表示する

<footer>
<div class="container">
<small>Copyright &copy; <?php bloginfo( 'name' ); ?></small>
</div>
</footer>

《プレビュー》

f:id:web-0220:20190407213531g:plain

フッターのデザインを指定する
/* フッター */
footer {
  margin-top: 40px;
  padding-top: 14px;
  padding-bottom: 14px;
  background-color: #4A5F7E;
  color: #FFF;
}

《プレビュー》

f:id:web-0220:20190408085044g:plain

ヘッダーとフッターの中身に記事を揃えて表示する
<header>
<div class="siteinfo">

<div class="container">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</div><!-- /.container -->

・・・・・・・・・・・・・・ 

<footer>
<div class="container">
<small>Copyright &copy; <?php bloginfo( 'name' ); ?></small>
</div><!-- /.container -->
</footer>

《プレビュー》

f:id:web-0220:20190408085202g:plain

ヘッダーとフッターを画面の横幅いっぱいに表示する

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family:
    -apple-system, BlinkMacSystemFont,
    "Noto Sans JP",
    "Helvetica Neue", YuGothic,
    "Yu Gothic", Verdana, Meiryo,
    sans-serif;
  color: #333;
}

《プレビュー》

f:id:web-0220:20190408085916g:plain