Lightning ヘッダーロゴを大きくしたい

この記事のURLとタイトルをコピーする

この記事を読むのに必要な時間は約 4 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

 WordPress無料テーマLightningでヘッダーロゴを入れたときに小さいなーって思った方も少なくないと思います。このヘッダーロゴを大きくできる方法ないですかという要望がありましたのでその方法について解説していきます。
ヘッダーロゴ

 目 次 

ヘッダーロゴについて

サイトタイトル
 WordPress無料テーマLightningの場合は、本来サイトタイトルがある場所に自社ブランドの画像を配置することができるように設計されています。[ 外観 → カスタマイズ → Lightningデザイン設定 ]を開くとヘッダーロゴをアップロードできるようになっています。

ヘッダーロゴ画像サイズ

ヘッダーロゴアップロード
上記の場所にロゴ画像をアップロードすればよいのですが、初期設定のサイズは、280px X 60px と小さいサイズになっています。他社のロゴなどもよく見ますがたいてい高さが100px前後のものが多いですね。
画像サイズ
上記が画像サイズを拡大したものになります。
画像作成は、等倍にしたサイズで作成して縮小した方がいいですね。

ヘッダーロゴを大きくする方法

大きくする方法
基本的に横幅よりも高さを大きくするという感じになります。

CSS記述場所

スタイルシートの記述場所は、人によっていろいろですが今回は、3箇所紹介します。
 

スタイルシートの記述場所

子テーマのstyle.css

子テーマstyle.css
こちらは、ローカルで編集する場合はこのように Windowsの場合はTerapadで編集します。
また、style.cssは、外観→テーマの編集でもカスタマイズ可能です。

外観→カスタマイズ→追加CSS

追加CSS
外観→カスタマイズ→追加CSSの末尾に挿入します。

VK ExUnitのCSSカスタマイズ

VK ExUnit CSSカスタマイズ
VK ExUnitのCSSカスタマイズで記述する方法もあります。


 

チャンネル登録

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
LINEスタンプ
LINE@友だち追加
Vektor WordPress Solutions
Vektor WordPress Solutions

くまはちLABのご利用ありがとうございます!
くまはちLABの最新情報をフォローしてゲットしてください!