text-shadow を使用して可読性を上げる
テキストの右側と下側に影を挿入する事で同系色でも可読性をよくする。
背景の透明化をしていればロゴの img でも使える。
See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.
解説
HTML
「背景が白、文字色も白」と「背景が黒、文字色も黒」の2種類をデモで用意。
文字以外にロゴにも使用可能。
CSS
- background: color = 背景の色。
- text-align: center; = 文字の中央揃え。
- color: = テキストの色。
- text-shadow: 2px 2px 5px color; = テキストの影を設定する。値は左から「右, 下, ぼかし具合, 影の色」。
- padding: 4em; = 余白。4文字分。
－広告－
国内WordPressテーマ シェア率 No.1
Web制作案件にも使いやすい WordPress テーマ
SWELL
シンプルで多機能、そしてカスタマイズしやすい
ダッシュボードやカスタマイズ画面に沢山の設定が追加されていて、ノーコードでも相当なカスタマイズが可能。
追加CSS、追加JavaScript をページ毎に入力欄があるので、細部までこだわったサイト制作が可能。
買い切り型で、複数サイトに使用可能、Web制作案件にも
一度購入すれば、いくつのサイトに使用してもOK。フリーランスのWeb制作案件にも使えます。
メンバー登録すればテーマ更新も無償。
- 一度買えば、月額料金はなし
- 複数サイトで使用可能
- ノーコードでも調整できる設定が、ダッシュボードやカスタマイズ画面に大量追加
- ブロックエディタの豊富な追加ブロックで投稿がリッチに
- 細部の調整が、「追加CSS と 追加JavaScript」 で簡単に出来る
- 他の人気テーマ からの乗り換え対応プラグイン配布( cocoon, ADDINGER, JIN, SANGO, STORK, THE THOR)
