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

2018.05.19 2018.05.21その他の設定
ロゴ画像の表示サイズ調整

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プロパティの値を、ご自分のブログのロゴ画像に合わせて調整してください。

必要であればそれ以外のプロパティを追記することも可能です。

編集が終わったら、最後に忘れずに「ファイルを更新」ボタンをクリックしましょう。

HIGHLANDをダウンロード

柴田竹思

柴田竹思

WordPress案件を得意とするWebクリエイター。ベトナム在住。大手企業や教育機関などの大規模制作案件、フリーランス・個人事業主のスタートアップから売上を伸ばしていくお手伝いなど、わりと幅広くWeb関連の仕事をしています。