2014/08/100 Shares

WordPress(STINGER3)で簡単にヘッダーとロゴ画像を変更する方法

皆さん、WordPressでブログ書いてますか?

私はテーマに「STINGER3」を使わせていただいてますが、ブログタイトルをロゴ画像にしたのとヘッダー画像を変更してみました。

ただ私が初心者すぎてかなり手こずってしまったので同じく初心者の方のために、そしてたぶんやり方を忘れてしまう未来の私のために簡単な方法を書き記すことにしました。

 

困ったぞ

 

ヘッダー画像とタイトルロゴ画像

まずはこちらに画像を用意しました。

トップのキャプチャ

上がタイトルをロゴに変えたもの、下がヘッダー画像と呼ばれる場所です。

 

デフォルトではStinger3様のヘッダーと黒い文字のタイトルになっていると思いますので今回はこれを上の画像のように変更する手順を紹介します。

 

ちなみに私はStinger3以外は使ったことがない+ド素人なのであしからず。

 

その前に

「やいやいやいやい!ヘッダーの変え方とロゴの変え方はStinger3様の公式サイトに載ってるじゃねぇか、バーロー」と思われた方。

 

私を舐めないでください。

 

読んだけど出来なかったのです。(涙目)

 

そのくらいド素人ですが、これから成長していきます。進んでいくのです!

同じくド素人の皆さんがんばりましょう!

 

ヘッダー画像(トップ絵)の変更の方法

 

画像を用意する

画像がなくては始まらないのでまずは画像を用意しましょう。

私は絵なんて書けませんし、お絵かきツールも使えません。

そんな人でも大丈夫。

 

バナーシェフ様:http://www.banner-chef.com/

 

こちらは無料で素敵なヘッダー画像が作れるサイトです。

当ブログのヘッダーもこちらで作成させていただきました。

 

ただしこちらで作成した画像は横幅が800pxなので画像編集ソフト等で986pxに変更しておきましょう。

もちろんご自分で画像を作れる方は素敵に仕上げちゃいましょう、マジリスペクト。

 

ヘッダー画像の変更

素敵な画像が作成出来たらヘッダー画像に設定しましょう。

「ダッシュボード」→「外観」→「ヘッダー」→「ファイルを選択」で先ほど作成した画像を選択し「アップロード」を押す。

 

「ヘッダー画像のトリミング」という画面へ切り替わるので良い感じにトリミングして「切り取って公開する」を選択します。

 

するとあら簡単!ヘッダー画像が変わりましたね。これで完了です。

 

 

タイトルをロゴ画像にする

続いてタイトルをロゴ画像にしましょう。これが難しかった。解れば簡単ですが。

 

ロゴ画像を用意する

ここでも簡単作成ツールを使います。

 

CoolText様:http://ja.cooltext.com/

 

たくさんサンプルがあるので迷ってしまいます、マジ神サイト。

自分で作れる人、マジリスペクト。

 

ロゴ画像をWordPressにアップロードする

作成した画像をWordPressにアップしましょう。

「ダッシュボード」→「メディア」→「新規追加」→「ファイルを選択」と進んで画像を選択しましょう

これでWordPressにアップロードされました。

 

ロゴ画像のURLを確認する

アップロードされた画像というのはインターネット上にURL(住所みたいなもの)を割り当てられます。

画像を使う時にその住所が必要なんですね。それを確認します。

 

「ダッシュボード」→「メディア」→「ライブラリ」

ここにさっきアップした画像があるはずです。それ選んで「編集」

 

メディアライブラリのキャプチャ

こんな画面になると思います。

左の「ファイルのURL」をコピーしておきましょう。

 

タイトルをロゴ画像にする

「ダッシュボード」→「外観」→「テーマ編集」を選び、左側にある「ヘッダー(header.php)」を選択。

ソース(って言うのかな?)の真ん中くらいにある

1
2
3
<p class=”sitename”><a href=”<?php echo home_url(); ?>/”>
<?php bloginfo(‘name’); ?>
</a></p>

ここを

1
2
3
<class=“sitename”><href=<?php echo home_url()?>/”>
       <img src=“ここに先ほどコピーした画像のURLを入力してください”  />
        </a></p>

こうこうこう。

 

もちろん「ここに先ほどコピーした画像のURLを入力してください」の部分は変えてくださいね。

手入力でなくてコピペでOKです。

 

変更が出来たら「ファイルを更新」ボタンを押すのを忘れずに。

これで無事タイトルがロゴ画像に変更されます、お疲れ様でした。

 

あとがき

以上でヘッダー画像とタイトルのカスタマイズを終わります。

 

皆さんのブログのカスタマイズの手助けになれば幸いです。

ありがとうございました。