【AFFINGER 5】ロゴのサイズを変更する方法【CSS】




悩み人

WebサイトにWordPressのテーマ「AFFINGER5-WING」を適用して、運営しているのですが、ロゴのサイズを変更する方法を知りたいです。

このようなお悩みを解決します。

本記事の内容

・CSSをコピペ

・ロゴのセンタリング
・まとめ:CSSをコピペするだけ

本記事の信頼性

hiroki6(@hiroki6__)

本記事を書いている僕は、会社を経営しており、コーポレートサイトにAFFINGERというWordPressのテーマを適用させています。

ちなみに、当ブログはOPENCAGE(オープンケージ) という、ブロガー向けのテーマを扱っているサイトのWordPressテーマ「STORK19」 というテーマを利用しています。

今回は、AFFINGERを利用している方に向けて、ロゴのサイズを変更する方法を解説します。

カスタマイズ やAFFINGER5 管理で変更する項目が見当たらなかったため、方法について残しておきます。

コピペで適用可能

下記のコードを「追加CSS」に追記するだけです。

.sitename img {
max-width: 270px;
margin: 0;
width:100%;
}

max-widthのpxの数値は適宜修正して、サイズを確認してください。

補足:ロゴを真ん中に配置する方法

「ヘッダー設定」欄の「ヘッダーを分割しない」・「ヘッダーエリアをセンタリング」にチェックを入れます。その後、「保存」を押して完了です。

「AFFINGER5 管理」→「ヘッダー」→「ヘッダー管理」→「ヘッダー設定」の順で進みます。

「AFFINGER5 管理」→「ヘッダー」→「ヘッダー管理」→「ヘッダー設定」

まとめ:CSSにコピペするだけ【追加CSS】

コーポレートサイトなどで、会社ロゴのサイズを変更したい場合など、画像自体をいじらなくても対応することができますので、是非試してみてください。

今回は以上です。

シェアしてくれると喜びます。

ABOUT US

hiroki6
ブログ×本せどり / hiroki6運営(月4500PV)/ 本せどり(月33万)【経歴】大学 / イギリス留学 ▶ 大学院 / NPO法人チーム創設 ▶ 学生起業失敗 ▶ IT企業でWebマーケ担当(月45万 + せどり月15万)▶ 2年で退職 ▶ 会社経営(物販・Webマーケ)● 複業と独立を応援します ● 20代