ロゴ画像の表示サイズ調整

WordPressテーマ『HIGHLAND』では、ヘッダーエリア・フッターエリアのブログタイトルにロゴ画像を設定できます。
ここでは、子テーマを編集してロゴ画像の表示サイズを調整する方法についてご案内します。
ロゴ画像の表示サイズを調整する
テーマ編集画面へ
WordPressダッシュボードにて、「外観」→「テーマの編集」へと進みます。
子テーマのスタイルシート(style.css)を見て頂けると分かりますが、ソースコードの29行目あたりから「ヘッダーロゴ」「フッターロゴ」という箇所があります。
ここで、ヘッダー・フッターそれぞれのロゴ画像に関する設定を行います。
コメントアウトを外す
最初の状態では、ソースコードはコメントアウトされています。
まずはじめに最初と終わりの「/*」と「*/」を削除してソースコードを有効にしてください。
コメントアウトとは?
コメントアウトとはソースコードを特定の記号で囲うなどして、その範囲のコードを機能しないようにすることです。CSSの場合は、コメントアウトしたい部分を「/*」と「*/」で囲みます。
ロゴ画像用のCSSを編集する
コメントアウトを外すと、CSSは以下のようになります。
/*------------------------------------------------------------
ヘッダーロゴ
------------------------------------------------------------*/
@media (min-width: 769px) {
#header .header_inner .logo { width: 0px; }
}
@media (min-width: 481px) and (max-width: 768px) {
#header .header_inner .logo { width: 0%; }
}
@media (max-width: 480px) {
#header .header_inner .logo { max-width: 0%; }
}
/*------------------------------------------------------------
フッターロゴ
------------------------------------------------------------*/
@media (min-width: 769px) {
#footer .contact .footer_logo { max-width: 0px; }
}
@media (min-width: 481px) and (max-width: 768px) {
#footer .contact .footer_logo { max-width: 0%; }
}
@media (max-width: 480px) {
#footer .contact .footer_logo { max-width: 0%; }
}
メディアクエリを利用して、ウィンドウサイズが
- 769px以上
- 481px以上768px以下
- 480px以下
の3つのポイントでロゴ画像の表示サイズが切り替わるようになっています。
ここでwidthまたはmax-widthプロパティの値を、ご自分のブログのロゴ画像に合わせて調整してください。
必要であればそれ以外のプロパティを追記することも可能です。
編集が終わったら、最後に忘れずに「ファイルを更新」ボタンをクリックしましょう。
この記事を気に入ったら
いいね!&フォローしよう最新情報をお届けします