WordPress個別サポート

WordPressで投稿や固定ページの本文を入力するときに「ここだけフォントサイズを大きくしたい」ということもあります。

テキストエディタでCSSを入力できる方は次のようにstyle属性の中で自由にCSS(font-sizeなど)を入力すれば文字を大きくすることができます。

<div style="font-size:20px;">ここだけ文字を大きくします!</div>
ここは普通サイズです。

表示結果は次のようになります。

フォントサイズの変更結果

フォントサイズの変更結果

CSSの入力に慣れておらずビジュアルエディタで作業したい場合は、TinyMCE Advancedプラグインが役立ちます(TinyMCEは「タイニーエムシーイー」と読みます)。以下、インストールしてからビジュアルエディタでフォントサイズを変更するまでの手順を紹介します。

TinyMCE Advancedプラグインを使うため、「プラグイン」‐「新規追加」メニューからインストール、有効化します。

TinyMCE Advancedプラグインをインストール

TinyMCE Advancedプラグインをインストール

「設定」‐「TinyMCE Advanced」メニューを開いてツール群から「Font Sizes」を画面上部の使用可能なメニュー群にドラッグアンドドロップします。

フォントサイズ設定メニューをドラッグアンドドロップ

フォントサイズ設定メニューをドラッグアンドドロップ

フォントサイズ設定メニューがパレットに追加されるので画面を下にスクロールして「Save Changes」ボタンをクリックします。

フォントサイズ設定メニューが追加される

フォントサイズ設定メニューが追加される

投稿や固定ページの編集画面を開くとビジュアルエディタで「フォントサイズ」メニューが使用可能になっています。

ビジュアルエディタで「フォントサイズ」メニューが使用可能に

ビジュアルエディタで「フォントサイズ」メニューが使用可能に

「フォントサイズ」メニューが表示されない場合は「ツールバー切り替え」ツールバー切り替えをクリックしてください。すべてのツールバーが表示されるようになります。

文章の特定の文字サイズを変更するには、ビジュアルエディタで文字を選択(1)して、「フォントサイズ」メニューで適当なフォントサイズ(2)を選択します。

文字のフォントサイズを変更する

文字のフォントサイズを変更する

設定した文字だけフォントサイズが大きくなります。

設定した文字が大きくなる

設定した文字が大きくなる

テキストエディタに切り替えると、style属性で「font-size」が設定されています。

style属性でフォントサイズが設定されている

style属性でフォントサイズが設定されている

ビジュアルエディタで作業する方はテキストエディタに切り替える必要はありませんが、「24px」を「20px」に変更するなど、手動でCSSを微調整するときにテキストエディタに切り替えると作業がスムーズです。
この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート