>WordPressテーマ賢威ヘッダーロゴをカスタマイズ!思い通りの位置に設定してみた2022年9月22日ブログのヘッダーにあるロゴは、全ページに表示される重要な場所です。賢威8の初期設定で表示されるテキストロゴでは、個性のないブログになってしまいます。賢威の評判を悪くしたくありません!そこで、「ヘッダーロゴをテキストから画像にする」「ロゴ画像の位置を真ん中にする」2つのカスタマイズを解説します。賢威8で作ったサイトにロゴ画像を設置する方法は、次の流れのとおりです。STEP1「賢威の設定」WordPress管理画面の左メニュー「賢威の設定」をクリックした移行する先で、ロゴ画像の設定が可能です。STEP2ロゴ画像アップロードロゴ画像の項目から「画像をアップロード」をクリックして、ロゴに設定した画像を選択します。無事にロゴ画像がアップロードされたら、上の画像のように表示されますが、まだ完成ではありません。賢威の設定の最下部にある「変更を保存」をクリックしてください。ロゴ画像がブログに反映されます。STEPロゴ画像表示の完成ロゴの初期表示がテキストだったのが画像に変更されて完了です。賢威8はとても簡単にロゴが設定できるため、すでに完成されているが大半でしょう。適切なサイズでロゴ設定できているのでしょうか?ロゴ画像のおすすめサイズ賢威8で設定するロゴ画像のおすすめサイズは、横幅400px×縦幅100px以内が良いでしょう。SEでは4分の1以上を占有してしまいます。PC表示ではあまり大きく感じなかったロゴ画像でも、スマホ表示では記事が読みにくくなっている可能性があります。スマホで検索するユーザーがかなり増えていますので、賢威8で作ったサイトは必ずスマホで確認してください。ロゴ画像の横幅は、ブログ全体のPC表示が1カラムの場合は470pxまで、2カラムの場合は580pxまでとなります。50%;」の記述があるためです。スマホ表示の横幅は機種にもよりますが約375px~410pxで、50pxで表示されるグローバルメニュー「≡」を差し引くと350px前後です。ロゴ画像でバランスの良い適正サイズは360px×60pxと考えます。ロゴ画像がぼやける時の対処法ブログに設定しているロゴ画像がぼやけて表示されてしまう場合は、登録していた画像より2倍や3倍大きい画像が必要です。写真や画像をキレイに表示する高精細ディスプレイ、例えばMacBookやiPhoneなどのRetinaディスプレイは、簡単に言うと密度の濃いディスプレイです。密度の濃いディスプレイで、今までの画像サイズでは小さく表示されてしまうところ、引き延ばして表示するためぼけてしまいます。ロゴ画像を編集する前に、iPadのRetinaディスプレイで表示したのが上の画像です。ちゃんブロ工房の文字がボケている状態で、すっきりとしません。そこで、360px×60pxだったロゴ画像を約2倍の「700px×120px」で新たに作成して、下記のコードを追加CSSに記述します。350px;}無事にボケていないスッキリとしたロゴ画像が表示されました。あまりにも大きな画像を設定してしまうと、ブログの表示が遅くなってしまう可能性があるので、通常の3倍までの大きさに抑えたロゴ画像を作成しましょう。ヘッダーロゴをカスタマイズ賢威8で設定したロゴ画像は、PC表示の初期設定ではヘッダー左寄せで表示されます。ヘッダー右側には、賢威の設定「サイトの簡単な説明」を記述していれば表示されますが、未記入なら大きな空白となります。id=653]大きな空白を埋めるために、次のロゴのカスタマイズを解説します。ロゴのカスタマイズ方法ロゴ画像の中央寄せヘッダー背景色を変更ロゴ画像を中央寄せにするロゴ画像を中央に表示する方法は、下記のコードを追加CSSかbase.cssに記述するだけです。center;}ヘッダーロゴが中央寄せができましたが、グローバルメニューが左寄せに表示されたままが気になる場合は、下記コードも追記しましょう。auto;}}あと、賢威8のスマホ表示には横幅50pxのハンバーガメニュー「≡」が右側に表示されるので、ロゴ画像が若干左にズレます。スマホ表示でもロゴを中央寄せにする場合は、下記のコードも追記します。0;}PCとスマホの両方でロゴ画像の中央寄せが完了です。賢威8のヘッダー背景色は白色なので、ブラウザ幅いっぱいにロゴ画像を表示すれば好みの色に変更できます。横幅いっぱいに表示するロゴ画像は容量が重くなり、ページの表示速度が遅くなる可能性があります。ヘッダーの背景色を好みの色に変更した上で、透過処理されたPNGのロゴ画像を設定するのがおすすめです。ヘッダー背景色を変更するために、下記のコードを追加CSSに記述してください。殺風景だったちゃんブロ工房のヘッダーロゴも、多少はオシャレにカスタマイズできたかもしれません。賢威8ヘッダーロゴのカスタマイズは簡単なので、ぜひ試してみてください。別のページでは、トップページにのみ設定できる賢威のヘッダー画像について紹介していますので、参考にしてください。賢威8の使い方は、下記の記事で分かりやすく解説しています。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。...WordPressテーマ賢威のデザインがダサい理由!あなたが取るべき対処法とは?賢威のデザインをこよなく愛する管理人「ちゃん(@cyan_customizer)」です。賢威8でブログを始めて、ある程度記事が貯まってきたらやっておきたい設定が「グローバルメニューの設置」です。...WordPressテーマ賢威8のテーブル(表)の入れ方とカスタマイズ方法!アフィリエイトブログを運営していると、重宝するのが商品やスペックの比較表を作るためのテーブルですよね。そこで、賢威8でテーブル(表)を簡単に記事に入れる方法を紹介します。...WordPressテーマ賢威とアフィンガーの違いを徹底比較!どっちが優秀なWordPressテーマ?数多くあるWordPress有料テーマの中で、私は賢威8とアフィンガー6を複数ブログで愛用しています。雨の日ブログ運営者ちゃんブログの更新情報をTwitterでチェックする2014年から副業アフィリエイター!金融系2つを中心に高単価サイトを5つ運営中!本業を辞めずに、SEOについて記事を書き続けています。