ブログデザイン備忘録 ~フッタにカテゴリ追加

1. フッタにカテゴリ追加

　その他の記事で、今のところインターフェースと単位(数の話)というカテゴリをその他と一緒に設定したが、それぞれあと数記事程度は書けそうなのでフッタからアクセスできるようにデザインを変更した。まだヘッダのメニューバーを変更するほど記事が書ける見込みがないので今回はフッタのみとした。なお今回もはてなブログのフッターに『コピーライト』や『お問い合せリンク』を導入する方法を紹介しますの！ - 元IT土方の供述のコードを一部変更している。

2. HTMLの追加

以下のようにフッタ部分のHTMLにカテゴリ:Arduino,HTML/CSS,インターフェース,単位をリスト形式で追加

<footer id="footer">
    <div id="footer-menu">
        <div id="blog-title-content">
       <a href="https://atatat.hatenablog.com/"></a>
    </div>
       <!--前回のフッターメニューから<nab>以下を追加-->
    <nab>
         　<div class="footer-links">
               <p>カテゴリー</p>
              <ul>
               <li><a href="https://atatat.hatenablog.com/archive/category/Arduino">Arduino</a></li>
               <li><a href="https://atatat.hatenablog.com/archive/category/HTML%2FCSS">HTML/CSS</a></li>
               <li><a href="https://atatat.hatenablog.com/archive/category/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9">インターフェース</a></li>
               <li><a href="https://atatat.hatenablog.com/archive/category/%E5%8D%98%E4%BD%8D">単位</a></li>
              </ul>
           </div>
       </nab>
       <!--ここまで追加2020.3.29-->
         <p class="copyright">© 2020 ATATAT All rights reserved.</p>
    </div>
</footer>

3. CSSの追加

前回のフッタに関する記事

atatat.hatenablog.com

で以下の.footer-linksのコードを入れていたが、前回までhtmlにはfooter-linksのクラス名は入れていなかったので機能していなかった。前回の記事は修正して、今回改めてCSSコードに入れたものを下に示す。 メニューバーと同じで横一列にカテゴリを表示した。また、リンクの文字色をライトグリーン(#CCFF99)に変更した。文字を小さめにすることで、スマートフォン画面の設定はしていない。

#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%;
}
/*カテゴリーに関する書式設定*/
.footer-links ul {
    list-style: none;
    padding: 0;
}
.footer-links ul li {
    display: inline-block;
    padding: 0 6px;
    font-size: 80%;
    box-sizing: border-box;
}
.footer-links p{
    font-weight:bold;
}
#footer a{
    color:#ccff99;
    }
/*--ここまで追加2020.3.29*/
.copyright {
    font-size: 100%;
    font-weight:bold;
}

#container {
  margin-bottom: 0;
}