Cocoonのタイトルロゴのサイズが大きい！
タイトルのロゴ画像の大きさを変えれないかしら…
このような思いをお持ちの方はいませんか？
実は、簡単なソースコードでタイトルロゴの大きさを変更することができます。ソースコードを初めて編集する初心者の方でも比較的、楽に作業を終えることができます。
そこで、最もシンプルで簡単なタイトルロゴの大きさの変更方法を解説します。
ソースコードを編集する手順
ソースコードを編集する手順は以下の通りです。
Word Pressの左のメニューの以下の項目の順に開きましょう。
- 外観
- テーマファイルエディター
- スタイルシート（style.css）← ソースコードを記述
このスタイルシート（style.css）の中にソースコードを記述していきます。
ソースコードを記述する場所
Cocoonのスタイルシート（style.css）は大きく２つに分けることができます。
一つ目は、
- パソコンの見た目を編集するための場所
二つ目は、
- レスポンシブデザインの見た目を編集するための場所
【パソコン】タイトルロゴのサイズの変更
パソコンの見た目を編集するために以下のソースコードを貼り付けます。
/************************************
** 子テーマ用のスタイルを書く
************************************/
.site-logo-image{
width:300px; /*横幅を指定*/
height:auto; /*縦幅を可変*/
}横幅を好みの数字にすることでお好きなロゴ画像の大きさへと調整することができます。
続いて、スマートフォン向けにタイトルロゴを調節してみましょう。
【スマートフォン】タイトルロゴのサイズの変更
レスポンシブデザイン用のメディアクエリは、そのタブレットやスマートフォン端末のサイズに沿うように以下のように４つに分けられています。
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
/*必要ならばここにコードを書く*/
}
/*1030px以下*/
@media screen and (max-width: 1030px){
/*必要ならばここにコードを書く*/
}
/*768px以下*/
@media screen and (max-width: 768px){
/*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}それぞれの意味は《max-width》に注目して頂けると、《max-widht：〇〇〇px》の数値（値）以下より小さくはならないという意味を持っています。
また、《@media screen and》は文字通り、スクリーン（画面）を指す言葉でメディアクエリーの結果に基づいて以下の記述を適用する際に利用されています。
- max-widht：〇〇〇px;
つまり、《@media screen and（max-width：480px）》は480px以下の画面サイズに適用されるソースコードとなります。
スマートフォン向けにタイトルロゴのサイズを変更すると、
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
/*必要ならばここにコードを書く*/
}
/*1030px以下*/
@media screen and (max-width: 1030px){
/*必要ならばここにコードを書く*/
}
/*768px以下*/
@media screen and (max-width: 768px){
/*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
.site-logo-image{
width:150px; /*横幅を指定*/
height:auto; /*縦幅を可変*/
}
}より細かくタイトルロゴの大きさを変更したい場合は、各メディアクエリ内へと以下のソースコードを入力します。基本的には、横幅を変更するだけでバランスよく適用されます。
.site-logo-image{
width:150px; /*横幅を指定*/
height:auto; /*縦幅を可変*/
}タイトルロゴの大きさを変更してみよう！
個人、企業サイトの面とも呼べるタイトルロゴ。
歪んでいたり、大きすぎたり、小さすぎたり…、バランスが悪かったら困りますよね。
そんなお悩みをお抱えの方はタイトルロゴのサイズを変更してみてはいかがでしょうか。
コメント