memo

java,ActionScript,javascript,html,css,ソーシャルマーケティングなどのメモ

Category: CSS

Google Calenderで土日の色をつける

        

デフォルトではGoogleカレンダーの土日に色がついていないので見やすく、土曜日なら青、日曜日なら赤にする。

対応ブラウザ:Google Chrome

以下のStylishというエクステンションをいれる。

Stylish
https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=ja

このエクステンションは特定のページのCSSを弄くれるもの。

追加したらグーグルカレンダーにアクセス。

Google Calender
https://www.google.com/calendar/render

Stylishのアイコンをクリック。
「インストール済みのスタイルを管理」をクリック。
「新しいスタイルを作成」をクリック。
「名前」は適当に命名。(ex.Google Calender)
「コード」に以下を追加。
※日曜始まりのカレンダー用

/* 日曜日 */
table#mvDaynamesTable tr > th.mv-dayname:nth-child(1)
{
    color:#ff5e5e;
    font-weight:bold;
}
div.month-row > table.st-bg-table tr > td:nth-child(1)
{
    background-color:#FFE6E6;
}
div.month-row > table.st-grid tr:nth-child(1) > td:nth-child(1)
{
    background-color:#FFE6E6;
}

/* 土曜日 */
table#mvDaynamesTable tr > th.mv-dayname:nth-child(7)
{
    color:#4a6edb;
    font-weight:bold;
}
div.month-row > table.st-bg-table tr > td:nth-child(7)
{
    background-color:#E6EBFA;
}
div.month-row > table.st-grid tr:nth-child(1) > td:nth-child(7)
{
    background-color:#E6EBFA;
}

IE 8でlightboxのオーバーレイ(暗転)の範囲が切れる時

        

jquery版のlightboxを導入したのですが

画像をクリックしても暗転部分(オーバーレイ部分)が切れてしまい

ちゃんと表示されませんでした。

色々と調べた結果、bodyで設定しているwidthの単位がpxで固定値となっていたのが
IE8のレンダリングエンジンに嫌われたみたいで
(firefox、chrome、safariではちゃんと表示された為)

この単位を100%にすると無事表示ができました。

あとは、元々のbodyの範囲を別のクラスなりidなりでくくって、調整すればいいかと思います。