SiteOrigin CSSでウィジェットのプロフィールの文字フォントサイズを変更

【SiteOrigin CSSを使ってウィジェットのプロフィールの文字フォントサイズを変更する】


■一般的なやり方:

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

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

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

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

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

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

(ワードプレスのブログエディタには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みたいですね。 

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

カーソルを合わせると、下のコンテナのバーが変わります。
ページを更新すると、文字のフォントサイズが変わっています。 

*** 

ストリートアカデミー講座 |【全10回+α】2ヶ月寄り添いワードプレスサイト作成講座→LPも。 
https://yagihashi-showgack.com/street-academy 

ヤギハシ ワードプレス講座 | ZOOMを使ったショーガックのLPサイト作成塾  
https://yagihashi-showgack.work/ 

ワープレでデザイナー講座 | オンラインでWEBサイト制作が学べる! 
https://yagihashi-showgack.com/