ブログデザイン備忘録 ~カテゴリを2段組に

1. フッタのカテゴリを2段組に

　TeXに関する記事を追加することにしたので、前回(下)のフッタのカテゴリーを増やすことにした。単純に1段4つから1段5つにしてもよかったが、今後カテゴリーを増やせるように2段組にすることにした。

atatat.hatenablog.com

2. HTMLの追加

　前回の<div class="footer-links"> <ul>～</ul></div>に下段のリスト<div class="footer-links2"> <ul>～</ul></div>を追加。並べ方は文字数が偏らないように1段目にArduino, HTML/CSS, TeX、2段目にインターフェース,単位とした。また<div id="blog-title-content">の</div>の位置を下側に移動させた。

<footer id="footer">
    <div id="footer-menu">
        <div id="blog-title-content">
       <a href="https://atatat.hatenablog.com/"></a>
        <!--</div>前回の位置-->
       <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/TeX">TeX</a></li>
              </ul>
           </div>
           <div class="footer-links2"><!--下段のカテゴリーを追加-->
              <ul>
               <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>
    </div><!--/div id="blog-title-content-->
         <p class="copyright">© 2020 ATATAT All rights reserved.</p>
    </div>
</footer>

3. CSSの追加

前回と同様にfooter-links2の書式を追加する。

.footer-links2 ul {
    list-style: none;
    padding: 0;
    margin:0;
}
.footer-links2 ul li {
    display: inline-block;
    padding: 0 6px;
    font-size: 80%;
    box-sizing: border-box;
}