今回は「ヘッダーロゴの配置を変えるカスタマイズCSS」を解説していきます。
この記事で紹介するソースコードは、ソースコード右上のCopyボタンを押すと簡単にコピペできます。
それでは見ていきましょう!
- CSSの記述は「外観」→「テーマファイルエディター」から
- 必ず「Cocoon Child」の「style.css」を編集する
- この記事のソースコードをコピペして、好みに合わせて数値を調整すればOK
CSSの記述場所
カスタマイズの前に、cocoonの子テーマのインストールをお願いします!
CSSを記述する場所ですが、まず「外観」→「テーマファイルエディター」と進みます。
この場所で、Cocoon Child(子テーマ)の スタイルシート (style.css)を編集していきます。
![](https://komugi-rainyday.com/wp-content/uploads/2022/05/1108773_xqVJtIGt-removebg-preview-e1651243757243-300x300-1-e1651545849761-150x150.png)
「編集するテーマ選択」は必ず「Cocoon Child」を選びましょう
![](https://komugi-rainyday.com/wp-content/uploads/2022/04/fefa4b6d08f87d5c8fd3f2cc575ee530.png)
![](https://komugi-rainyday.com/wp-content/uploads/2022/04/fefa4b6d08f87d5c8fd3f2cc575ee530.png)
「外観」→「カスタマイズ」→「追加CSS」からでも、CSSを記述できます。しかし、「追加CSS」のエディターは画面幅が狭くて見づらい上に、コメントアウト(/~/で囲まれた部分)があるとエラーとなる場合があります。特にこだわりがなければ、テーマファイルエディターのstyle.cssに記述するのがオススメです。
もしCSS編集でエラーが出たら、こちらの記事も見てみてください。
![](https://komugi-rainyday.com/wp-content/uploads/2022/05/d146c4556fabb18c278f8e91626c4f17-300x185.png)
![](https://komugi-rainyday.com/wp-content/uploads/2022/05/d146c4556fabb18c278f8e91626c4f17-300x185.png)
ヘッダーロゴ画像のカスタマイズ
ヘッダーロゴ画像の表示サイズ指定
ヘッダーロゴ画像を表示する際の、幅・高さをそれぞれ指定するCSSです。
.logo-header img {
width: auto;
height: auto;
}
「auto」の部分を、「300px」のように好きなサイズに書き換えてください。
widthとheightが両方autoの場合、ヘッダーロゴ画像がそのままのサイズで表示されます。
幅か高さ、どちらか一方だけ数値を指定することもできます。
その場合、指定しなかった方のサイズは、画像の縦横比を保つように自動で決定されます。
極端な例として「width: 1000px; height: auto;」と指定したときの、PCでの見た目がこちら。
![width:1000pxにした場合](https://komugi-rainyday.com/wp-content/uploads/2022/04/1207ead54f07be157f8b1c1ce3f4cbe1-e1651321096485-1024x370.jpg)
![width:1000pxにした場合](https://komugi-rainyday.com/wp-content/uploads/2022/04/1207ead54f07be157f8b1c1ce3f4cbe1-e1651321096485-1024x370.jpg)
グローバルメニューの文字サイズに対して、ロゴが相当大きいですね。
モバイル版ヘッダーロゴ画像のサイズ調整
![](https://komugi-rainyday.com/wp-content/uploads/2022/04/y0416-e1651242726532-150x150.png)
![](https://komugi-rainyday.com/wp-content/uploads/2022/04/y0416-e1651242726532-150x150.png)
![](https://komugi-rainyday.com/wp-content/uploads/2022/04/y0416-e1651242726532-150x150.png)
PCで見るといい感じなのに、スマホだとなんだかロゴが大きく見える…
ということがあったので、それを解決するCSSです。
@media screen and (max-width: 480px){
.logo img {
height: 45px !important;
margin: .5em auto;
}
}
CSSの文法の説明は省略します。
「height: 45px」の部分の数値を変更することで、ロゴの高さを指定することができます。
60px未満の値を指定すると小さめになると思います。
![](https://komugi-rainyday.com/wp-content/uploads/2022/04/1108773_xqVJtIGt-removebg-preview-e1651243757243-150x150.png)
![](https://komugi-rainyday.com/wp-content/uploads/2022/04/1108773_xqVJtIGt-removebg-preview-e1651243757243-150x150.png)
![](https://komugi-rainyday.com/wp-content/uploads/2022/04/1108773_xqVJtIGt-removebg-preview-e1651243757243-150x150.png)
微調整は、スマホやタブレット端末で実際に確認しながら試してくださいね
heightの値を指定したら、幅や余白は、端末画面の大きさに合わせていい感じに自動で調整されます。レスポンシブ対応というやつです。
ヘッダーロゴ周りの余白
「padding: 」のあとに続く4つの数値で、時計回りに上右下左の余白を指定できます。
.logo-header {
padding: 10px 0px 10px 0px;
}
ヘッダーロゴ画像が特に大きくなければ、左右の値は0pxで大丈夫だと思います。
一応、特にモバイル版で、実際に確認しながら調整してみてください。
- 「padding: 10px 0px 10px 0px;」としたときのモバイル表示(画像の横幅=スマホ画面の横幅です)
![padding: 10px 0px 10px 0px;](https://komugi-rainyday.com/wp-content/uploads/2022/04/886-e1651331320854.jpg)
![padding: 10px 0px 10px 0px;](https://komugi-rainyday.com/wp-content/uploads/2022/04/886-e1651331320854.jpg)
- ロゴ上の余白を50px、右下左を0pxにしたときのモバイル表示
![padding: 50px 0px 0px 0px;](https://komugi-rainyday.com/wp-content/uploads/2022/04/887-e1651331382447.jpg)
![padding: 50px 0px 0px 0px;](https://komugi-rainyday.com/wp-content/uploads/2022/04/887-e1651331382447.jpg)
ヘッダーの文字の太さ
最後に、ヘッダーロゴ画像を設定していない場合のカスタマイズです。
このCSSでヘッダーの文字を太字にできます。
.site-name-text{
font-weight: bold;
}
太さを指定する場合は、次のように数値を書いて調整してください。
.site-name-text{
font-weight: 900;
}
今回は、ヘッダーロゴの表示サイズ・配置のカスタマイズ方法を解説しました。
今後ともよろしくお願いいたします(^^)/
コメント