WinRoadのLaravel4初心者講座

次世代PHPフレームワークのLaravel4を初心者向けに解説して参ります。

Winroad徒然草の管理人がお届けします
Foundation4のトップバーの修正

Foundation4のトップバーの修正

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

Foundation4のトップバーのCSSをいじってみたいと思います。デフォルトのトップバーは黒色で、ちょっとださいので、もう少し、かっこよくしたいと思います。

デフォルトの表示

PCサイズの時は、下記のように表示されます。

laravel019

モバイルサイズの時は、下記のように表示されます。

laravel020

それでは、実際に修正してみましょう。

  1. まず、mystyle.cssを作成し、public/f4/cssフォルダ内に保存します。
  2. 次に、base.blade.phpにmystyle.cssを追加します。cssの最後の箇所に追加します。
    {{ HTML::style('f4/css/normalize.css') }}
    {{ HTML::style('f4/css/foundation.css') }}
    {{ HTML::style('f4/css/mystyle.css') }}
    {{ HTML::script('f4/js/vendor/custom.modernizr.js') }}
  3. 次にトップバーにグラデーションを適用したいので、Glad3のサイトへいきます。
    http://grad3.ecoloniq.jp/
    laravel021
  4. 基本色を選択し、好みのグラデーションをクリックすると。右上にコードが表示されますので、それをコピーします。※自分で色を作成したければ、いろいろいじってみて下さい。
    laravel022
  5. そして、それを先ほど作成したmystyle.cssに貼り付けます。
  6. まず、.top-barに適用してみます。
    .top-bar{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #0d46a5), color-stop(1.00, #08144d));
    background: -webkit-linear-gradient(#0d46a5, #08144d);
    background: -moz-linear-gradient(#0d46a5, #08144d);
    background: -o-linear-gradient(#0d46a5, #08144d);
    background: -ms-linear-gradient(#0d46a5, #08144d);
    background: linear-gradient(#0d46a5, #08144d);
    }
  7. 下記のようにトップバーの左の部分だけが変更されました。
    laravel023
  8. さて、右のドロップダウンメニューを変更するには、どうすればいいのでしょう。
  9. public/f4/css/foundation.cssファイルを調べてみることにしました。
  10. 調べてみたら、.top-bar-section li a:not(.button)が怪しそうなので、グラデーションを適用したら、下記のようになりました。
    .top-bar-section li a:not(.button) { 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #0d46a5), color-stop(1.00, #08144d));
    background: -webkit-linear-gradient(#0d46a5, #08144d);
    background: -moz-linear-gradient(#0d46a5, #08144d);
    background: -o-linear-gradient(#0d46a5, #08144d);
    background: -ms-linear-gradient(#0d46a5, #08144d);
    background: linear-gradient(#0d46a5, #08144d);
    }

    laravel024

  11. セクション名の箇所.top-bar-section .dropdown li labelを下記のように修正しました。ちょっと明るめの色にしてみました。
    .top-bar-section .dropdown li label {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #c3d9ff), color-stop(1.00, #97b0d9));
    background: -webkit-linear-gradient(#c3d9ff, #97b0d9);
    background: -moz-linear-gradient(#c3d9ff, #97b0d9);
    background: -o-linear-gradient(#c3d9ff, #97b0d9);
    background: -ms-linear-gradient(#c3d9ff, #97b0d9);
    background: linear-gradient(#c3d9ff, #97b0d9);
    }

    laravel025

  12. 最後にfooter(正確には、#copyrightの箇所)もヘッダーと同じ色にしてみました。
    #copyright{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #0d46a5), color-stop(1.00, #08144d));
    background: -webkit-linear-gradient(#0d46a5, #08144d);
    background: -moz-linear-gradient(#0d46a5, #08144d);
    background: -o-linear-gradient(#0d46a5, #08144d);
    background: -ms-linear-gradient(#0d46a5, #08144d);
    background: linear-gradient(#0d46a5, #08144d);
     color:white;
    }

    laravel026

  13. モバイルの場合は下記のようになります。トップバーの色は、メニューをクリックする前は、グラデーションなのですが、メニューをクリックすると黒に変わります。再度、CSSの修正箇所を探すのは面倒なので、ご愛敬でそのままにすることにします。
    laravel027

« »

コメントを残す

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