この記事の所要時間: 832

賢威7のヘッダー画像を変更する方法を画像と動画で徹底解説

賢威7のヘッダー画像を変更する前に


賢威7のカスタマイズをする上で、やはり何よりも目立つカスタマイズといえば、ヘッダー画像の変更でしょう。

ブログの訪問者は第一印象で、そのブログを見るか見ないかを判断すると言われており、その第一印象を決めるのが、まさにブログの顔である、ヘッダー画像なのです。

どんなに細かいカスタマイズをしても、ヘッダー画像で興味を惹きつけることが出来なければ訪問者の足を止めることはできません。

また、賢威7においても同じで、たとえ検索エンジンで上位に表示されてアクセスを集めたところで、そこから先のアクションを訪問者に起こしてもらうためには、やはり特徴的なヘッダー画像に変更する必要があるということです。

なお、私がご紹介している賢威の特典として、あなただけのオリジナルヘッダー画像を作成してプレゼントさせていただきますので、是非ともご活用ください。

これまで3年間で8回も賢威を大幅にリニューアルしたり、賢威のカスタマイズに関して、200名以上の方をサポートをしてきた実績から、賢威のサポートなら誰にも負けない自信があります。


あなたも賢威のカスタマイズを本気で極めてみませんか?


それでは賢威7のヘッダー画像の変更方法について詳しく解説していきます。

賢威7のヘッダー画像を変更する方法


賢威7のヘッダー画像の変更は、すべてWordPressのダッシュボード経由で行うことができますので、それほど難易度は高くありません。

まず最初に変更するヘッダー画像をWordPressにアップロードしておく必要がありますので、Wordpressの画像アップロード方法が分からない場合には、下記の記事をご覧ください。


WordPressに画像をアップロードして、画像のURLを取得する方法を画像と動画で徹底解説


なお、賢威7でヘッダー画像を設定する場合、横幅は1000ピクセル(画像高さは自由)にすると綺麗に表示されます。

ヘッダー画像をアップロードしたら、ダッシュボードの左メニューにある【賢威の設定】にマウスカーソルを合わせて、その中に表示された【賢威の設定】をクリックします。

※クリックで画像が拡大します。
賢威7のヘッダー画像を変更する方法を画像と動画で徹底解説

次に、そのページの中にある【ロゴ画像】という場所がありますので、そこにある【画像を設定する】というボタンをクリックします。

※クリックで画像が拡大します。
賢威7のヘッダー画像を変更する方法を画像と動画で徹底解説

すると画像をアップロードする画面が表示されますので、上部にある【メディアライブラリ】をクリックして、アップロード済みのヘッダー画像を選択してください。

※クリックで画像が拡大します。
賢威7のヘッダー画像を変更する方法を画像と動画で徹底解説

画像をアップロードすると、細かい設定ができる画面が表示されますので、【配置】を中央に設定して、サイズを【フルサイズ】に設定します。

※クリックで画像が拡大します。
賢威7のヘッダー画像を変更する方法を画像と動画で徹底解説

最後に最下部にある【投稿に挿入】をクリックして、アップロードした画像が表示されていればヘッダーの設定は完了しましたので、最下層にある【設定を保存】をクリックしてください。

※クリックで画像が拡大します。
賢威7のヘッダー画像を変更する方法を画像と動画で徹底解説

通常であれば、これで問題なくヘッダー画像が変更されているのですが、先ほど【配置】で設定したはずの【中央】が適応されておらず、ヘッダー画像が左に寄ってしまっている場合があります。

※クリックで画像が拡大します。
賢威7のヘッダー画像を変更する方法を画像と動画で徹底解説

もし上記のように画像が左に寄ってしまっている場合には、賢威7のソースコードを直接編集する必要がありますので、ダッシュボードの左メニューから【外観】の中にある【テーマの編集】をクリックして、今度は右側のソースコード一覧の中から【テーマヘッダー(header.php)】をクリックします。

※クリックで画像が拡大します。
賢威7のヘッダー画像を変更する方法を画像と動画で徹底解説

ここで表示されたソースコードの真ん中あたりに、

<h1 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php echo (the_keni('site_logo') != "") ? "<img src=\"".the_keni('site_logo')."\" alt=\"".esc_html(get_bloginfo('name'))."\" />": esc_html(get_bloginfo('name'));  ?></a></h1>

という箇所がありますので、下記のソースをコピーして上書きをします。

<div align="center">
<h1 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php echo (the_keni('site_logo') != "") ? "<img src=\"".the_keni('site_logo')."\" alt=\"".esc_html(get_bloginfo('name'))."\" />": esc_html(get_bloginfo('name'));  ?></a></h1>
</div>

上書きが完了したら、最下部にある【ファイルを更新】をクリックします。

これでトップページのヘッダー画像のみが中央に移動しましたが、これだけではトップページ以外のヘッダー画像は左に寄ったままですので、すべてのページで反映させるために、もう少しソースコードを書き換えていきます。

先ほど上書きしたソースコードのすぐ下に、

<p class="site-title"><a href="<?php bloginfo('url'); ?>"><?php echo (the_keni('site_logo') != "") ? "<img src=\"".the_keni('site_logo')."\" alt=\"".get_bloginfo('name')."\" />": get_bloginfo('name');  ?></a></p>
<?php } ?>

というソースコードがありますので、こちらも同様に下記のソースコードをコピーして上書きしてください。

<div align="center">
<p class="site-title"><a href="<?php bloginfo('url'); ?>"><?php echo (the_keni('site_logo') != "") ? "<img src=\"".the_keni('site_logo')."\" alt=\"".get_bloginfo('name')."\" />": get_bloginfo('name');  ?></a></p>
<?php } ?>
</div>

上書きが完了したら、最下部にある【ファイルを更新】をクリックします。

これで全てのページで表示されるヘッダー画像を中央に寄せることができましたので、無事にヘッダー画像の変更が完了しました。

賢威7のヘッダー画像を変更方法を動画で解説


それでは賢威7のヘッダー画像の変更方法を動画で詳しく説明していきます。

賢威7のインストール方法


賢威7のヘッダー画像を変更方法まとめ


今回はヘッダー画像の変更をする方法をご紹介しましたが、ヘッダー画像の変更自体はそれほど難しくはありません。

ただ、通常であればロゴの設定だけで問題なくヘッダーを中央に表示させることができるはずなのですが、なぜか左寄せになってしまうことが多く、これを解決するために直接ソースコードを書き換えるのが少し面倒です。

とはいえ、こちらでご紹介した対処法であれば問題を解決することができますので、動画を見ながら同じように進めてください。

これで賢威7のテンプレートにオリジナルのヘッダー画像を変更することができましたので、ここからカスタマイズを本格的に実施して、あなただけの差別化されたオリジナルブログを構築していきましょう。

他にも賢威7のカスタマイズ方法を動画と画像で徹底的に解説していますので是非ともご覧いただき、あなたの賢威7カスタマイズにお役立てください。


賢威7のカスタマイズ方法を画像と動画で徹底解説


本日も最後までお読みいただきありがとうございました!

【完全無料】話題沸騰の史上最強の初心者向け企画!
アフィリエイト初心者のための覚醒メールセミナーNEO

分からないことは今すぐに解決してください!
ネットビジネスで分からないことをナオトに質問する

よく読まれている関連記事をご紹介します!