この記事では、私自身がWordPressブログのデザインをカスタマイズをする上でメモしておきたい内容として、「マイボックスの文字の大きさを変えたい」場合のカスタマイズ方法を記載しました。
WordPressで記事を書く際「マイボックス」はよく使用するのではないかと思いますが、マイボックスの中の文字がもう少し文字が大きい方が良かったり小さい方が良かったりすることがあると思います。
今回はこのマイボックスの文字の大きさを変える方法を紹介しており、一度コードを子テーマに記述すればそれ以降は自動で文字サイズが任意のサイズで表示されるのでおすすめです。
文字の大きさを変えるだけでなく、行間やリストにした際の大きさも考慮しているので是非参考にしてみてください。
注意
- こちらの記事ではAFFINGER6を使用した方法として記載しています。
私がAFFINGER6を使用しているため、それ以外のテーマの場合は少し異なる可能性があるのでご了承ください。 - ブログのデザインに関しては素人であり、独学で試しながらやっているものなので参考程度にお願い致します。
マイボックスの文字の大きさを変えたい場合のカスタマイズ
任意の子テーマの「style.css」に下記のコードをコピペするだけで反映させることができます。
※文字サイズや行の高さは数値で調整。
PC・スマホ・タブレットなど個別で文字の大きさを変えることができるので、それぞれで文字の大きさを変えたい場合は「style.css」内で分けることで対応してください。
親テーマの影響でうまく反映しない場合は、私は「!important;」で対応しています。
「font-size: 13px;」⇨「font-size: 13px!important;」
「AFFINGER：マイボックス」のカスタマイズ
ポイント
- あいうえお
- かきくけこ
- さしすせそ
/* マイボックス */
.st-in-mybox p {
font-size: 15px;
line-height: 24px;
}
.st-in-mybox ul li {
font-size: 15px;
line-height: 24px;
}「AFFINGER：見出し付きフリーボックス」のカスタマイズ
見出しテキスト
- あいうえお
- かきくけこ
- さしすせそ
/* 見出し付きボックス */
.free-inbox p {
font-size: 15px;
line-height: 24px;
}
.free-inbox ul li {
font-size: 15px;
line-height: 24px;
}「AFFINGER：メモ」のカスタマイズ
- あいうえお
- かきくけこ
- さしすせそ
/* メモボックス */
.clip-memotext p {
font-size: 15px;
line-height: 24px;
}
.clip-memotext ul li {
font-size: 15px;
line-height: 24px;
}コードの入力方法
上のカスタマイズするために記載したコードをどこへコピペすればいいかわからない方に向けて、簡単ですがテーマへコピペする流れを記載しておきます。
私はエックスサーバーでワードプレスを運営しているため、エックスサーバーを使用した方法で説明させていただくのでご了承ください。
サーバーへログイン
まずはエックスサーバーへログインし「ファイル管理」を開きます。
フォルダを選ぶ
ログイン先にはフォルダが並んでいるので、編集したい自身のブログのフォルダを選ぶ。
私のこのブログであれば「cf-room.com」です。
そこからはファイル内を下のように進んでいきます。
「public_html」⇨「wp-content」⇨「themes」⇨「任意の子テーマ」⇨「style.css」
コピペする場所は「style.css」です。
コピペする
一番下にある「style.css」を選択して「編集」を押してください。
「style.css」のファイルが開かれるので、全体もしくはPCのみ・スマホのみ・タブレットのみなど、任意の場所へコードを記述します。
以上が手順です。
まとめ
それぞれのボックス内での文字のサイズ変更するためのコードと、ボックス内のリストにした文字の大きさを変更するためのコードを記載しています。
コピペで任意の数値に指定するだけでボックス内以外の文字の大きさと差別化できるので便利です。
AFFINGER6での設定方法となっていますが、テーマが違うものでも応用できるので興味がある方は試してみてください。
＼現在使用中のテーマ／