Stinger5 カスタマイズ - ヘッダー画像を削除してブログタイトルを画像にする
2016/11/10
今回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を修正する。
ですね。
以上。