stinger3をカスタマイズしてヘッダー画像幅の調整してみたよ!何処のコードをいじればイイの!?
公開日:
:
最終更新日:2015/01/21
stinger3カスタマイズ, WordPress系 stinger3 カスタマイズ ヘッダー画像, stinger3 カスタマイズ ヘッダー画像 幅変更, stinger3 ヘッダー画像 ランダム
どうもです、いろはすです。
前回全体の幅を広くしたので、ヘッダー画像部分の右側に余白が出来てしまいました!
最初は「まぁそのままでもイイかな?」と思ったのですが、何か素人っぽくて見た目がカッコ悪いので幅を調整して行きたいと思います!
stinger3は賢すぎる・・・
「stinger3」というテーマは賢くてヘッダー画像の大きさを自動的に切り取る機能が備わっているので、ヘッダー画像の幅を大きくしたいからと言って大きい画像をハメ込んでもダメなんですね~
なので、コードの中からデフォルトの数値を変更する必要があるので見て行きましょう!
いじるコードはココだよ!
外観⇒テーマ編集⇒functions.php内に下記のコードの塊があるので、そこを見つけていじります!
//カスタムヘッダー $args = array( 'width' => 986, 'height' => 150, 'flex-height' => true, 'default-image' => get_template_directory_uri() . '/images/stinger3.png', ); }
3,4行目の数値をそれぞれ、設定したい幅と高さに合わせて入力します!前回、設定した全体の幅と同じ数値だとキレイにハマるので良いかと!
次に、外観 ⇒ ヘッダーに行きます。
左側上部にある数値が、先ほど設定した数値に変わっているのが分かりますね!
ココで「新規画像を追加」からヘッダー画像をアップロードし直すと、空白スペースが埋まります!
全く同じヘッダー画像でイイ場合は、どうするの!?
上記の画像のように「アップロード済み」の中から同じ画像を選択して、「新規画像を追加」を押すとアップロード出来ます!
僕は同じ画像で良かったので、そのままですね~
でもキレイに縦幅と横幅を計算してヘッダー画像を作っている場合は、横にビローーーんってなっちゃうので要注意ですね!w
stinger3は右側にプレビュー画面までありますね。。親切設計過ぎるぜ!!
しかも、ヘッダー画像を違う画像でランダム表示させる設定も出来るとか、ENJIさん、マジでスゴイな。。
参考ブログはコチラ!
⇒【WordPress】Stinger3でメイン部分の横幅を広げたら、ヘッダー画像の幅も広げましょう
さて、まだまだ色々とカスタマイズしていきますよー!
それでは~
いろはす
カスタマイズは楽しい分、ユーザビリティを無視しないように注意が必要かもですね!後、こだわりすぎるとキリがないので良きトコロで収めなければ。。w
関連記事
-
ブログ記事内にコードを表示出来るプラグイン『SyntaxHighlighter Evolved』が超便利!!使い方は簡単なの!?【実践レポート記事】
どうもです、いろはすです。 stinger3のカスタマイズにあたって、色々とプラグインを見てい
-
stinger3をカスタマイズして全体の幅とメイン幅&サイドバー幅を広げてみたよ!余白の微調整も!
どうもです、いろはすです。 先日サイドバーをカスタマイズしたら、他も色々といじりたくなって来た
-
stinger3のサイドバーを自分好みにカスタマイズしてみたよ!サイドバーの見出し背景色変更&下線追加&見出しフォントの文字色変更!検索ボタン変更も!
どうもです、いろはすです。 当ブログはENJIさんが作成・配布している『Stinger3』とい