サイトタイトルに背景をつけて文字を見やすく

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

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

背景に色を入れて文字を浮き立たせる方法5連発!

文字色はそのままで背景に白をあてる

<style type="text/css">    

#cc-website-title h1{

    padding:10px 20px; /* 余白を充てる */
    display:inline-block; /* 文字が均等に回りこむように */
    background:#FFF;

}

</style>

文字色はそのままで背景に半透明の白

    background:rgba(255,255,255,0.8);

文字を白くして背景にコンテンツカラーをあてる

    background:#68A94A;

文字を白くして背景に半透明のコンテンツカラーをあてる

    background:rgba(104,169,74,0.5);

文字を白くして、黒半透明の背景にしてみる

    background:rgba(0,0,0,0.3);

サイトタイトルを使用していないテンプレート一覧

2015年7月25日現在サイトタイトルを使用していないテンプレートは以下の通り。

Dubai、Dublin、Malaga、MilanoParisReykjavikSt.Petersburg

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

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

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

バリエーション

背景に角丸を入れてみる

Jimdo専門カスタマイズ
株式会社ピーアイケイ

    border-radius:10px;

さらに背景に影

Jimdo専門カスタマイズ
株式会社ピーアイケイ

    box-shadow: 3px 3px 4px rgba(0,0,0,0.3);

背景に枠線

Jimdo専門カスタマイズ
株式会社ピーアイケイ

    border: 5px solid  #48892A;

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

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

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

コメント: 5
  • #1

    川合勝 (水曜日, 29 7月 2015 13:11)

    「背景に角丸を入れてみる」の所で、冒頭のCSSにborder-radius:10px;を追加しただけでは、サンプルの様な2重枠(色違い)は出来ませんですよね。
    どう言ったCSSを入れるのか教えて下さい。
    尚、見出しアイコンの改訂版はFireFoxもOKでした。

  • #2

    川合勝 (木曜日, 30 7月 2015 14:59)

    サイトタイトルの位置は常に左に成りますね。
    中央や、右に表示出来ませんでしょうか。
    marginを入れて見ましたが、タイトルにマウスオーバーで、オレンジの帯が出てしまって、
    駄目でした。

  • #3

    PIKの村井 (木曜日, 30 7月 2015 19:20)

    川合さん
    いつもコメントありがとうございます。
    わかりづらくてすみません。
    背景を表示させる説明の画像の方には草の写真がありますよね。
    これは画像データなのです。
    これをイメージしていただきたくて暫定的に緑の背景をつけさせていただいたのです。

  • #4

    PIK 村井 (木曜日, 30 7月 2015 19:23)

    サイトタイトルの位置については、固定されているものなので、残念ながら移動させることは出来ないのです。それぞれのテンプレートによって、指定の仕方が違うので、全てを網羅させる方法がないのです。

    でも、出来ないか?と言われると、出来ちゃいます(笑)
    それは、別のコーナーで、ご紹介させていただきます!!
    お楽しみにw

  • #5

    川合勝 (金曜日, 31 7月 2015 08:29)

    御回答有難う御座います。
    夫々納得しました。
    サイトタイトル位置変更を楽しみにしています。

株式会社 PIK

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

TEL.03-6433-0422