★生活とお金と在宅ワーク★

Cocoonテーマの通知エリアの文字を太文字にしたい

Cocoonテーマのヘッダーメニュー下に「通知エリア」を表示できます。
(モバイルはメニューは表示されないのでヘッダーのすぐ下になります)

その通知エリアに表示するテキストを太文字にしたいなあと思いました。

スポンサーリンク

Cocoon 通知エリアの文字を太文字にする方法

ブログの通知エリア辺りを選択してソースを表示させると

div id="notice-area" class="notice-area nt-notice">
      テキスト</div>

と表示されたので、

Cocoonの親スタイルシートから「notice-area」検索し

.notice-area {
color: #fff;
text-align: center;
background-color: #4cae4c;
padding: 0.6em;
font-size: 0.8em;
}

を発見。

子テーマのスタイルシートに

/*通知*/
.notice-area {
text-align: center;
padding: 0.5em;
font-size: 0.8em;
font-weight: bold;
}

こんな感じに「font-weight」を追加し貼りつけて完了です。
太字になると余白も大きくなるので「padding」を少し小さく調整しました。

背景色と文字色はCocoonの通知タブで変更できるので、変更したい部分だけ書き込みます。
他にも変更する可能性のある項目は残しておきました。

テキストを太くする指定方法

検索などで調べているうちに文字の太さについて
100から900までの100単位の数値で指定できると知りました。

font-weight: bold; こちらは知っていましたが
font-weight: 600; 数字指定は知りませんでした。

数値で指定
100、200、300、400、500、600、700、800、900でフォントの太さを指定します。太さが9種類用意されているフォントはあまりないため、数値を上下させても太さが変化しないことがあります。標準の太さは400で、数値が小さくなるほど細く、大きくなるほど太くなります。
キーワードで指定
normal …… 標準の太さです。(数値で400を指定した場合と同じ)
bold …… 一般的な太字の太さです。(数値で700を指定した場合と同じ)
lighter …… 相対的に一段階細くします。
bolder …… 相対的に一段階太くします。

※「クイックリファレンス」さんより引用させていただきました。

font-weight-スタイルシートリファレンス
HTMLタグ・スタイルシート・特殊文字等の早見表
太字の太さは変更可能ですか?
いつもお世話になっています。 ブログ全体のフォントを最近変更したのですが、太字の太さが太く感じ、もう少し細めたいのですがそういったことは可能でしょうか? フォント自体の太さの変更が可能なのは知っているのですが、太字の場合は太さが変更になっていない気がします。。。 変更方法があれば教えていただ...

CSS(スタイルシート)も随分前に少しだけ勉強したまま今日に至っているので、
もう少しきちんと勉強しないといけないなあと痛感するところです。

他にも自分が「Cocoonテーマ」をカスタマイズした部分について
記録として残していこうと思います。
すぐ忘れてしまうので、ほんと(^^;

コメント