子供の成長と記録、Wordpressでのサイト作りなどを綴る、主婦のブログ

【WordPress】サイトロゴのヘッダーとフッターの画像を別にカスタマイズする方法【LIQUID PRESS】

ワードプレスのわぷーさん。
こんにちは!

このサイトを含めて
LIQUID PRESSのテーマを使っていて数ヶ月が経過しました。

その間に
いろいろカスタマイズしたいところが出てきたので
試行錯誤の結果
成功したものを他の方の参考になればと思い
少しづつ紹介していきたいと思います。

(あくまでも超初心者の私が四苦八苦しながらの
個人の成功結果なので
もっと効率よくかつ効果的な方法があるかもしれないし
バージョンや他のテーマでは通用しないかもしれませんが
それを含めて参考になれば幸いです。)

私が使用しているのは、LIQUID PRESSのテーマ【CORPORATE】というテーマです。
時間があればLIQUID PRESSが
無料で提供しているテーマ【LIGHT】でも検証する予定です。
スポンサーリンク


サイトロゴのヘッダーとフッターの画像を別にするならPHPファイル。サイズの変更だけならstyle.css。

LIQUID PRESSのテーマをWordPressの画面から使っていて
当初のカスタマイズ画面からサイトのヘッダー画像を設定すると
自動的にフッターの画像も同じものになってしまいます。

それも、ヘッダー画像サイズとして400×72ピクセルを推奨していて
自動補正がかかるようにされていたりします。
(ちなみに、フッターは同じ画像を縦36ピクセルに自動補正)

これが基本設定で、LIQUID PRESSのカスタマイズ画面からは変更できないんですよね。

フッターの背景色とかをカスタマイズして変更してしまうと
どうにもこうにもヘッダー画像がデザイン的に浮いてしまう。

でも機能的に、フッターにあるこの画像の機能はあったほうがいい。

さて、どうしたらいいのかしらー???
と思って色々検索してみたりしました。

しかしながら、参考になるサイトがなかったです・・・。
めっちゃカスタマイズの基本知識なのかしら???

サイトロゴのヘッダー画像の大きさをstyle.cssで設定する!

ヘッダー画像サイズとして400×72ピクセルを推奨しているLIQUID PRESSですが
子テーマからstyle.cssに記述することによって
大きさを自在に変更することができます。

(style.cssなどの記載を変える場合は、公式サイトでアナウンスがあるように
子テーマにstyle.cssファイルを作ってカスタマイズすることをお勧めします。
子テーマの作成方法はLIQUID PRESSの公式サイトで知ることができます)



サイトロゴのフッター画像を別にfooter.phpファイルで設定する

今回の私のサイトの場合
フッター画像がフッターに設定している背景やデザインに合わなかったので
カスタマイズをしようと思ったわけですが

その場合、フッターのサイトヘッダー画像を指定しているphpファイルの記述を
見つけ出してカスタマイズすればいいわけで、
footer.phpにその記述があるので
それをLIQUID PRESS CORPORATEの元テーマからfooter.phpをコピーして
子テーマにこのfooter.phpファイルを作ります。

私はレンタルサーバーはロリポップを使用させていただいるので
その管理画面からFTPサーバー上のファイルをカスタマイズする方法をとっています。

それで、下記の部分の青枠内にある【<?php echo home_url(); ?>】を指定したいロゴのURLに変更すると
タイトル画像変更01

<a href=”ご自分の指定したい画像のURL” という記述になり

フッターロゴの機能はそのままに、画像だけ変更することができます。

備忘録として、忘れないうちにと急に書き出したんですが
後日画像なども含めてもうちょっと分かりやすくする予定です。

スポンサーリンク


スポンサーリンク