カテゴリー数が増えてきたので、サイドバーのカテゴリを縦一列(smooth.cssの場合)から横方向にも表示するように変更した。またフッターにカテゴリの追加も行った。
1. サイドバーのカテゴリ整理
サイドバーのカテゴリのデザインを変更するには、デザインCSSの記述を追加する。セレクタ.hatena-module-category .hatena-module-body ul li
としてディスプレイ要素をinline-block
とすれば、横方向にもリストが展開される。さらにpadding
やmargin
を適宜設定して、要素同士がくっつきすぎないように調整をする。ついでに、マウスが重なると若干色が変わるように疑似要素:hover
でbackground
で色を指定した。追加した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にカテゴリ名とリンクを追加し、リスト(文字)同士の間隔を調整するためCSSのpadding
やmargin
の数値を変更した。
以下フッター部分の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; }