テンプレートの背景を写真にしている人多いですねぇ。
背景と同系色の色だと文字が見えづらくて困ってしまっているあなたへ！
こんな時は文字色を背景の色より遠い色を選ぶのが一番ですね。
それでも見辛い場合は影付き文字にしてみましょう！
印刷業界では、ごく当たり前に使われているアウトラインとか、グローなんていう技があるのですが、Jimdoの基本機能にはこれがありません。今回は薄いアウトラインと影を白で表現してみました。それがこれです。
<style type="text/css">
#cc-website-title h1{
text-shadow:0px 0px 1px #3F746A,1px 1px 2px #3F746A,2px 2px 3px #3F746A;
}
</style>
同系色で見え辛い場合も、影付き文字を使えば、少し見えやすくなります。
<style type="text/css">
#cc-website-title h1{
text-shadow:0px 0px 1px #FFF,1px 1px 2px #FFF,2px 2px 3px #FFF;
}
</style>
サイトタイトルを使用していないテンプレート一覧
2015年7月25日現在サイトタイトルを使用していないテンプレートは以下の通り。
Dubai、Dublin、Malaga、Milano、Paris、Reykjavik、St.Petersburg
※Romaは対応しているが上下にすると不恰好になるのでオススメしません。
※Osakaはサイトタイトルは存在しているが、非対応（対応させる方法は存在しますが、そうすると、上の点線を犠牲にすることになります。）
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
影付き文字の解説
影つき文字の考え方
text-shadowを指定すると、指定した色で文章の複製を作り、文字の背景に配置される。
その配置した、背景文字を上下左右に動かし、ぼかし具合を指定して影らしさを出す。
※複数指定をすることで影に複雑さを出すことが出来る。
まずは何もしない状態
上下左右に２ピクセル分づつずらしてみる
■ text-shadow : #000 0px 0px 0px;
- 背景色: #000 （黒）
- 左 右: -Npx（左方向）～0px（ずれ無し）～+Npx(右方向）
- 上 下: -Npx（上方向）～0px（ずれ無し）～+Npx(下方向）
- ぼかし: 0px（ぼかし無し）～ Npx（ぼかしの範囲）
上方向に2ピクセルずらして表示
右方向に2ピクセルずらして表示
下方向に2ピクセルずらして表示
左方向に2ピクセルずらして表示
斜め方向に２ピクセル分ずらしてみる
右斜め下に（右に２ピクセル、下に2ピクセル）2ピクセルづつずらして表示
左斜め上に（左に２ピクセル、上に2ピクセル）2ピクセルづつずらして表示
ぼかしてみる
ぼかしのみ
右斜め下に（右下方向に３ピクセル）ぼかしを増やしていく
組み合わせる（カンマで区切って並べる）
長い影
text-shadow:#000 2px 2px 2px , #000 4px 4px 2px , #000 6px 6px 2px;
グロー＆ドロップシャドー
text-shadow:#000 1px 1px 2px , #000 -1px -1px 2px , #000 2px 2px ６px;
コメントをお書きください
伊藤富夫 (水曜日, 07 9月 2016 10:07)
先日はJimdoBusinessの登録変更の際、長々と一時間に及ぶご指導を頂き、本当に助かりました。Webに挑戦するのは初めてなので苦労の連続です。今、JIMDO研究所の資料を拝見させて頂きながら、全体のイメージを構築したいと思っています。体調（特に頭の）不良と闘いながらなので遅々として進みませんが、一事業家としての最初にして最後の社会貢献事業を夢見て励みます。今後ともよろしくお願いいたします。