ChocoThemeの画像の枠を編集してみる

ChocoThemeの画像表示はデフォルトで灰色の一本枠のデコレーションになっている。

他のテーマではあまり見かけない画像に対してのスタイルシートかもしれないです。

この画像枠を編集、あるいは無くすといったことをやってみる。

編集する場所を先に紹介し、後半で編集箇所に見つけ方までを書いてみたいと思います。
続きを読む ChocoThemeの画像の枠を編集してみる

CSSでボックス、テーブルなどの角を丸くする

CSSでボックスの角を角丸にする、CSS3で提案されているborder-radiusプロパティってのがあります。

CSSでやらない場合は画像を使うかjavascript(画像を使用しないライブラリNifty Corners Cube)を使う方法が一般的だと思います。

javascriptを使った場合はjavascriptをoffにしていると当然、角丸されないですが

CSSborder-radiusプロパティも対応していないブラウザ(IEとか)ではやはり角丸にならないので注意。
続きを読む CSSでボックス、テーブルなどの角を丸くする

CSSで文字を選択時の色を変更

文字を選択して反転状態にした時、ChocoThemeのテーマに変更してからbackgroundとの関係なのか背景が白なのに選択しても青字に白の背景で選択範囲がわかりづらかった。

googleで調べてみると反転する色や文字の色を直接変更できることがわかったので書き残しときます。

やり方は2通りで両方とも編集するのはstyle.cssファイル

CSSでOSシステムカラーを利用する方法

background: Highlight;
color: InactiveBorder;

これは試してないですが、想像するに見慣れた青の背景に白文字のやつになるのではないかと・・・。

OSに依存するということなので、色が違う人も出てくると思います。

CSSで色を指定する方法

色を指定した方が見栄えがよさそうってわけで

::selection {
    background: #ffb7b7; /* Safari */
}
::-moz-selection {
    background: #ffb7b7; /* Firefox */
}

赤の部分は好きな色のコード。
青の部分はコメントアウトなのでなくてもいいです。

-moz-selectionは実験的に導入されているMozillaのUI(ユーザーインターフェース)独自の拡張プロパティなので、いつ変更で使えなくなるかは不明なので注意。

引用、参考サイト

文字を選択した時の色+文字選択時のコネタ – kokemonoの日記
クロスブラウザのためのCSSのテクニック10選「10 astonishing CSS hacks and techniques」 | DesignDevelop