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

WordPressテーマ『HIGHLAND』では、ヘッダーエリア・フッターエリアのブログタイトルにロゴ画像を設定できます。

関連記事

ロゴ画像の設定

ここでは、子テーマを編集してロゴ画像の表示サイズを調整する方法についてご案内します。

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

テーマ編集画面へ

WordPressダッシュボードにて、「外観」→「テーマの編集」へと進みます。

子テーマのスタイルシート(style.css)を見て頂けると分かりますが、ソースコードの29行目あたりから「ヘッダーロゴ」「フッターロゴ」という箇所があります。

ここで、ヘッダー・フッターそれぞれのロゴ画像に関する設定を行います。

コメントアウトを外す

最初の状態では、ソースコードはコメントアウトされています。

まずはじめに最初と終わりの「/*」と「*/」を削除してソースコードを有効にしてください。

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

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

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

柴田竹思

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

デモサイト1のメインビジュアル設定

子テーマの編集方法