Cocoonのフッターロゴを元のサイズで表示するCSS

WordPress

当サイトはWordPressの無料テーマ、Cocoonを使っています。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

まだ現在はテスト版で、今現在も作者のわいひらさんがこまめに修正・アップデートしてくださっていて、不具合等がない、もしくは修正次第、一般に無料公開する予定との事なので、当サイトもほとんどカスタマイズはしていません。

ですが唯一、footerに配置したロゴが変形してしまうのが気になったのでCSSで修正しました。

スポンサーリンク

Cocoonのフッターロゴを元のサイズで表示するCSS

Cocoonは「Cocoon設定」で色々な設定をする事が出来ます。

WordPress管理画面 > Cocoon設定 で設定画面に入ります。

この設定画面でほとんどの設定が可能で、フッターに関する設定もここで出来ます。

フッターをクリックすると、表示させる内容などが設定できる画面になります。

当サイトは、ヘッダーに設置したタイトルロゴをフッターにも表示させたのですが、ロゴが変形してしまいます。

元のタイトルロゴはこうなのですが

フッターに表示されるのは歪んでしまいます。

CSSを見ると、元画像のwidthが164pxなのに対し、フッターロゴがmax-width120px設定なため、widthだけ縮小されてしまっているようです。

これを元のサイズで表示されるように子テーマのstyle.cssに以下を追加しました。

style.cssにコードを追加する

WordPress管理画面「外観」→「テーマの編集」をクリックして子テーマのstyle.cssの編集画面を開きます。

以下のコードを追記して、「ファイルを更新」をクリックします。

/*フッターロゴサイズ*/
.footer-bottom-logo .logo-image {
padding: 0;
max-width: 164px;
}

max-width: で元の画像のサイズを指定することで、元サイズで表示されるようになりました。

指定前

指定後

ちょっとした事ですが、気になっていたので修正しました。

Cocoonはまだ現在はテスト版です。

Cocoonはまだ現在はテスト版で、今現在も作者のわいひらさんがこまめに修正・アップデートしてくださっています。不具合等がない、もしくは修正次第、一般に無料公開する予定との事なので、完全版が楽しみですね。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。