【Cocoon】一部のフォントサイズをクラス指定で変更する方法【WordPress】

ブログ
スポンサーリンク

こんにちは、サブです。

ワードプレスでブログ記事を書いていると、部分的にフォントサイズを変えたいと思うことがありませんか?

例えば、下記のように列の数が多いような表を作った場合に、セルの横幅が狭くなるために改行されてしまい、見栄えが悪くなることがあります。

ビジュアルエディター上でフォントサイズを変更する場合、1つずつセルを選択してサイズ変更をしていく必要があり、大変手間です。

「カスタムHTML」ブロックにして、HTML/CSSで表を作ることもできますが、それも手間です。

今回は、ワードプレステーマの「Cocoon」を使っている場合に、一部分のフォントサイズを手軽に変更する方法を紹介します。

スポンサーリンク

Cocoonで部分的にフォントサイズを変更するには

結論

結論を先に言うと、下記の操作でフォントサイズを変更できます。

  1. 対象のブロックを選択
  2. 「高度な設定」>「追加CSSクラス」に「fz-14px」など、適切なクラス名を設定

以上で、部分的にフォントサイズを変更できます。

ここからは、実際に画像付きで詳細な手順を追っていきましょう。

フォントサイズを変更したいブロックを選択

フォントサイズを変更したい対象のブロックを、クリックで選択します。

追加CSSクラスに適切なクラス名を設定

対象のブロックが選択された状態で、右サイドメニューの「高度な設定」>「追加CSSクラス」に、適切なクラス名を設定します。

上の例では「fz-14px」を設定することで、ブロック全体のフォントサイズを「14px」に設定したことになります。

先ほどの画像と比べてみると、対象ブロックのフォントサイズが小さくなっていることが分かります。(当初の自分の目的だった、セル内の改行も解消されています)

フォントサイズ変更用のクラス名を確認

「14px」以外にも、多くのフォントサイズのパターンに対して、クラス名が用意されています。

クラス名の確認の手順を追っていきましょう。

「WordPress管理画面」>「外観」>「テーマエディター」と進みます。

「テーマの編集」画面が開きます。右サイドメニューの「テーマファイル」で「style.css」が選択されていることを確認します。

左側のエディター内のどこでもよいので、一度クリックをします。その状態で「Ctrl+F」キーにより、エディター内検索の窓を出します。

検索窓に「fz-」と入力して「Enter」を押すと、フォントサイズ変更用のクラス名がたくさん並んでいることが分かります。

確認したところ、下記のようなフォントサイズのパターンがあるようです。
(全て「fz-○○px」というクラス名に対応しています)

  • 12px~22px
  • 24px, 28px, 32px, 36px, 40px, 44px, 48px

また、「fw-○○px」という「font-weight」変更用のクラスもあるので、興味のある方は上記の手順でご確認ください。

スポンサーリンク

まとめ:部分的なフォントサイズはクラス名指定で手軽に変更できる

今回は、ワードプレステーマの「Cocoon」を使っている場合に、一部分のフォントサイズを手軽に変更する方法を紹介しました。

このブログ内では表を多用するので、僕にとってはとても重宝しそうなチップスとなりました。

コメント

タイトルとURLをコピーしました