ピエールの日記 by pierre 長尾和美

ピエールです。SamuraiTraditional(サムトラ)、たけしを(逸見泰典とのユニット)でギターやってます♪思いつきをブログに! ^^v by pierre

Stinger5 カスタマイズ – ブログタイトルをヘッダー画像にする

      2016/11/10

ブログタイトルをヘッダー画像にする

Stinger5はデフォルトの構成として

・ブログタイトル(トップへリンクあり)
・ブログの説明
・ヘッダー画像(トップへリンクなし)

となっています。

これを

・ヘッダー画像(トップへリンクあり)
・ブログの説明

という構成にしてみたのでメモ。

デフォルトのヘッダー画像を削除もしくは非表示にする

WordPressの管理メニューで「外観」→「カスタマイズ」と移動しておきます。

デフォルトのヘッダー画像は削除するか非表示にします。

下記の画像のように「画像を非表示」ボタンを押下。

image4830

ヘッダー画像を用意する

ヘッダー画像を用意します。

推奨は 横幅:980px、高さ:250pxですが、横幅さえあっていれば良いでしょう。

「画像を選択」ボタンからアップロードできます。

image4856

この状態で保存をすると、下記のようにヘッダー画像が小さく表示されます。

image4889

style.cssを編集

この画像を大きくするためにstyle.sccを編集します。

.sitename img

の部分を修正するのですが、style.sccには2ヶ所あるので、どちらも修正しました。

●修正前1


.sitename img {
	max-width: 300px;
	margin: 0 auto;
}

●修正前2


.sitename img {
	max-width: 300px;
	margin: 0;
}

どちらも下記のように修正します。

●修正後


.sitename img{
	max-width: 100%;
}

そうすると下記のように完成します。

image4878

まとめ

参考にさせていただいたのは下記のサイト。

結構難しくカスタマイズするのかなぁと調べていたところ、簡単にできました。

STINGER5ファビコンやヘッダー画像をカスタマイズする方法 | ネットビジネスで起業して稼ぐ!30代妻子持ちが脱サラ田舎暮らし

 - wordpress