ヘッダー部分にタイトルを入れる

ヘッダー部分にタイトルを入れる

画面上部にサイトタイトルを入れます。

編集するのは『header.php』と『design.css』です。

制作を進めていくWebサイトはこちら

 

header.php

下の図の緑色の部分がヘッダーです。タイトルと一言説明を入れます

画像が使われることが多いですが、ひとまず文字で表現します。

タイトルをクリックすると、TOPページに戻るようにします。

  <header.php>

<!-- class:header -->
<div class='header'>
<H1 class='site-title'>
 <A class='site-title' href='http://toeickuhara.com/create/'>0から作るWebサイト</A>
</H1>
<p class='site-phrase'>初心者が手探りで制作していくページです。</p>
</div>

タイトルを『H1』タグと『A』タグで括っています。

classに『site-title』という名前を付けたので、『design.css』で細かな調整が出来るようになりました。

同様に一言説明を『p』タグで括りました。

こちらは『site-phrase』という名前を付けました。



design.cssでタイトルの配置

レイアウト設定の際に作成したdesign.cssの後ろに追記していきます。

<design.css>

/* タイトルのデザイン */
H1.site-title{
 position:relative;
 display:inline-block;
 padding: 0 50px;
 margin-bottom: 12px;
}
H1.site-title:before, H1.site-title:after{
 position:absolute;
 content: "";
 top: 45%;
 display:inline-block;
 width:40px;
 height:2px;
 background-color:black;
}
H1.site-title:before{
 left:0;
}
H1.site-title:after{
 right:0;
}
A.site-title{
 color:black;
 text-decoration:none;
}

/* サイトフレーズのデザイン */
.site-phrase{
 color:#333;
 margin-top:0;
}

いきなりたくさん出てきてびっくりするかもしれませんので、簡単に説明します。

Stylesheetでデザインを決める際、先ほど付けた名前を指定します。
その際、すべてのタグに適用するのか、特定のタグに適用するのかを選べます。

すべてのタグのclass=’sample’に適用する場合

.sample{
  color:red;
}

Aタグのみのclass=’sample’に適用する場合

A.sample{
  color:red;
}

ここでは『H1』タグと『site-title』が同時に使われている場合の記述、『A』と『site-title』が同時に使われている場合の記述、あとは『site-phrase』が使われている場合の記述をしています。

H1.site-title{
  position:relative;
  display:inline-block;
  padding: 0 50px;
  margin-bottom: 12px;
}
H1.site-title:before, H1.site-title:after{
  position:absolute;
  content: "";
  top: 45%;
  display:inline-block;
  width:40px;
  height:2px;
  background-color:black;
}
H1.site-title:before{
  left:0;
}
H1.site-title:after{
  right:0;
}

この記述は、『ー タイトル ー』と表示するための記述です。(参考サイト:https://saruwakakun.com/html-css/reference/h-design

before,afterでタイトルの前後に線を表示するための記述をしています。

content=””;が無いと線が表示できなかったので、表示させたい画像等ありませんが記述しました。

display:inline-block;という指定は、横並びに配置するという意味です。

top:45%は相対的な上からの位置を指定して、線が真ん中に見えるようにしました。

margin-bottomの記述は、『H1』タグを使用した後の行間が大きいのが気になるので、幅を指定しました。

A.site-title{
  color:black;
  text-decoration:none;
}

これは、タイトルのリンクの色を黒に指定し、リンクの下線やマウスオーバー時の色の変化、アクセス済リンクの色の変化などを無効にする記述です。

 

アップロードし、サイトを表示してみるとこのようになります。

 

タイトルが表示できるようになりました。

次は、ナビゲーションメニューをいじってみようと思います。