運営いろいろ

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

投稿日:2017年1月20日 更新日:

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

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

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

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

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

しかし、

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

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

 

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

ステップ1 header.phpを書き換える。

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

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

を開きます。

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

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

ビフォー

アフター

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


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


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

ステップ2 サイズを調整する

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

 

こんなに変わりました。

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

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

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

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

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

.sitename a img{
    width: 50%;
}


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

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

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

まとめ

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

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

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

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

makiko

-運営いろいろ

執筆者:


  1. […] 私がstinger8でヘッダーロゴを設定した方法でサクッと書きますのでそちらを参考にして下さい。 […]

関連記事

プラグインエラー

さくらからエックスサーバーに移転時のトラブル日記

初心者がサーバー移転した時どうなるか いやー。 メインブログの移転。大変でございます。 ずっと前のブログからさくらサーバーを利用させていただいていたのですが、エックスサーバー へ移転しました。 巷では …

2014年から2016年までのサイト運営まとめ

年末に向けていままでのサイト運営を振り返ってみる 2016年のサイト運営を振り返ろうと思ったのですが、アドセンスをさかのぼっていたら、2014年から記録があったのでまとめて振り返りたいなあと思いました …

全てのワードプレス運営サイト常時SSL化しました。

SSL設定プラグインを卒業して、自分で常時SSL設定。 こんにちは。 現在運営している素材ブログすべて常時SSL化しました! 使ってるサーバーは wpXレンタルサーバー とXserver です。 どち …

各ブログで使用してるフォント紹介

運営ブログで愛用中のフォント紹介 フォント大好きです。マニアの方に比べたら全然ですが、いつかフリーフォントも作りたいと思っているくらいラブです。 そこで、運営しているブログの主にアイキャッチの画像で愛 …

このブログのタイトルやっと決定しました。

ブログタイトル決定しました。また変わるかもだけど。 こんにちは。 iPhone7が可愛すぎてしょうがないmakikoです。 電車のなかでも「誰かに押されたら落としちゃう!」と思ってほぼカバンの中です。 …