AFFINGER

【アフィンガー】プロフィールカードのアイコン画像サイズを変更する方法

2019年7月31日

AFFINGER(アフィンガー)カスタマイズ CSS

 

こんにちは、NOJIです。

 

今回はプロフィールカード(スマホ)のアイコンサイズ変更方法を紹介します。

 

デフォルトのアイコンサイズの大きさが気になったので、少しばかり小さくしていきます。

 

カスタマイズ方法はCSSをコピペするだけで簡単にできますので安心してください!

 

カスタマイズ目的

 

今回のカスタマイズを行うと以下のようになります。

before

AFFINGER(アフィンガー)プロフィールカード before

after

AFFINGER(アフィンガー)プロフィールカード after

 

こんな感じでプロフィールカードのアイコンサイズを小さくしていきます。

 

デフォルトのサイズだと少しアイコンが強調されすぎに感じたので、いいと思ったら試してみてください。

 

カスタマイズ方法

 

今回のカスタマイズはCSSをいじります。念のためバックアップを取ることをおすすめします。

 

「外観」→「カスタマイズ」→「追加CSS」に下記のコードを追加します。

 

/*プロフィールアイコンサイズ*/
@media print, screen and (max-width: 599px)
{
.st-author-profile-avatar img {
width: 100px;
height: 100px;
}
}

 

今回のカスタマイズではアイコンサイズを100pxで設定しています。

 

サイズの微調整はこちらの数字を変えることでサイズが変わりますので適宜調整してみてください。

※「width」と「height」両方同じ数値にすると綺麗に表示されます。

 

AFFINGER 5のプロフィールカード(管理者)アイコン画像サイズの変更CSS:まとめ

 

以上、アフィンガープロフィールカードのアイコンサイズ変更方法でした。

 

今回は小さくするカスタマイズでしたが、逆にアイコンサイズを目立てたい人はデフォルトのままか、先ほどのコードの数値を大きくさればサイズが大きくなります。

 

プロフィールのアイコンは管理者の顔として大事なポイントですので、うまく調整して最適なサイズを見つけてみてください!

 

AFFINGER(アフィンガー)カスタマイズ CSS
【アフィンガーカスタマイズ】見た目をさらにおしゃれにするCSSまとめ集

続きを見る

 

-AFFINGER
-

Copyright© NOJI BLOG , 2019 All Rights Reserved.