2020年2月にKENRAN、同6月にUnderShirtにブログテーマ(デザイン)を変更して、
それ以来3年半ぶりにデザインを変更し、今回は "SOBOKU" を使わせて頂くことに。
採用したテーマ
その名の通り、素朴であっさりした見た目が特徴ですね。
テーマを変更することにした主な理由は:
- Font Awesome(Free版)の使用を停止したらページ描画が軽快になったので、どうせならもっとページ表示がサラサラ流れるようにしたくなった
- トップページのカード表示に飽きが来ていた
- 漠然と「なんか違う……」と感じるようになってた
とまあ、Font Awesomeの件を除けば「なんとなく」が正直なところかな?笑
ただ、提供されているテーマそのままだと "素朴すぎる" 気もしたので、ほんの少しだけカスタマイズを施しました。
カスタマイズ
記事上部(一行広告を表示している箇所)
デフォルトのままだとフォントがあまりにも小さかったのでちょうど良いサイズに調整し、合わせて背景色の追加とエッジを丸める装飾を施しています。
サイドバー(なかのひと欄&更新通知欄)
リスト表示させている箇所を、前述の記事上部に施してある装飾に合わせました。
なお背景色はそれぞれの<li>タグの中でインライン(style="……")で指定しているので下記のCSS内には背景色指定の記述はありません。
(注)記事中で紹介しているCSSは本記事執筆時点のものです。
ul.entry_head_ad,
div.hatena-module-body ul.sns-area {
list-style-type: none;
margin-left: 0;
padding-left: 0; }
ul.entry_head_ad li,
div.hatena-module-body li {
font-size: 9.5pt;
margin-bottom: .5em;
padding: .25em 1em;
border-radius: 24px; }
記事中の画像に背景を追加
記事中の画像にcaptionを付けた時、見やすいように背景が付くようにしました。
div.entry-content figure {
background-color: #eee; }
div.entry-content figcaption {
padding-bottom: 1em; }
記事中の見出し部分に装飾を追加
デフォルトのままだと本文と表題の区別がつきにくかったので、表題部分にアンダーラインを追加しました。
div.entry-content h3,h4,h5 {
border-bottom: 1px solid #ccc;
font-weight: bold; }
記事中とサイドバーのリンクテキストに装飾を追加
通常テキストとアンカーテキストの見分けが付かなかったので、記事上部の一行広告部分ならびにサイドバーのモジュール内にあるアンカーテキストに対して点線のアンダーラインが表示されるように装飾を追加しました。
ul.entry_head_ad a,
div.hatena-module-body li a {
border-bottom: 1px dotted #bbb; }
Font Awesomeの使用を停止
Font Awesomeを利用するためのスクリプトを外し、要所要所に使っていた同サービスのフォント(<em class="fas fa-download"> </em>など)も削除。
以上、同じSOBOKUテーマを使っている方に少しでも参考になるものがあれば幸い♪