affinger5

【affinger5】ブログカード・新着記事のフォントサイズ変更

beginner_fontsize

当サイトの運営はエックスサーバー で行っております。


悩んでる人
ブログカードとか新着記事のフォントサイズってどう変えるの??
追加CSSとかテーマエディタで変更することができるよ!

以前のレイアウトカスタマイズの続きとして紹介するよ。

わたし

ブログカードと新着記事のフォントの変更

before

おすすめbefore
before

after

カスタム完成形3

なんとなくスッキリ、、、

しましたかね??

今回紹介するのは、

ブログカード&新着記事

フォントサイズ変更についてです。

冒頭で紹介した記事の続き?になっています。

もしよかったら覗いてみて下さい。

eyecatch
【affinger5】おしゃれ&見やすさ重視 初心者向けのカスタマイズ

当サイトの運営はエックスサーバー で行っております。 悩んでる人affinger5を買ったのはいいけど、カスタマイズの仕 ...

続きを見る

注意

とても軽微ですがCSSの変更を行います。

念の為、バックアップをお願いいたします。


ブログカードのレイアウト変更

ブログカードでは、

  1. フォントサイズの変更
  2. パディング(余白)を狭くする方法

を紹介していきます。

以下のように変わります。

before

おすすめbefore

after


ブログカードのフォントサイズ変更

今回は追加CSSを使って変更します。

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

左のエディタに、

@media only screen and (max-width: 599px) {
h5.st-cardbox-t {
font-size: 0.8rem !important;
}

上記を書き込んで下さい。

「font-size」の値を変更すると文字サイズが変わります。

また、このCSSはスマホのみの適用となります。

好みの値に設定してみて下さい。


ブログカードのパディング(余白)変更

余白を変えるときは、

「外観」→「テーマエディタ」→

テーマエディタ1

「親テーマの選択」→「スタイルシートをクリック」

→「ctrl+Fで”ブログカード風”を検索」

ブログカード

→「”padding: 15px”を任意に変更」

することで変更できます。

私は8pxに設定しました。

好みの幅に設定してみて下さい。


新着記事のフォントサイズ変更

先程のブログカードの追加CSSの中に

@media only screen and (max-width: 599px) {

.kanren .clearfix dd h5:not(.st-css-no2) a {
font-size: 0.8rem;
}
h5.st-cardbox-t {
font-size: 0.8rem !important;
}

黄色マーカー部のみを追加して下さい。

先程と同様、新着記事のフォントサイズが変わります。

WordPressテーマ 「WING(AFFINGER5)」


まとめ

以上、affinger5のためのレイアウト調整の仕方を紹介しました。

よろしければ他の記事も覗いてみて下さい!

関連記事

eyecatch

affinger5

【affinger5】おしゃれ&見やすさ重視 初心者向けのカスタマイズ

当サイトの運営はエックスサーバー で行っております。 悩んでる人affinger5を買ったのはいいけど、カスタマイズの仕 ...

eyecatch

affinger5

記事レイアウトで損してる!直帰率を下げる、コピペでできるaffingerカスタマイズ方法。

PVを上げるために重要な「直帰率」。今回は、5分ほどの簡単作業で直帰率を下げる、レイアウトの変更方法を紹介しています。
AFFINGER限定の方法ですが、他テーマにも応用することは可能なので、是非試してみてください。

よく読まれている記事

プロジェクターアイキャッチ 1

10万円で手が届く、高画質・高機能のプロジェクターの選び方、おすすめの商品を紹介しています。
解像度、コントラスト、明るさ、機能性、値段などからあなたに最適のプロジェクターを紹介します!
最近増えてきた、モバイル用プロジェクターや変わり種も!

motorscooter_eyechatch 2

当サイトの運営はエックスサーバー で行っております。 悩んでる人日常の足になるような電動バイクってどんな種類がある? 通 ...

vezel_eyecatch 3

ツイートのリンクを目立たせる機能”Twitterカード”について丁寧に解説しています!
affinger5のテーマを使っている方向けの記事となっています。
ブログ初心者の方(わたし)がつまずくところだと思います。参考にしてください。

eyecatch 4

当サイトの運営はエックスサーバー で行っております。 悩んでる人affinger5を買ったのはいいけど、カスタマイズの仕 ...

-affinger5
-, ,

Copyright© りくぶろぐ ~ブログ×ガジェット×モビリティ~ , 2020 All Rights Reserved Powered by AFFINGER5.