HTML&CSS

【JINカスタマイズ】タグクラウドの文字サイズを変更する

【JINカスタマイズ】タグクラウドの文字サイズを変更する
こんにちは!Webデザイナーのアズサ(@azusascom)です。

前回、「【JINカスタマイズ】プロフィールにボタンをつける」という記事を書いたところ、早速試してくれた方がいました。ありがとうございまする。

そして、早くもカスタムリクエストをいただきました。

コムケンさん、ありがとうございます!

タグクラウドのデフォルトは以下。

タグクラウドのデフォルト文字サイズ

タグが大量でも問題ないように、文字サイズは小さく設定されてるんですね。目立たせたいなら文字を大きくしたほうがいいでしょう。

ということで今回は、タグクラウドの文字サイズを変更する方法をお伝えします。

カスタマイズ完了後のイメージ

タグクラウドの文字サイズ変更後

大きくしすぎても変なので、画像くらいの文字サイズがいいんじゃないかと。

元々のデザインがきれいなので、文字サイズのみの変更です。

WordPressテーマをカスタマイズする場合、子テーマをダウンロードし、有効化しておいてください。

バージョンアップで親テーマを更新すると、カスタマイズした内容が消えてしまいます。

【JIN】子テーマダウンロード

追加CSSの記述

今回はCSSの追記のみです。

CSS

/***タグクラウド***/
.widget_tag_cloud a{
font-size:0.85rem !important;/*文字サイズ変更*/
}

追加場所

「外観」「カスタマイズ」「追加CSS」

追加CSSを入力する場所

CSS枠内をコピペしてくださいね。

文字サイズは「0.8~1」がおすすめ。数字の部分だけ変更してください。

タグが増えたら文字サイズを小さくするなど、適宜変更しましょう。ただ、読者の年齢層が40代以上なら文字は大きめに。

これでタグクラウドの文字サイズ変更は完了!

今回は以上です。文字のサイズや太さの変更は難しくないので、ぜひ挑戦してみてくださいね。

実は、リクエストいただいたコムケンさんから「文字サイズ変更は他の人の記事に書いてあった」とご連絡が。

いやーん(/ω\)

でも書いちゃいました。

ウィジェットの編集については「ウィジェットを編集してサイドバーをカスタマイズしよう」という記事も書いてるので、よかったら読んでみてくださいね。

ではでは。

ABOUT ME
アズサ
アズサ
逃げまくりフリーターからWebデザイナーになり、3年間Web制作会社に勤務。 現在はブログ運営とハンドメイド販売をしてます。 ブログ開設のお手伝いや、おしゃれなブログにする方法のご提供など、無料で全力サポートします。

ブロガーのあなた デザインだけじゃダメなんです。

ブログで収益を増やすには、「デザインスキル」と「ビジネスの基礎知識」が必須。

今なら無料でビジネスの勉強ができちゃいます。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です