初心者おばちゃんもできた!WordPress(ワードプレス)講座

ワードプレスでブログを始めませんか?テーマSTINGERなど。おばちゃんのカスタマイズ保存版

STINGERヘッダー画像素材

私の別のブログで掲載していたものですが、ワードプレス関連はこちらにまとめたいと思って持ってきました。

ワードプレスのテーマSTINGER3の幅で作った文字を乗せるだけのタイトルバナーです。

「角丸(かどまる)」のバナーって作るのが面倒なので、自分用に作ったものですが・・・^^;
(PNGで角は透過してあるので、文字や画像載せるだけで大丈夫だと思います)
当ブログでも使ってます。宜しければ練習用など、ご自由に

 

STINGER3サイズ タイトルヘッダー画像

画像の使い方

  • サムネイル画像をクリックして「原寸大」を表示します。
  • 原寸大の画像の上で「右クリック」-「名前を付けて画像を保存」でパソコンにダウンロードします。
  • PNGを加工できる画像ソフトで、保存した画像を開き、サイトタイトルなどを入れます。
  • バナーは「rogo.png」で保存します。名前は任意ですが初心者には後の解説で解りやすいです)
    (設置の方法は後でご紹介をしています)

タイトルヘッダー画像 角丸型

  • 986×150 STINGER3のデフォルトのサイズです。
  • 角丸の単色です。
  • サムネイル画像をクリックして頂くと「原寸大」が表示されます。

986×150

ヘッダー画像00ced1150

ヘッダー画像40e0d0150

ヘッダー画像66cdaa150

ヘッダー画像3cb371150

ヘッダー画像000000150

ヘッダー画像c0c0c0150

ヘッダー画像f5deb3150

ヘッダー画像d2b48c150

ヘッダー画像f0e68c150

ヘッダー画像ff8c00150

ヘッダー画像fa8072150

ヘッダー画像ffc0cb150

ヘッダー画像ee82ee150

 

986×200

タイトルバナー画像

タイトルバナー画像

タイトルバナー画像

タイトルバナー画像

タイトルバナー画像

タイトルバナー画像

タイトルバナー画像

タイトルバナー画像

タイトルバナー画像

タイトルバナー画像

タイトルバナー画像

タイトルバナー画像

タイトルバナー画像

スポンサーリンク

 

STINGER3 ヘッダー画像の高さを変える

ヘッダー画像サイズの変更の手順

stinger3 では元々ヘッダー画像のサイズが決まっています。

幅:986px
高さ:150px

が、デフォルトです。
この画像の高さは自由に変えることができます。

変えたい時は、

「ダッシュボード」 → 「外観」 → 「テーマ編集」 → 「テーマのための関数(functions.php)」

と開き、「テーマのための関数(functions.php)」の下記の部分を探して編集します。

//カスタムヘッダー
$args = array(
‘width’ => 986,
‘height’ => 150,

「height」部分が高さとなります。

150→「好きな高さ」に変更してください。

※ 変更前にはfunctions.phpのバックアップはとっておきましょう。
※ 986の幅は変えない方が良いです。

 

タイトルテキスト非表示 タイトル画像に変更する方法

タイトルテキストを表示せず、そのままタイトル画像にする方法です。
当サイトもこの方法です

「ダッシュボード」 → 「外観」 → 「テーマ編集」 → 「ヘッダー(header.php)」

<div id="h-l"><p class="sitename"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></p>

この部分を探します。

 

<!--?phpbloginfo('name');? -->

その中のこの部分を

 

<img src="&lt;?phpbloginfo('template_directory');?&gt;/images/rogo.png" alt="" />

に置き換えます。

 

変更が終わったら、FTPソフトを使ってstinger3が入っている場所を開きましょう。

「themes」 → 「stinger3」 → 「images」

imgフォルダの中に、今回作成したタイトル画像「rogo.png」をアップしたら完成です!

参考にさせて頂いたサイト様:http://wp-stinger.com/custam/post-668/

 

大きいヘッダー画像をスマホサイズに最適化させる

大きなタイトル画像はスマホで見ると、横幅が切れてしまいます。

スマホで100%で表示させるため、画像の最適化の設定をしておきましょう。

「ダッシュボード」 → 「外観」 → 「テーマ編集」 → 「smart.css」

/*———————————–
オリジナルコンテンツ
————————————*/
.sitename img {
height: auto;
max-width: 100% !important;
width: 100%;
}

smart.cssを開き、一番下にこちらを追記すればOKです♪

参考にさせていただいたサイト様
えけこのくるる様 http://equeko.info/wordpress/stinger3-for-lady/

 

どの作業も「バックアップ」はお忘れなく!

公開日:
最終更新日:2015/04/03

  • このエントリーをはてなブックマークに追加
  • Pocket