WordPressテーマでCocoonを使っている場合に、フッターロゴが、「大きすぎる」「横に伸びている」「縦に伸びている」「潰れている」等々の場合に、思い通りの表示サイズに変更する方法を説明します。
フッターロゴサイズを修正する手順
以下の手順で進めてください。
WordPress管理画面から、以下のいずれかでCSSを入力/編集する画面を開きます。
- 「外観」→「カスタマイズ」→「追加 CSS」⇒コード入力
- 「外観」→「テーマファイルエディター」→「style.css」⇒コード入力
- どちらでも同じ結果を得られます。
- どちらで作業するかは、ご自身が全体に影響するCSSを何処で管理しているかによると思います。2を利用すると、追加CSSが一目でわかりますので、筆者は2をお勧めします。初心者にも簡単な方法は１ですが、管理に戸惑うことがあると思います。
追加CSSまたは、style.cssに追加するコード
２で作業する場合は、COCOONの「子テーマ」のstyle.cssにCSSコードを追加してください。
１の場合、子テーマがインストールされていれば、子テーマにCSSを追加してくれます。
以下のコードをすでに書かれているコードの一番最後に、一行開けて、コピペで追加してください。
/*フッターロゴサイズ*/
.footer-bottom-logo .logo-image {
padding: 0;
max-width: 150px;
}
.footer-bottom-logo img {
height: 20px;
width: auto;
}- 150，20はそれぞれ幅と高さです。任意の数字変更してください。
最後の仕上げ
CSSを追加したとは、必ず「保存」をクリックしてください。
まとめ
COCOONのフッターロゴ画像はWordPress管理画面の「Cocoon設定」→「フッター」からしてできますが、サイズは自動調整されます。
ご希望のサイズで表示させたいときは、このページで紹介するCSSを使用することで解決できます。
コメント