*

stinger3をカスタマイズしてヘッダー画像幅の調整してみたよ!何処のコードをいじればイイの!?

どうもです、いろはすです。

前回全体の幅を広くしたので、ヘッダー画像部分の右側に余白が出来てしまいました!
rshse

最初は「まぁそのままでもイイかな?」と思ったのですが、何か素人っぽくて見た目がカッコ悪いので幅を調整して行きたいと思います!

スポンサーリンク

stinger3は賢すぎる・・・

「stinger3」というテーマは賢くてヘッダー画像の大きさを自動的に切り取る機能が備わっているので、ヘッダー画像の幅を大きくしたいからと言って大きい画像をハメ込んでもダメなんですね~

なので、コードの中からデフォルトの数値を変更する必要があるので見て行きましょう!

いじるコードはココだよ!

外観⇒テーマ編集⇒functions.php内に下記のコードの塊があるので、そこを見つけていじります!

//カスタムヘッダー
$args = array(
	'width'         => 986,
	'height'        => 150,
        'flex-height' => true,
	'default-image' => get_template_directory_uri() . '/images/stinger3.png',
);
}

3,4行目の数値をそれぞれ、設定したい幅と高さに合わせて入力します!前回、設定した全体の幅と同じ数値だとキレイにハマるので良いかと!

次に、外観 ⇒ ヘッダーに行きます。

左側上部にある数値が、先ほど設定した数値に変わっているのが分かりますね!
jo@kp

ココで「新規画像を追加」からヘッダー画像をアップロードし直すと、空白スペースが埋まります!

全く同じヘッダー画像でイイ場合は、どうするの!?

上記の画像のように「アップロード済み」の中から同じ画像を選択して、「新規画像を追加」を押すとアップロード出来ます!

僕は同じ画像で良かったので、そのままですね~
でもキレイに縦幅と横幅を計算してヘッダー画像を作っている場合は、横にビローーーんってなっちゃうので要注意ですね!w

stinger3は右側にプレビュー画面までありますね。。親切設計過ぎるぜ!!
しかも、ヘッダー画像を違う画像でランダム表示させる設定も出来るとか、ENJIさん、マジでスゴイな。。

参考ブログはコチラ!
⇒【WordPress】Stinger3でメイン部分の横幅を広げたら、ヘッダー画像の幅も広げましょう

さて、まだまだ色々とカスタマイズしていきますよー!

それでは~

いろはす

カスタマイズは楽しい分、ユーザビリティを無視しないように注意が必要かもですね!後、こだわりすぎるとキリがないので良きトコロで収めなければ。。w

スポンサーリンク

関連記事

ヘッダー画像横に

stinger3をカスタマイズして全体の幅とメイン幅&サイドバー幅を広げてみたよ!余白の微調整も!

どうもです、いろはすです。 先日サイドバーをカスタマイズしたら、他も色々といじりたくなって来た

記事を読む

rehte

ブログ記事内にコードを表示出来るプラグイン『SyntaxHighlighter Evolved』が超便利!!使い方は簡単なの!?【実践レポート記事】

どうもです、いろはすです。 stinger3のカスタマイズにあたって、色々とプラグインを見てい

記事を読む

htr

stinger3のサイドバーを自分好みにカスタマイズしてみたよ!サイドバーの見出し背景色変更&下線追加&見出しフォントの文字色変更!検索ボタン変更も!

どうもです、いろはすです。 当ブログはENJIさんが作成・配布している『Stinger3』とい

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • 20代で起業して自由過ぎるライフスタイルを満喫中の♂
    高知生まれ高知育ち、東京なう。
    絵に書いた様な右脳派。
    ほぼ感覚だけで生きてます。

    ⇒ 詳しくはコチラから!
PAGE TOP ↑