クリスマスが終わり、今月も残すところあと6日となりました。
クリスマスのイルミネーションがまばゆいこの時期、サイトの更新もまばゆく煌めくデザインにしたいです♩
今回は、初心者の方でもすぐに出来るおすすめの輝かせ方があるのでご紹介します。
[toc]
動画の準備
動画は短いものでなるべく軽いものを準備しておきます。
オススメのサービスは、Pexeles や Mixkit です。
縁取文字の作成
エフェクトをつけたりした動画を背景に置くとなると、どうしても文字が見えなくなります。
動画を単純に配置しながら文字の位置に併せて、全体のデザインも調整していく必要があります。
文字は特に大切ですので、目立たせるための工夫が必要です。
クラスに要素：text-shadowの縁の幅と色,角度を指定する
以下のソースコードが、実際に使っているものです。
見て頂くと解るかと思いますが、単純です。
コピーして好きな色を入れ換えるだけで、縁取り文字の完成です。
HTML
<p class="p">Text Text Text </p>
CSS
.p {
color: #FFF;
text-shadow: 1px 1px 0 #dc143c, -1px -1px 0 #dc143c,
-1px 1px 0 #dc143c, 1px -1px 0 #dc143c,
0px 1px 0 #dc143c, 0-1px 0 #dc143c,
-1px 0 0 #dc143c, 1px 0 0 #dc143c;
}
サンプル 1
Bernie Pictures（Facebookフレンドのジャーナリストさんの写真ギャラリー）
まだ文字の色が白と白で見にくいですね。
この動画の場合は、背景が白とブラウンと場所違いで入っているので、もっと文字を大きくして、色も変える必要がありますね！
サンプル２
少し見やすくなりました（実際は背景動画が動くのでもう少し読みやすいです。）
背景が白なら黒で縁取り、スタイルはボールドにして、文字サイズも大きくします。
縁のサイズを太くするなど、簡単に調整ができるのが便利なところです。
画像だといちいち保存してアップロードする必要がありますから、手間がかかって時間もかかります。
作り方のまとめ
1. 作成した動画をパソコンに取り込みます。
（取り込み方は色々方法がありますが、お勧めはUSBで管理、移動。Macの方はAirDropで送信してダウンロードする）
2.以下の様な動画をリンクしたソースをbodyタグの中に配置します。
サイトのテンプレートはcoloribさんから、ダウンロード（無料）して拝借しています。
https://colorlib.com/wp/template/eatwell/
テンプレートは慣れるまでは難しく感じるかも知れませんが、意外にもソースを置き換えるだけで短時間で質の高いサイトが出来上がります。
3. CSSファイルで文字に影をつける
※ Chomeのdeveloperツールを利用する方法も動画でご紹介しています
【実践動画付き】ブログのインストール方法
他にもある縁取り文字作成方法
ちなみに取る方法は、CSSだけでなく画像を使う方法とSVGを利用する方法があります。
SVGを利用するメリットは、IEにしっかりと対応させるための様です。
詳細はこちらのサイトがお勧めです => https://webkikaku.co.jp/blog/htmlcss/huchidorimoji/
画像を使う方法とCSSで作る方法と、迷ったならCSSで作る方がオススメです。
なぜなら画像を作っている間に、CSSで作れてしまうからです。
しかもエディタでコードを書くだけで作れるので無料です！
「Themifyの賢い使い方」メールマガジン発行中
最後までお読み頂きありがとうございました。
このサイトは、メルマガと合わせて更新しております。
ご興味のある方は、ぜひご登録ください。
