Stinger5　カスタマイズ - ヘッダー画像を削除してブログタイトルを画像にする

今回Stinger5がどんなもんなんだろうと思って使ってみました。

Stinger3とはまったく違っていますね。

Stingerカスタマイズとして今までメモしてきましたが、他の方が見たら、Stinger3のことなのか、Stinger5のことなのか、誤解を招くメモをしてきてしまっていたかと思います。

今後はStinger5のカスタマイズ記事もメモしていって、Stinger3とも区別していきたいと思います。

とりあえず、以前してきたカスタマイズを元にStinger5もカスタマイズしていこうかと思います。

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

以前のメモはこちらなので、こちらと比較すると違いもわかるかと思います。

以前のブログ

過去に書いたものを見返すと、やっぱり適当なメモになっていますね。

何も考えていないというか、まぁ今もあまり考えてメモしているわけではありませんが。。。

とにかく以前と同じようにヘッダー画像(画像にTOPページへのリンクがないバージョン)を削除して、ブログタイトルを画像(画像にTOPページへのリンクがあるバージョン)にします。

ヘッダー画像を削除

下記header.phpの該当部分を削除します。

95行目あたりでしょうか。

<!--
カスタムヘッダー画像
-->
<div id="gazou">
<?php if(get_header_image()): ?>
<p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
<?php endif; ?>
</div>
<!-- /gazou --> 

ブログタイトルを画像にする

まず、画像をアップロードします。

WordPressの管理画面の「外観」→「カスタマイズ」を選択します。

そうするとメニューが遷移するので、「ロゴ画像」から画像をアップロードします。

サイズは「980 × 250」くらいが良いかと思います。

そして保存することを忘れずに。

このままですと、ロゴ画像が小さく表示されてしまいます。

style.cssで制御されているかと思います。

下記の<p class="sitename">の部分ですね。

<!-- ロゴ又はブログ名 -->
<p class="sitename"><a href="<?php echo home_url(); ?>/">
<?php if (get_option('stinger_logo_image')): //ロゴ画像がある時 ?>
<img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url(get_option('stinger_logo_image')); ?>" />
<?php else: //ロゴ画像が無い時 ?>
<?php bloginfo( 'name' ); ?>
<?php endif; ?>
</a></p>

ですからstyle.cssの下記部分を修正します。

/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px) {
#wrapper {
	padding: 0 20px;
}
header {
	text-align: left;
}
.sitename img {
	max-width: 300px;
	margin: 0;
}

自分の場合は画像の横幅に合わせて、max-widthが300pxとあるのを980pxと変更しました。

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

となっている部分が2か所あるので、修正する箇所を間違えないように。。。です。。

まとめ

ヘッダー画像を削除してブログタイトルを画像にするには、
・header.phpを修正してヘッダー画像を削除する。
・ロゴ画像をアップロードしてstyle.cssを修正する。
ですね。

以上。

 - wordpress