ブログ名をヘッド画像に差し替え！タップでホーム戻る設定方法

トップ画像をクリックしたらどのページに居てもトップ画面ホームに戻る設定方法です。ブログ名の文字の替わりに画像に置き換えてブログに個性を出してみよう！

今から設定する画像がブログの第一印象になります。あなたの性格や好み、キャラも出せるかも知れません。オリジナル画像にブログタイトルを設定してましょう！

• ヘッダーに使う画像の準備は整っていますか？
• テーマにあった画像サイズの準備はOK！？

ではさっそく、はじめましょう♪

デフォルトのトップ画像を削除する工程！

Stingerの場合は、ヘッダー画像があれば削除したいので、WordPressの管理画面の【ダッシュボード】へ向かってください。

【サイトをカスタマイズ】から、【ヘッダー画像】→【現在のヘッダー】より【画像を非表示】をクリックします。※【サイトをカスタマイズ】でも、【外観】→【ヘッダー】でも同じですね。

【保存して公開】をクリックしたら、画像が消えている事を確認してください。ヘッダー画像の設定を、一気に終わらせましょう！

ヘッダー画像をアップしてURLのコピー

ダッシュボードより→【メディア】をクリックしたらメディアライブラリが表示されます。WordPressのビジュアル画面で書いてる時、画像を挿入すると見られる画面です。

そこからヘッダに使う画像をクリックすると【添付ファイルの詳細】画面にいきますよねっ♪下記▼画像です。右手見てください。ファイルの【URL】があります。それをPCのメモ帳にでも、コピーしてください。

左サイドの【外観】→【テーマの編集】へ向かってください。そこで右手に【テンプレート】の下のほう【ヘッダー (header.php)】を選択してカスタマイズを始めます。

Stinger5（forLadys）のヘッダー (header.php)のブログ名を変えるコードを編集

header.phpのバックアップを取りましょう！間違ってしまったら、投稿ページが真っ白になって面倒です。間違ってエラーがでたら慌てず、手元のバックアップデータから復元してくださいね。

ヘッダー内に、<!– ロゴ又はブログ名 –>がありますので、Ctrl（コマンド）+Fキーで探してください。<!– ロゴ又はブログ名 –>の欄に下の文字列が書いてあります。

   <p class="sitename"><a href="<?php echo home_url(); ?>/">
    <?php if (get_option('stinger_logo_image')): //ロゴ画像がある時 ?>
    <img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url(get_option('stinger_logo_image')); ?>" />
    <?php else: //ロゴ画像が無い時 ?>
    <?php bloginfo( 'name' ); ?>
    <?php endif; ?>
    </a></p>

青く反転させて間違いないか確認できたら、次。さっきメモした画像のURLを、反転してるところにペーストするなど、慎重に、やりやすい方法で書き換えてください。

<a href="<?php echo home_url(); ?>/">
<a href="<?php echo get_option('home'); ?>/">
<img src="ここに、さっきコピーしたURLを貼る" alt="ブログ名"/>
</a></p>

さっき【コピーしておいた画像URL】を【src=”url”】に、【サイト名】は、【alt=”ブログ名”】と入れたら【ファイルを更新】クリック。

これでファイルの編集が完了しました。

下記が、ヘッダーをクリックしたらホームに戻る記載。
<a href=”<?php echo home_url(); ?>/”>
<a href=”<?php echo get_option(‘home’); ?>/”>

ブログで確認してください。

ちなみに色々紹介されてたコードがありました。それらを貼り付けてみたんですが、ヘッダーいっぱいの画像にならず左端にひっそり佇んでしまったりなかなか設定できなかったんです。でもこのコードで、成功しました。

Gush2のヘッダー (header.php)のブログ名を画像に変えるコード

Gush2のヘッダー画像挿入場所は、header.phpの一番下までスクロールしたら見つかります。元々のコードは、下記。

<h1 class="top_title"><a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>

Gushはh1タグなので、比較的分かりやすいですね。上記の記載コードを、次に書くコードに貼り替えます。

※コードを少しでも残してしまうと、投稿ページが真っ白になって面倒ですので、バックアップを取ってから作業しましょう。

<h1 class="top_title"><a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>"><img alt="ブログ名" src="ここにコピーしたURLをいれる" /></a></h1>

このコードにaltに、ブログ名、srcには、画像のURLを入れてください。上記▲画像は、Gush2の該当コードですので、参考まで。

ヘッダー画像をクリックしたら、ホームに戻る記載は、下記です。
<a href=”<?php echo home_url();?>” title=”<?php bloginfo(‘name’); ?>”>

確認して、画像が変わっていれば完成です♪

ヘッダーのブログ名を画像に置き換えた作業の簡単説明

ヘッダーphpのブログタイトルを出力してるphp<?php bloginfo(‘name’); ?>を画像に置き換え画像のパスを入れて、alt代替テキストをブログ名にしてあげるって作業でした。

さいごに

Stinger5forLadysのヘッダー画像を初めにかえStinger5も試して後、テーマの変更でGush2も試しました。やっぱりテーマを作ってる人が違えばコードもタグ（ブログの構造）も微妙に違うんですねっ。

カスタマイズしたページはブックマークなどして取っておく事、おすすめします。テーマ変更の時にあると便利ですからっ。

ほかに簡単な事と言えば、ブラウザのタブの左にある小さい画像→ファビコン作成です。まだ設定済ませてなければ、ついでにどうぞっ。

LINKWordPress、ファビコンの可視化設定、カスタマイズ方法

それではまた。ごきげんよぉ♪