広告 WordPressテーマ

賢威ヘッダーロゴをカスタマイズ！思い通りの位置に設定してみた

賢威8ヘッダーロゴのカスタマイズ

ブログのヘッダーにあるロゴは、全ページに表示される重要な場所です。

賢威8の初期設定で表示されるテキストロゴでは、個性のないブログになってしまいます。

賢威の評判を悪くしたくありません！

そこで、「ヘッダーロゴをテキストから画像にする」「ロゴ画像の位置を真ん中にする」2つのカスタマイズを解説します。

[cc id=1691 title="賢威CTA"]

もくじ
  1. 賢威8のヘッダーにロゴ画像を設置する方法
  2. ロゴ画像のおすすめサイズ
  3. ヘッダーロゴをカスタマイズ

賢威8のヘッダーにロゴ画像を設置する方法

賢威8で作ったサイトにロゴ画像を設置する方法は、次の流れのとおりです。

  1. STEP1
    「賢威の設定」
    賢威8「賢威の設定」WordPress管理画面の左メニュー「賢威の設定」をクリックした移行する先で、ロゴ画像の設定が可能です。
  2. STEP2
    ロゴ画像アップロード

    賢威8のロゴ画像をアップロードロゴ画像の項目から「画像をアップロード」をクリックして、ロゴに設定した画像を選択します。

    賢威の設定「ロゴ画像」無事にロゴ画像がアップロードされたら、上の画像のように表示されますが、まだ完成ではありません。

    賢威の設定を保存賢威の設定の最下部にある「変更を保存」をクリックしてください。ロゴ画像がブログに反映されます。

  3. FINAL STEP
    ロゴ画像表示の完成
    賢威8のヘッダーロゴ設置の完成ロゴの初期表示がテキストだったのが画像に変更されて完了です。

賢威8はとても簡単にロゴが設定できるため、すでに完成されているが大半でしょう。では、適切なサイズでロゴ設定できているのでしょうか？

ロゴ画像のおすすめサイズ

賢威8で設定するロゴ画像のおすすめサイズは、横幅400px×縦幅100px以内が良いでしょう。

ロゴ画像の縦幅が150pxを超えてくると、高さ660pxほどの画面の小さなiPhone SEでは4分の1以上を占有してしまいます。

PC表示ではあまり大きく感じなかったロゴ画像でも、スマホ表示では記事が読みにくくなっている可能性があります。

スマホで検索するユーザーがかなり増えていますので、賢威8で作ったサイトは必ずスマホで確認してください。

ロゴ画像の横幅は、ブログ全体のPC表示が1カラムの場合は470pxまで、2カラムの場合は580pxまでとなります。

賢威8のbase.cssに「max-width: 50%;」の記述があるためです。

また、スマホ表示の横幅は機種にもよりますが約375px～410pxで、50pxで表示されるグローバルメニュー「≡」を差し引くと350px前後です。

ですので、ロゴ画像でバランスの良い適正サイズは360px×60pxと考えます。

ロゴ画像がぼやける時の対処法

ブログに設定しているロゴ画像がぼやけて表示されてしまう場合は、登録していた画像より2倍や3倍大きい画像が必要です。

写真や画像をキレイに表示する高精細ディスプレイ、例えばMacBookやiPhoneなどのRetinaディスプレイは、簡単に言うと密度の濃いディスプレイです。

密度の濃いディスプレイで、今までの画像サイズでは小さく表示されてしまうところ、引き延ばして表示するためぼけてしまいます。

ボケているロゴ画像

ロゴ画像を編集する前に、iPadのRetinaディスプレイで表示したのが上の画像です。

ちゃんブロ工房の文字がボケている状態で、すっきりとしません。

そこで、360px×60pxだったロゴ画像を約2倍の「700px×120px」で新たに作成して、下記のコードを追加CSSに記述します。

.site-title a img{
	width: 100%;
	max-width: 350px;
}

Retinaディスプレイでもボケていないロゴ画像

無事にボケていないスッキリとしたロゴ画像が表示されました。

あまりにも大きな画像を設定してしまうと、ブログの表示が遅くなってしまう可能性があるので、通常の3倍までの大きさに抑えたロゴ画像を作成しましょう。

ヘッダーロゴをカスタマイズ

賢威8で設定したロゴ画像は、PC表示の初期設定ではヘッダー左寄せで表示されます。

ヘッダー右側には、賢威の設定「サイトの簡単な説明」を記述していれば表示されますが、未記入なら大きな空白となります。

[cc id=12]私は設定していません！[cc id=653]

大きな空白を埋めるために、次のロゴのカスタマイズを解説します。

ロゴのカスタマイズ方法
  • ロゴ画像の中央寄せ
  • ヘッダー背景色を変更

ロゴ画像を中央寄せにする

ロゴ画像を中央に表示する方法は、下記のコードを追加CSSかbase.cssに記述するだけです。

.keni-header .site-title, .keni-header_col1 .site-title {
   float: none;
   max-width: 100%;
   text-align: center;
}

ヘッダーロゴを中央寄せにカスタマイズ

ヘッダーロゴが中央寄せができましたが、グローバルメニューが左寄せに表示されたままが気になる場合は、下記コードも追記しましょう。

/*グローバルメニューの中央寄せ（PC）*/
@media (min-width : 768px){
	.keni-gnav_inner ul {
		margin-left: auto;
		margin-right: auto;
	}
}

あと、賢威8のスマホ表示には横幅50pxのハンバーガメニュー「≡」が右側に表示されるので、ロゴ画像が若干左にズレます。

スマホ表示でもロゴを中央寄せにする場合は、下記のコードも追記します。

@media (max-width: 480px){
	.keni-header{
		padding-left: 50px;
	}
}
.keni-header_cont{
	display: none;/*簡単な説明を非表示*/
        padding: 0;
}

スマホ表示でもロゴ画像を中央寄せ

PCとスマホの両方でロゴ画像の中央寄せが完了です。

ヘッダー全体の背景色を変更する方法

賢威8のヘッダー背景色は白色なので、ブラウザ幅いっぱいにロゴ画像を表示すれば好みの色に変更できます。

ただ、横幅いっぱいに表示するロゴ画像は容量が重くなり、ページの表示速度が遅くなる可能性があります。

なので、ヘッダーの背景色を好みの色に変更した上で、透過処理されたPNGのロゴ画像を設定するのがおすすめです。

ヘッダー背景色を変更するために、下記のコードを追加CSSに記述してください。

.keni-header_wrap/*ヘッダー全体*/, 
.keni-gnav_btn/*スマホのグローバルメニュー*/{
	background-color: #b3e4e6;/*お好みの色を指定*/
}
賢威8ヘッダー背景色をカスタマイズ

ヘッダーの背景色を変更して透過PNGのロゴ画像を設定したスマホ表示

殺風景だったちゃんブロ工房のヘッダーロゴも、多少はオシャレにカスタマイズできたかもしれません。

賢威8ヘッダーロゴのカスタマイズは簡単なので、ぜひ試してみてください。

別のページでは、トップページにのみ設定できる賢威のヘッダー画像について紹介していますので、参考にしてください。

賢威8の使い方は、下記の記事で分かりやすく解説しています。

[myphp file='scode_keni-smp-ad']

-WordPressテーマ
-,