つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録 ~サイドバーカテゴリー整理

 カテゴリー数が増えてきたので、サイドバーのカテゴリを縦一列(smooth.cssの場合)から横方向にも表示するように変更した。またフッターにカテゴリの追加も行った。

1. サイドバーのカテゴリ整理

 サイドバーのカテゴリのデザインを変更するには、デザインCSSの記述を追加する。セレクタ.hatena-module-category .hatena-module-body ul liとしてディスプレイ要素をinline-blockとすれば、横方向にもリストが展開される。さらにpaddingmarginを適宜設定して、要素同士がくっつきすぎないように調整をする。ついでに、マウスが重なると若干色が変わるように疑似要素:hoverbackgroundで色を指定した。追加したCSSは以下のようになる。

.hatena-module-category .hatena-module-body ul li {
   display: inline-block;
   border-radius:8px;
   padding:0.3em;
   margin:0.2em;
} 

.hatena-module-category .hatena-module-body ul li:hover{
   background: rgba(144, 238, 144, 0.3);
} 

2. フッターのカテゴリ追加

 サイドバーはカテゴリ追加するごとに自動的に追加されるが、フッターは自分でデザインしているためカテゴリ(リンク)を追加する作業が必要になる。手間はかかるがカテゴリが増えすぎたときに、選別するなど融通がきくのでサイドバーと使い分けてもよい。今まで作ったフッターのHTMLにカテゴリ名とリンクを追加し、リスト(文字)同士の間隔を調整するためCSSpaddingmarginの数値を変更した。 以下フッター部分のHTMLを示す。

<footer id="footer">
  <div id="footer-menu">
    <div id="blog-title-content">
       <a href="https://atatat.hatenablog.com/"></a>
       <nab>
          <div class="footer-links">
             <p class="category">カテゴリー</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/javascript">javascript</a></li>
               <li><a href="https://atatat.hatenablog.com/archive/category/TeX">TeX</a></li>
               <li><a href="https://atatat.hatenablog.com/archive/category/MathJax">MathJax</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>
               <li><a href="https://atatat.hatenablog.com/archive/category/%E3%83%84%E3%83%BC%E3%83%AB">ツール</a></li>
              </ul>
           </div>
       </nab>
  </div>
       <p class="copyright">© 2020 ATATAT All rights reserved.</p>
  </div>
</footer>

またCSSも下に示す。

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