アフィンガーのカスタマイズとフリーランス生活と副業

副業とフリーランス生活

アフィンガー

アフィンガーの記事一覧画面の画像を大きくする方法

投稿日:

アフィンガーの記事一覧画面の画像を大きくする方法を書いていきます。

CSSを追加するので、子テーマのstyle.cssに追記してくださいね。

親テーマに追記するのはやめましょう!!

アフィンガーの記事一覧画面の画像を大きくする

どのようにカスタマイズ変更するのかといいますと

カスタマイズ前

アフィンガーの記事一覧の画像を大きくするカスタマイズ

カスタマイズ後

アフィンガーの記事一覧の画像を大きくするカスタマイズ

このように、記事一覧画面の画像を大きくします。

注意点としては、このカスタマイズをすると記事の下の関連記事やサイドバーにある新着記事も多分画像が大きくなります。

アフィンガーの記事一覧画面の画像を大きくする方法

具体的な方法としては、子テーマのstyle.cssに下記のcssを追記するだけですね。


/*関連記事の画像の大きさを大きくする*/

.kanren dt {
float: left;
width: 250px;
}
.kanren dt img {
width: 260px;
}
.kanren dd {
padding-left: 280px;
}
@media print, screen and (max-width: 599px) {/*スマホでは大きくしない*/
.kanren dt {
float: left;
width: 100px;
}
.kanren dt img {
width: 100%;
}
.kanren dd {
padding-left: 115px;
}
}

  • この記事を書いた人

シュフー

フリーランスでWEBデザイナーをしています。フリーランス歴6年くらい。 フリーランス生活についてとアフィンガーのカスタマイズについて書く予定です。

-アフィンガー

Copyright© 副業とフリーランス生活 , 2019 All Rights Reserved.