運営いろいろ

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年から記録があったのでまとめて振り返りたいなあと思いました …

運営サイトの2016年のアクセス推移

まともに運営した1年間のアクセス推移 どうも、今年のアクセス報告です。 2014年はダラダラやってて、本腰いれたのが2015年の10月あたりなので、ちゃんと運営したのは2016年が最初なので比べてもし …

プラグインエラー

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

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

wordpress

運営ブログで使ってるワードプレステーマ

私の使っているこだわりのワードプレステーマ達 複数ブログを運営してるのですが、やっぱりテーマがピタッと合うと執筆の速度も倍速になります。 有料無料関係なく吟味してます。 ドメイン名とコンセプト、テーマ …

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

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