Friction River Software - CakePHP5入門【コラム⑧】デザイン見直し

Ａ子

掲示板の最上部のデザインがあっさりし過ぎてるから、ちょっと見栄みばえに気を遣つかってみよう
（下に示す部分のことね）

Ａ子

あ、レイアウトファイルの該当部分は以下の赤枠内よ
（このWebアプリの名前を表示してるだけ）

Ｃ菜

どうするんですか～？

Ａ子

うーん、Webページ最上部の背景色をグラデーションにすることって、できるかな？

Ｂ美

できるわよ
CSSの「linear-gradient」をbackgroundの値として指定すれば良いの

あ、対応ブラウザを拡張するために（念のため）「-moz-linear-gradient」と「-webkit-linear-gradient」の二つも同時に指定しておいたほうが良いかもね

Ｃ菜

ちょっとググってみますね～

・・・

えっと、なんとなくですが分かりました～

まずは「bbsapp/config」の中にある「const.php」に定数を定義するです～
（上から下へグラデーションさせたいので、最初の色と最後の色を定義します）

define("HEAD_COLOR_GRAD_START", "#bcff7a"); //グラデーション開始色
define("HEAD_COLOR_GRAD_END", "#efffe0"); //グラデーション終了色

このあと「bbsapp/templates/layout」の中にあるレイアウトファイル「default.php」を書き換えれば良いみたいですね～

<div class="hero is-info is-bold" style="
    background: -moz-linear-gradient(top, <?= HEAD_COLOR_GRAD_START ?>, <?= HEAD_COLOR_GRAD_END ?>);
    background: -webkit-linear-gradient(top, <?= HEAD_COLOR_GRAD_START ?>, <?= HEAD_COLOR_GRAD_END ?>);
    background: linear-gradient(to bottom, <?= HEAD_COLOR_GRAD_START ?>, <?= HEAD_COLOR_GRAD_END ?>);
">
    ・・・
</div>

という感じでどうでしょう～？

Ａ子

んん？
上の二つ（「-moz-linear-gradient」と「-webkit-linear-gradient」）が「top」なのに、三つ目（「linear-gradient」）が「to bottom」って間違ってない？

「to top」じゃないの？

Ｂ美

Ｃ菜が正しいわよ

ネット上にはＡ子と同じ勘違いをしてる人も割と多いんだけど（苦笑）、「to bottom」という言葉の意味は「上から下へ（top to bottom）」だからね

Ａ子

な、なるほどねぇ
（英語力の拙つたなさを指摘された感じで、ちょっと恥ずい…）

あっ！
タイトルの文字を縁取ふちどりすることって可能かな？

Ｂ美

露骨に話題転換してきたわね（苦笑）

単なる縁取りじゃなくて、文字の背景をぼんやりさせたいなら「text-shadow」を使えば良いかな
（本来は「文字に影を付ける」機能なんだけど、工夫すると縁取りにもなるのよ）

text-shadow: 横方向の影の距離縦方向の影の距離ぼかしの強さ影の色;

って感じで４つのパラメータを指定するの
（最初の三つの単位は「px」で…）

さらに、この４つを一組として、カンマ区切りで複数の組を指定することもできるわ
（これを応用すれば、文字の周囲にぼんやりと縁取りを作ることもできるってわけ）

Ｃ菜

だったら、こんな感じでいかがでしょう～？

text-shadow: 5px 5px 5px #000,
             -5px -5px 5px #000,
             -5px 5px 5px #000,
             5px -5px 5px #000;

文字の４方向（上下左右）に影を付けることで、縁取り効果を付けるわけです～

Ｂ美

さすがはＣ菜
なかなか分かってるじゃない

ちなみに、距離を変更した影をさらに追加することで、より太い縁取りを実現することもできるわよ
（いわゆる「二重影」と呼ばれるテクニックね）

text-shadow: 5px 5px 5px #000,
             -5px -5px 5px #000,
             -5px 5px 5px #000,
             5px -5px 5px #000,
             5px 0 5px #000,
             -5px 0 5px #000,
             0 5px 5px #000,
             0 -5px 5px #000;

Ａ子

よし！
それじゃ以上のことをふまえて、レイアウトファイルである「default.php」を書き換えてみるよ

<div class="hero is-info is-bold" style="
    background: -moz-linear-gradient(top, <?= HEAD_COLOR_GRAD_START ?>, <?= HEAD_COLOR_GRAD_END ?>);
    background: -webkit-linear-gradient(top, <?= HEAD_COLOR_GRAD_START ?>, <?= HEAD_COLOR_GRAD_END ?>);
    background: linear-gradient(to bottom, <?= HEAD_COLOR_GRAD_START ?>, <?= HEAD_COLOR_GRAD_END ?>);
">
    <div class="hero-body">
        <div class="container">
            <div style="
                text-align: left;
                padding: 10px;

                text-shadow: 5px 5px 5px #000,
                        -5px -5px 5px #000,
                        -5px 5px 5px #000,
                        5px -5px 5px #000,
                        5px 0 5px #000,
                        -5px 0 5px #000,
                        0 5px 5px #000,
                        0 -5px 5px #000;
            ">
                <h1 class="title" style="color: <?= HEAD_COLOR_MAIN ?>;">
                    <?= HEAD_MAIN ?>
                </h1>
            </div>
            <br />

            <div style="
                text-align: left;
                padding: 10px;

                text-shadow: 5px 5px 5px #000,
                        -5px -5px 5px #000,
                        -5px 5px 5px #000,
                        5px -5px 5px #000,
                        5px 0 5px #000,
                        -5px 0 5px #000,
                        0 5px 5px #000,
                        0 -5px 5px #000;
            ">
                <h2 class="subtitle" style="color: <?= HEAD_COLOR_SUB ?>;">
                    <?= HEAD_SUB ?>
                </h2>
            </div>
        </div>
    </div>
</div>

なお、style指定の箇所って（分かりやすいように）改行してるけど、一行で記述してもOKだからね

Ａ子

あ、「bbsapp/config」の中にある「const.php」については、さっきＣ菜が追加したものに加えて、以下の四つを追加したよ

define("HEAD_MAIN", "BBS with Image");
define("HEAD_SUB", "誰でも自由に投稿可能な掲示板（画像ファイルのアップロードも可）");
define("HEAD_COLOR_MAIN", "#ffff66"); //HEAD_MAINの文字色
define("HEAD_COLOR_SUB", "#ffffff"); //HEAD_SUBの文字色

ちなみに、バージョンについては「1.4.0」にアップしたからね

Ｃ菜

ブラウザで確認してみますね～

うわぁ、最初のものと比べると、雲泥うんでいの差です～

Ｂ美

アプリケーションって、（Webアプリケーションに限ったことじゃないけど）見た目も割と重要だからね

どうしても普通の人って、「中身」よりも「外観」で評価しがちだし…（苦笑）

Ａ子

たしかに…（苦笑）