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

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

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

ヘッダーを表示する

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

<div class="container">


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

<div class="container">


ヘッダーとしてマークアップする
<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>


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

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

Webフォントを利用できるようにする
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Acme">
サイト名をWebフォントで表示する
/* ヘッダー */
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-family: 'Acme', sans-serif;
  font-size: 20px;
}
.siteinfo p {
  float: right;
  margin: 0;
  margin-top: 5px;
  font-size: 12px;
}


フッターを表示する

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


ヘッダーとフッターの中身に記事を揃えて表示する
<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;
}