【SiteOrigin 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みたいですね。
下の所で、この要素にカーソルを合わせるのが、ポイントです。
※文字にマスクを掛けたりもできます。
カーソルを合わせると、下のコンテナのバーが変わります。
ページを更新すると、文字のフォントサイズが変わっています。
＊＊＊
ストリートアカデミー講座 |【全10回+α】2ヶ月寄り添いワードプレスサイト作成講座→LPも。
https://yagihashi-showgack.com/street-academy
ヤギハシ ワードプレス講座 | ZOOMを使ったショーガックのLPサイト作成塾
https://yagihashi-showgack.work/
ワープレでデザイナー講座 | オンラインでWEBサイト制作が学べる！
https://yagihashi-showgack.com/
ワードプレスが作れない人へ★動画を見るだけでブログ作成
一人で作るのを諦めて、分かる人に教えてもらえるZOOM実録動画プレゼント。
https://yagihashi-showgack.work/tk3c
【 実演動画特典付き 】趣味・副業から始められる！その場でココナラマネタイズ 無料レポート by ショーガック
https://ee-report.net/get.php?R=111519
