賢威でヘッダータイトルを画像に変更するカスタマイズ方法・サイズはどれぐらいがいい?

ヘッダー 画像

どーも、ダンゴです( ̄▽ ̄)ノ

このたびブログデザインの変更に伴って、
ヘッダーを画像にしてみました。

そこまで気に入ってないのでまた変えるかもしれませんが、
変更方法を書いておきたいと思います(^^)

ヘッダーを画像にする理由・メリットは?

ヘッダー 画像

今回変えるのはこの赤丸で囲った部分。

実際に他のサイト・ブログを見てもらえれば分かると思いますが、
ほとんどこのヘッダー部分が画像になっていませんか?

ではなぜみんなヘッダーを画像にするのか。

まずはこの部分からお話しますね(^^)

一般的に読者さんはWebサイトを見たときに、
3秒でそのページを閉じるか読み続けるかを判断する
と言われています。

「3秒!?短ッ!!Σ( ̄□ ̄;)」

って思うかもしれませんが、
実際にあなたに当てはめたとき、
3秒数えながらネットサーフィンしてもらうと
だいたいそんなもんだと思います( ̄▽ ̄)ノ

ですが、3秒で見れる範囲って限られてますよね?

なので、1番最初に読者さんの目に入る
ヘッダー部分が大事になってくるんです。

文字だけよりも画像があったほうが
当然多くの情報量を伝えられるので、
ヘッダーを画像にしているサイトが多いんですね(^^)

ヘッダーを画像に変更する手順

というわけで、
ヘッダーを画像に変更する手順について説明していきますが、

僕は「賢威(けんい)」というテンプレートを使っているので、
他のテンプレートでは微妙にやり方が違うと思いますが
ご了承くださいm(_ _)m

まず、ヘッダーにしたい画像を用意して、
「メディア」⇒「新規追加」からアップロードします。

画像のサイズですが、
僕は「950px × 156px」にしました(^^)

画像URL

アップロード出来たら、
画像URLをコピーします。

次に「外観」⇒「テーマの編集」から
「テーマヘッダー(header.php)」を開いて、
以下の部分を変更し、先ほどコピーしたURLを貼り付けます。

<!--▼ヘッダー-->
<div id="header">
<div id="header-in">

<div id="header-title">
<h1><a href="<?php bloginfo('url'); ?>"><img src="画像URL" alt="<?php bloginfo('name'); ?>"></a></h1>
</div>

</div>
</div>
<!--▲ヘッダー-->

これでヘッダーが画像になります\(^o^)/

このやり方ならクリックしてホームへ飛ぶし、
ちゃんとh1タグも入っているのでオススメです。

今回の記事はこちらを参考にさせていただきました(^^)
もしダンゴの説明でわからなかった場合はこちらをご覧ください。

賢威6.1ヘッダーテキストを画像に変更する設定

良い記事だと思ったらシェアしていただけると喜びます^^

質問や感想などお気軽にどうぞ^^

サブコンテンツ

このページの先頭へ