ブログデザイン備忘録 ~フッタ・メニューバー

1. フッタ

　ヘッダ・本文書体変更・見出しの設定に引き続き、フッタを追加する。現状フッタ部に書くことがあまりないので、最低限としてブログタイトルとコピーライトを記すことにした。フッタを追加するには、デザイン設定のフッタに以下のHTMLコードを記述した。基本的にははてなブログのフッターに『コピーライト』や『お問い合せリンク』を導入する方法を紹介しますの！ - 元IT土方の供述のコードを一部変更している。

<footer id="footer">
    <div id="footer-menu">
        <div id="blog-title-content">
       <a href="https://atatat.hatenablog.com/"></a>
    </div>
         <p class="copyright">© 2020 ATATAT All rights reserved.</p>
    </div>
</footer>

CSSのコードは以下の通り。

#footer {
    text-align: center;
    color: #FFFFFF;
    background: linear-gradient(to right, #1d4350, #a43931);/*グラデーションの設定*/
　width: 100%;
    margin: 0;
    padding: 2em 40px 1em 40px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
    text-align: center;
    font-size: 100%;
}

.copyright {
    font-size: 100%;
    font-weight:bold;
}
#container {
  margin-bottom: 0;
}

フッタに書くことが今後増えてくれば、コードを追加・改変するかもしれない。

2. メニューバー

　次にヘッダ下のメニューバーを追加する。いまのところ記事の種類が少ないのでとりあえずHOME/Arduino/ブログデザイン(この記事)/その他（今のところ記事がないが、Arduino,ブログデザイン以外)とした。今後記事の種類が増えてくれば、メニュー数の数に応じてデザインを変更していこうと思う。ヘッダ-タイトル下に以下のHTMLコードを記述した。

<div class="menubar">
 <ul>
 <li><a href="https://atatat.hatenablog.com/" title="HOME" >HOME</a></li>
 <li><a href="https://atatat.hatenablog.com/archive/category/Arduino" title="Arduino">Arduino</a></li>
  <li><a href="https://atatat.hatenablog.com/archive/category/HTML%2FCSS" title="ブログデザイン">ブログデザイン</a>
  </li>
 <li><a href="https://atatat.hatenablog.com/" title="その他" >その他</a></li>
 </ul>
</div>

CSSは以下の通り。

.menubar{
 width:100%; 
}

.menubar ul{
 display:table;
 width:100%;
 max-width:1160px;
 margin:0 auto; 
 padding: 0;
 background-color: #FFFFFF; }
 
.menubar li{
 display: table-cell;
 width:25%; /*4分割なので100/4=25%*/
 padding:0;
 background-color:#002200; }
 
.menubar li a{
 display: block;
 margin:0 auto;
 padding:5px;
 border: 1px solid #FFFFFF;
 text-decoration: none;
 font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
 color: #FFFFFF;
 text-align: center;
 font-size: 100%; }

.menubar li a:hover{   
 background-color: #008800; /*マウスオーバー時に明るい色にする*/
}

3. スマホ対応デザイン

　スマホ用のデザインとしてレスポンシブデザインに設定している。さらにPCから画面サイズが変わったときにメニューバーのデザインが崩れるのを防ぐため、各画面幅のときに収まるようなデザインを表示する。スマホの画面幅は例えば次のサイトが参考になる。

【2020年4月修正追記】レスポンシブ CSSメディアクエリ（@media）ブレイクポイントまとめ | モバイル・スマホWeb・WordPressのSEO塾.com

スマホだけでも様々な画面幅があるが今回はブレークポイントとしてスマホ縦480px、スマホ横896pxを採用し、メニューの文字サイズを変えることにした。（メニューバーを縦にするという方法もある） CSSは以下のようにする。

@media(max-width:896px){  /*スマホ横*/
 .menubar li a{
 font-size:90%;
 }
}
 @media(max-width:480px){ /*スマホ縦*/
 .menubar li a{
 font-size:50%;
 font-weight:bold;
 }
#footer{
font-size:70%;
}
}