SiteOrigin CSSを使ってウィジェットのプロフィールの文字フォントサイズを変更する #カスタムCSS #CustomCSS #追加CSS

■一般的なやり方：
ウィジェットの文字のフォントサイズを変更するやり方①
こちらの2行ですね。

ウィジェットにあるプロフィールの
文字のフォントサイズを変更していきたいと思います。

まずは、一般的なプラグインを使わないやり方を説明します。

※ウィジェットのブログエディタには、
文字の装飾機能が太字しかありません。

ですので、まずこちらのプロフィール文章を
ブログエディタに貼り付けるためにコピペします。

こちらサンプルとして
ビジュアルエディタに貼り付けます。

（ワードプレスのブログエディタには2つのタブがあり、
ビジュアルとテキストの２つのタブがあります）

ビジュアルエディタで
フォントサイズを20にします。

このフォントサイズを20にした
HTML情報ごとヴィジュアルエディタでコピーします。

ウィジェットにもヴィジュアルエディタのタブがあるので
そのまま情報を変えずに貼り付けることができます。

このようにウィジェットのプロフィールの
文字のフォントサイズを変更することができました。

＊＊＊
■SiteOrigin CSS（別法）：
ウィジェットの文字のフォントサイズを変更するやり方②

では、お待ちかねのワードプレスのSiteOrijin CSSという
ドリームウィーバーのようなワードプレスプラグインを使って

ウィジェットの文字のフォントサイズを変更するやり方を
ご説明したいと思います。

現在こちらのウィジェットには、既にSiteOrigin CSSを使って
書き込んだCSS情報が入っています。

そのCSS情報をまず消すところから、
逆算して説明したいと思います。

プラグインを検索します。

「SiteOrigin CSS」と正確に打ち込みます。

ダッシュボードの「外観」から
「カスタムCSS（Custom CSS）」と進み、
カスタムCSSの情報を真っさらな状態に戻します。　

「SaveCSS」ボタンを忘れずに押して
Custom CSSの情報を保存してページを更新します。　

このコピペしたCSS情報がココに入っていました。
↓↓↓
ul.menu-box li a{
letter-spacing:0px;
}
.footer-menu-sp .menu-item a {
letter-spacing: 0px;
}
同じように、CSS情報をまず消すところから、
逆算して説明します。

SiteOrigin CSSに以下の情報が入っていました。
フォントサイズを変更するCustom CSSです。
↓↓↓
strong {
font-size: 20px;
}
全消しすると、
これがまっさらな状態です。

■SiteOrigin CSSを使って
ウィジェットのプロフィールの文字フォントサイズを変更する
この状態から「SiteOrigin CSS」。この目のマークですね。　

こちらをクリックして中のCSS情報を触っていきたいと思います。　
これがページビルダーになってます。　

そのコンテナの箇所にカーソルを合わせるだけで、
ページの文字などをいじれます。　

まるでDreamWeaverみたいですね。　

下の所で、この要素にカーソルを合わせるのが、ポイントです。
※文字にマスクを掛けたりもできます。