2ステップでSTINGER8でタイトルをロゴ画像変更する方法

投稿日：2017年1月20日更新日：2017年1月21日

ヘッダータイトルを画像に。超初心者の私でもできた方法

コンパクトで文字中心のこのブログには超適正なSTINGER8。

でも、ヘッダータイトルがテキストリンクなんだよね。

これでも十分機能的なんですが、

ちょっと個性を出したい、、と思い始めてしまいましたので変えようかと。

しかし、

このやり方だったらコピペで超初心者の私でもできたので記しておきます。

あくまでプロのやり方ではないので、「とりあえず簡単に設定したい！」という人向けです。

STINGER8は小テーマもありますが、今回は親テーマをいじります。

画像を用意して、アップロードしたあと、メディアを開いて画像URLをコピーしておきます。

外観→テーマの変更→STINGER8(親テーマ)→header.php

を開きます。

<– ロゴ又はブログ名 –>ではじまるコードを見つけて下さい。

3行目を<img src=”画像URL”/>のコードに書き換えます。

ビフォー

アフター

 
<!-- ロゴ又はブログ名 -->


	<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
		<img src="画像URL"/>
	</a>


<!-- ロゴ又はブログ名ここまで -->

コードを一行変更するだけでこれが

こんなに変わりました。

しかし、でかい。。。ッッW

しかも、「さとりかたる、、」じゃなくて「かたりさとる、、だから！」

綺麗に表示させたいので結構大きめの透過PNGを使いました。

サイズ変更もCSSに詳しくないので余白とか気にせず男らしくサイズだけ変更します。

カスタムCSSにこれを追加するだけです。パーセントはお好みで調整します。

.sitename a img{
    width: 50%;
}

素敵におさまりました。背景は普通に変えました。

元の画像のサイズにもよりますが、スマホでもOKだったんでこれでいいと思います。

CSSに関してはいろいろあるので試してみてください。

私はあまりカスタマイズに詳しくありませんし、プロの人からみたら、「そこはこうでしょ！！」ってあると思うんですが、

stinger8のカスタマイズ方法もすごく少ないので、他のテーマのロゴの変更方法を自分なりに自分のわかる方法を組み合わせてやりました。

結果、「できた！」って感じなので、、正しいかどうかわかりませんが、

「これでいいや！」「カスタムに時間かけたくない！」って人は是非やってみて下さい。

makiko