サイトタイトルの文字を見やすくする工夫

テンプレートの背景を写真にしている人多いですねぇ。

背景と同系色の色だと文字が見えづらくて困ってしまっているあなたへ!

こんな時は文字色を背景の色より遠い色を選ぶのが一番ですね。

それでも見辛い場合は影付き文字にしてみましょう!

印刷業界では、ごく当たり前に使われているアウトラインとか、グローなんていう技があるのですが、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、MilanoParisReykjavikSt.Petersburg

※Romaは対応しているが上下にすると不恰好になるのでオススメしません。

※Osakaはサイトタイトルは存在しているが、非対応(対応させる方法は存在しますが、そうすると、上の点線を犠牲にすることになります。)

▼ タグの貼り付け方はここ マウスを当てると画像が開きます。

影付き文字の解説

影つき文字の考え方
text-shadowを指定すると、指定した色で文章の複製を作り文字の背景に配置される。

その配置した、背景文字を上下左右に動かしぼかし具合を指定して影らしさを出す
※複数指定をすることで影に複雑さを出すことが出来る。

まずは何もしない状態

独自レイアウト
text-shadow:none;

上下左右に2ピクセル分づつずらしてみる

■ text-shadow : #000  0px  0px  0px;

  • 背景色: #000 (黒)
  • 左 右: -Npx(左方向)~0px(ずれ無し)~+Npx(右方向)
  • 上 下: -Npx(上方向)~0px(ずれ無し)~+Npx(下方向)
  • ぼかし: 0px(ぼかし無し)~ Npx(ぼかしの範囲)

上方向に2ピクセルずらして表示

独自レイアウト
text-shadow:#000 0px -2px 0px;

右方向に2ピクセルずらして表示

独自レイアウト
text-shadow:#000 2px 0px 0px;

下方向に2ピクセルずらして表示

独自レイアウト
text-shadow:#000 0px 2px 0px;

左方向に2ピクセルずらして表示

独自レイアウト
text-shadow:#000 2px 0px 0px;

斜め方向に2ピクセル分ずらしてみる

右斜め下に(右に2ピクセル、下に2ピクセル)2ピクセルづつずらして表示

独自レイアウト
text-shadow:#000 2px 2px 0px;

左斜め上に(左に2ピクセル、上に2ピクセル)2ピクセルづつずらして表示

独自レイアウト
text-shadow:#000 -2px -2px 0px;

ぼかしてみる

ぼかしのみ

独自レイアウト
text-shadow:#000 0px 0px 1px;

独自レイアウト
text-shadow:#000 0px 0px 2px;

独自レイアウト
text-shadow:#000 0px 0px 5px;

右斜め下に(右下方向に3ピクセル)ぼかしを増やしていく

独自レイアウト
text-shadow:#000 3px 3px 2px;

独自レイアウト
text-shadow:#000 3px 3px 4px;

独自レイアウト
text-shadow:#000 3px 3px 6px;

独自レイアウト
text-shadow:#000 3px 3px 8px;

組み合わせる(カンマで区切って並べる)

長い影

独自レイアウト
独自レイアウト
独自レイアウト
独自レイアウト
A : text-shadow:#000 2px 2px 2px;
B : text-shadow:#000 4px 4px 2px;
C : text-shadow:#000 6px 6px 2px;
A+B+C:
text-shadow:#000 2px 2px 2px , #000 4px 4px 2px , #000 6px 6px 2px;

グロー&ドロップシャドー

独自レイアウト
独自レイアウト
独自レイアウト
独自レイアウト
A : text-shadow:#000 1px 1px 2px;
B : text-shadow:#000 -1px -1px 2px;
C : text-shadow:#000 2px 2px 6px;
A+B+C:
text-shadow:#000 1px 1px 2px , #000 -1px -1px 2px , #000 2px 2px 6px;

影を半透明にする

独自レイアウト
独自レイアウト
独自レイアウト
独自レイアウト
独自レイアウト
text-shadow:rgba(0,0,0,1.0) 2px 2px 4px;
text-shadow:rgba(0,0,0,0.8) 2px 2px 4px;
text-shadow:rgba(0,0,0,0.6) 2px 2px 4px;
text-shadow:rgba(0,0,0,0.4) 2px 2px 4px;
text-shadow:rgba(0,0,0,0.2) 2px 2px 4px;

自分が探している色を見つけたい時は原色大辞典が役に立ちます!

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。

コメントをお書きください

コメント: 1
  • #1

    伊藤富夫 (水曜日, 07 9月 2016 10:07)

    先日はJimdoBusinessの登録変更の際、長々と一時間に及ぶご指導を頂き、本当に助かりました。Webに挑戦するのは初めてなので苦労の連続です。今、JIMDO研究所の資料を拝見させて頂きながら、全体のイメージを構築したいと思っています。体調(特に頭の)不良と闘いながらなので遅々として進みませんが、一事業家としての最初にして最後の社会貢献事業を夢見て励みます。今後ともよろしくお願いいたします。

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422