僕は賢威６.２を愛用させていただいていますが、デフォルトの状態だとヘッダー部分はテキストで表示されています。

しかし、そのままの状態では少々インパクトに欠ける部分もあり、他サイトとの差別化もうまく図ることができないため、まずデフォルト設定から変更することをおすすめします。

 

幸い賢威はカスタマイズ性に優れたテンプレートですので、簡単にヘッダーを画像に変更することも可能です。

サイトに訪れたユーザーにインパクトのある印象を与えるためにも、今回を機にヘッダーを画像に変更してみましょう。

ヘッダー画像を中央寄せする方法も解説していくので、ぜひとも参照しながら設定を進めてみてくださいね。

 

ヘッダー画像を準備する

 

まずはヘッダーを画像に変更するにあたって、その素材を準備しましょう。

賢威６.２では、デフォルトの状態でサイトの横幅が950pxですので、画像もそのサイズに合わせて準備すると良いですね。

また、基本的にヘッダーはサイトの『顔』としての役割が大きいので、ユーザーが見やすいような縦横比率を考慮しながら画像を設定していきましょう。

 

ちなみに、賢威はサイト横幅をお好みで変更することもできます。

投稿部分やサイドバーの横幅も自由に変更できますので、もし必要であればこちらの記事をご参照ください。

 

ヘッダーを画像に変更する方法

 

今回は、コードを変更してヘッダー画像を設定していく方法を解説していきます。

 

まず、WordPressのダッシュボード画面から『外観』→『テーマの編集』→『テーマヘッダー（header.php）』を選択し、以下のようなコードを探しましょう。

 

上記のコード表の6行目にある

こちらのコードの後ろに、以下のコードを追加します。

 

コード内にある『画像URL』の部分をヘッダーにしたい画像URLに変更すれば、ヘッダー画像を設定することができます。

 

また、

こちらのコードを消去することにより、文字リンクが消えヘッダー画像のみを表示させることもできます。

 

ヘッダー画像を中央寄せする方法

 

さて、これでヘッダーを画像へと変更することができましたが、このままでは画像が左寄せの状態のまま。

見栄えを良くするという意味でも、ヘッダー画像を中央寄せに設定することをおすすめします。

とても簡単に設定することができるので、解説をもとに設定してみてくださいね。

 

それでは、まずWordPressのダッシュボード画面から『外観』→『テーマの編集』→『design.css』を選択し、以下のコードを探しましょう。

 

該当するコードが見つかったら、以下のコードを消去します。

 

消去することができたら、

こちらのコードの下に、以下のコードを追記しましょう。

 

これで無事に、ヘッダー画像を中央寄せに設定することができましたね。

僕は個人の好みでヘッダー画像をサイト幅いっぱいに表示させていますが、ぜひとも自分に合うヘッダー画像を自由に設定してみましょう。

 

最後に

 

以上、賢威６.２でヘッダーを画像に変更し、中央寄せする方法について解説しました。

無事に設定することができましたでしょうか？

 

賢威はスタイリッシュかつSEO効果大きく発揮する優れものなテンプレートではありますが、デフォルトのままでは少々お堅い印象を与えてしまうこともあります。

サイトに独自性を出していくことはSEO的にも効果があることですし、何より自分だけのサイトを構築していくとブログ運営も楽しくなっていくので、ぜひとも積極的にカスタマイズを施していきましょう。

コードに少し手を加えるだけで済むので、今回のヘッダー画像に関してもぜひとも変更してみてくださいね。

 

]]>

「自分らしく生きたい」と強く願うあなたへ。

「自分らしく生きたい」と強く願うあなたへ。