読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 | フェリカテクニカルアカデミーWebサイト制作科サポートブログ

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

WordPress基礎

ヘッダーを表示する

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

<div class="container">


《プレビュー》

f:id:webmaster-web:20160710011004p: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:webmaster-web:20160710011223p: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 -->

フッターを表示する

コピーライトを表示してフッターとしてマークアップする
<footer>
<div class="container">
<small>Copyright &copy; <?php bloginfo( 'name' ); ?></small>
</div>
</footer>


《プレビュー》

f:id:webmaster-web:20160710011608p:plain

サイトタイトル

  • サイト名を表示する
各ページのサイト名をタイトルにする
<title><?php bloginfo( 'name' ); ?></title>
ページのタイトルに記事のタイトルを入れる
<title><?php bloginfo( 'name' ); ?><?php wp_title(); ?></title>

ヘッダーとフッターのデザインを指定する

/* ヘッダー */
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:webmaster-web:20160710013527p:plain

フッターを表示する

/* フッター */
footer {
  margin-top: 40px;
  padding-top: 14px;
  padding-bottom: 14px;
  background-color: #4A5F7E;
  color: #FFF;
}


《プレビュー》

f:id:webmaster-web:20160710022030p: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>


《プレビュー》

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

body {
  margin: 0;
  font-size: 16px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  color: #333;
}


《プレビュー》

f:id:webmaster-web:20160710023420p:plain