一番最初に目に入るからです。
あまりギラギラだとコンテンツや広告が目立たないので、
邪魔にならない程度にいい感じのヘッダーロゴ画像を推奨。
ヘッダーのサイト名ロゴを画像にする
私はヘッダー画像を設定していません。
いずれは、イラストをプロに依頼して、
それをサイトに載せようかと思っています。
今はそんなお金もないのでやっていません。
（そこまで高額でも無いのかな）
フリーフォントでヘッダー画像のロゴ作成
まずは、ヘッダーにある、
サイト名。
これを、ロゴみたいにアレンジするのが良いですね。
Windowsのペイントで自作してもいいですが、
便利なサイトがありました。
IEで利用して下さい。
Chromeではうまく表示されませんでした。
フリーフォントで簡単ロゴ作成
http://lightbox.on.coocan.jp/html/fontImage.php
フリーフォントというものがあるんですね。
世間にはフリー画像もイラストもあるし、フォントもあるわけです。
実際に使われている方が、
細かい設定を載せています。
参考にされると良いでしょう。
サイトのヘッダー画像作成方法 ヘッダーロゴを無料で簡単に作ろう
http://xn--eckwa3d3b3a2j.net/post-775/
参考までに。
幅は300くらい。
高さは50～100くらい。
Stinger5では、300pxを超える画像はリサイズされるそうです。
700pxの画像で試してみたら、
確かに300pxにリサイズされて表示されてしまいました。
300pxより大きい画像を使う場合は
CSSのカスタムが必要になります。
（例）
header .sitename img {
max-width: 100%;
}
これでOKです。
文字サイズは40前後。
透過PNGにすると、背景がヘッダーの色になるのでキレイです。
参考にしたサイト
[STINGER5]ブログタイトルをロゴ画像に置き換えるテクニック
http://www.love2labo.com/stinger_logo
ヘッダーロゴ画像を設定する、WordPress
Stinger5での設定の仕方ですが、
管理画面からできます。
初級者向けです。
外観→
ヘッダー→
ロゴ画像
です。
スマホでもロゴ画像を表示させたいときは、
スタイルシートに
/*レイアウト スマートフォン
----------------------------------------------------*/
～
#gazou {
display: none;
}
このようなコードがあります。
以下に変更します。
#gazou {
height: auto;
max-width: 100%!important;
}
でOKです。
ヘッダーphpに直接ヘッダー画像を指定するコード記入
または、直接phpに書き込んでもOKです。
この場合は、
<div id="gazou">
の影響を受けない為、
スマホでも普通に表示されますよ。
こっちの方が中級者向けです。
まず、
子テーマのimegesにロゴ画像をアップロードしておいて下さい。
header.php→
以下のコードを探します。
<!-- ロゴ又はブログ名 -->
<p class="sitename"><a href="<?php echo home_url(); ?>/">
<?php bloginfo( 'name' ); ?>
</a></p>
これを以下のように変更します。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
<!-- ロゴ又はブログ名 -->
<p class="sitename"><a href="<?php echo home_url(); ?>/">
<?php bloginfo( 'name' ); ?><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/画像なまえ.png" alt="" />
</a></p>
これで、ロゴ画像をクリックしたらトップページに戻れます。
あと、ロゴ画像と、サイト名のテキストは両方表示されます。
見た目的にはうっとうしいですが、
SEOの事を考えた時、
<?php bloginfo( 'name' ); ?>
があった方が、Google bot的に分かりやすそうで、良い気がする…。
多分。
スタイルシートの
header .sitename {
font-size: 30px;
}
の箇所で、サイズを小さくすれば、
そんなに気にならないですよ。
また、ホバー時の色を変更させないようにしても良いですね。
逆にロゴ画像はホバーリングで色を反転させると
ユーバーが分かりやすいです。
CSSは…
header .sitename a:hover img {
-moz-opacity: 0.5;
opacity: 0.5;
}
このように、
ロゴ画像の方が目立つようにカスタマイズして下さい。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク