【AFFINGER6】ヘッダーカードのサイズを自由に変更(コピペ可能)
AFFINGER6のヘッダーカードを大きくしたり小さくしたりサイズを変更する方法をまとめした。
ヘッダーカードはAFFINGER管理画面から画像をアップロードすることができますが、高さの幅などは任意で細かく調整できないみたいなので今回はCSSで調整する方法をまとめております。
- ヘッダーカードの高さを変更
- ヘッダーカードの文字サイズを変更
- ヘッダーカード周りの余白の変更
大まかにこれらの変更が簡単にできます。
基本的にはコピペで対応できますが、数字を調整するだけで自分の好みのサイズに変更できるのでぜひ試してみてください。
AFFINGER6のヘッダーカードの大きさを変更
上はスマホで表示した場合の画面です。
画像自体のサイズは変更せず、CSSへ記載した指定の高さに変更することができています。
もちろん高さや文字のサイズも任意で変更できるため自分の好みのデザインを構築可能です。
画像を綺麗に反映させたい場合は、style.cssで設定したヘッダーカードのサイズに合わせて画像を用意する必要があるため注意してみてください。
CSSに記述するコード
※子テーマでの編集、バックアップ推薦です。
/*-- ヘッダーカード --*/
.st-cardlink-card.has-bg {
padding: 12px; /*-- 高さ変更 --*/
min-height: 20px;
}
.st-cardlink-card.has-bg.has-link .st-cardlink-card-link {
padding: 1px;
}
.st-cardlink-column-d {
margin: 1px auto 1px; /*-- カード外側の余白 --*/
padding: 1px 1px;
}
.st-cardlink-card {
margin: 5px; /*-- カード同士の余白 --*/
width: 100%;
line-height: 0.8;
}
.st-cardlink-card-link {
font-size: 14px; /*-- 文字サイズ --*/
}上のコードをWordPressのダッシュボードにある「追加CSS」、もしくは使用するサーバーの任意の場所へ追記します。
私の場合はスマホとPCでヘッダーカードのサイズを変えているので、使用しているエックスサーバーから適応したいブログの「style.css」にあるそれぞれの領域へ記載しました。
余白のコードと文字サイズのコードも記載しているので、自分の好みに合わせて調整してみてください。
AFFINGER管理で画像をアップロード
ヘッダーカードにしたい画像は、AFFINGER管理ページで行います。
「ヘッダー下/おすすめ」に進むと4つまでヘッダーカードを載せることができるので、それぞれに画像、テキスト、URLを記載して保存。
画像の設定自体は簡単です。
完成したヘッダーカード
コードを入力して調整したヘッダーカードの見た目です。
デフォルトのヘッダーカードのサイズは個人的にちょっと大きく感じていたのでうまく変えられたと思います。
高さや文字サイズも変更しており全体的にバランスがとれていいいのかなぁというところ。
まとめ：【AFFINGER6】ヘッダーカードの大きさ変更
簡単ですが、以上がAFFINGER6でのヘッダーカードの幅の変更についてです。
記事へ記載した参考コードを追記するだけで簡単にヘッダーカードのサイズが変更できたと思います。
WordPressのダッシュボード(カスタマイズ)から「追加CSS」に記載するだけでも変更できますし、子テーマのstyle.cssへ記述するのもOKなのでお好みの方法で試してみてください。