フォーラムをリニューアルしました!
今後は、新フォーラムをご利用ください。
追尾目次のフォントの大きさについて < SWELLに関する質問
大変お世話になっております。
ウィジェット追尾サイドバーのSWELL目次について質問です。
こちらはフォントの文字の大きさを修正することはできませんでしょうか?
どうしても見出しの長さと比べてサイドバー部分が小さいため、目次の文章が1-2文字ずつ余って二行になってしまうことが多く、追尾目次がみづらいことが多いです。
もし文字の大きさを少し小さくできればきれいにできるかなと思ったのですが。。
もしトピックが他にあれば申し訳ございません。
CSSで好きなサイズに調整できますので、試してみてください〜🙆♂️
未検証の情報で申し訳ないですが、
.widget_swell_index .p-toc__link{ font-size: 14px; }
とかで変更できると思います。
みなさまありがとうございます。
CSSを確認してみましたが、なかなか他の部分にも影響するらしく目次部分だけ変える追加CSSがうまく書けない状況です。
上記の三行も追加CSSに入れてみましたがエラーになってしまい変わらなかったので、せっかく作っていただいたのに申し訳ありません。
お世話になっております。
その後、CSSを色々とチェックしてみたのですが、追尾目次の部分はCSS同士がさまざまな部分と共有(見出しの文字の大きさなど)していて、この部分だけをうまく調節できないようです。
どなたか追尾目次の部分のフォントの大きさだけを変更できるCSSがあれば、お教えいただければ非常に助かりますm(_ _)m
ご無理をいって申し訳ございません。難しければ無視で大丈夫です。
私の場合のやり方ですが、記載してみます。
(たぶん他の人も似たような方法で感じだと思います)
【01】chromeを起動して、変更したいページを表示します。
【02】F12を押してDevtoolとやらを表示させます。(図のようにページの右側になんか出ます。閉じる場合はまたF12で閉じれます。)
【03】①の部分をクリックします。薄い水色になります。
【04】マウスを追尾サイドバーの目次の方へ持っていくと、図の②ように「今ドコを選んでいるか」がハイライトされます。③の部分もハイライトされます。
【05】図のような感じでハイライトされたらクリックします。
【06】③を確認すると<div id=swell_index-2 ・・・・>となってます。このIDは人によってswell_index3とか1とかなってるかも?
【07】④のような箇所を探します。 div#swell_index-2 となってます。 これはたしか、「idとしてswell_index-2が割り振られているdivの要素」(つまり③の部分)を意味してたと思います。③の部分のCSSを④以下のとこで、試しに変更できます。ここに試しに追加したいなと思うところでクリックすれば入力出来る状態になります。
【08】⑤のように自分でタイピングして文字列を追加してます。その結果が直ぐ左のページで反映されます。
【09】これでいいなと思ったら、SWELLのCSS追加するところで
div#swell_index-2 {
font-size: 20px;
}
と追加し、保存します。
【10】実際に変更が反映されてるか確認してOKのハズです。