サイドバーに置いたウィジェットの文字が、他に比べて大きいのが気に入らないので、小さくした。
ついでに、見出しの前にアイコンフォントもいれてみた。
フォントサイズの変更の仕方はこちらの記事を参考にさせて頂きました。
追加CSSで見栄えを変更
CSSのカスタムをするのは、外観→カスタマイズ→追加CSS
ここで記入したCSSは、右側のプレビュー画面に反映されない事もあるようなので、サイトを表示させた画面を開いて、リロードしつつ、好きな見栄えにもっていけるようにがんばる。
変更したい部分のIDとかクラス名を調べる
Chromの検証ツールで、変更したい部分のIDとかクラス名とかを調べて、カスタムCSSでそこに新たな指定をするので、まずは調べ方。
検証ツールはクロームの画面上で右クリック→一番下に検証というのがあるので起動。
黄緑の矢印部分をクリックしてから、ピンクのあたりでマウスをいったりきたりさせると目標が青く表示されるので、クリックすると表示される名前とか属性を左の黄色い矢印あたりで確認。
画面上の薄青表示部分が対象のセレクタが指定している部分。マージンが薄オレンジで黄緑がパディング。右側の要素に適用されてる値でも確認できる。
とりあえずサイドバーの部品の設定
とりあえず、サイドバーのフォントサイズは18px（サイト全体の設定と同じ）だったので、0.9emにしてみる。これで、16px位になる。
カスタムCSSの予測変換みたいなのが出て、入力手伝いしてくれて便利なような、不便なような。
追加CSSの記入欄に、#sidebar{font-size:0.9em}
プロフィールの内容は段落なので、#sidebar p{line-height:1.5em} 。
ウィジェットのタイトルはh3なので、こちらもとりあえず背景を取って下線ひいて、アイコンつけた。
アイコンを付ける設定。位置は好みで色々移動させて遊べます。
おさかながタイトルの左につきます。
sidebar h3:before{font-family: “Font Awesome 5 Free”;content: “\f578”;font-weight:900;position: absolute;font-size:1.5em;left:0;bottom: 3px;color:orange}
初期値のままの「ブロック」と書いてあるカテゴリーが表示されるウィジェットは見出しがh2になってるので、削除。ウィジェットの追加でカテゴリーウィジェットを追加して、ウィジェットの見出しはh3に統一。
コメント