CSS
Kobito

kobitoに背景画像が欲しかったから

More than 5 years have passed since last update.

何か一昔前の2ちゃんねる専用ブラウザをカスタマイズしたりするようなノリでやりました。画像は偶然にフレームによって目線が入っております。

弄ったのトカ

/Applications/Kobito.app/Contents/Resources/markdown.css

背景画像をbody部に置いて、ソースコードのハイライト関連がcode-frameらへんなので背景色を

background-color: rgba(225, 225, 225, 0.1);

多分 (R, G, B, 透明度) の順番なのかな。

cssで背景色を透明化させるのにopacityという方法もあるようですが、試しに書いてみた時には反映させることは出来ませんでした・・・ま、まぁ反映させられてもopacityのほうは挙動がframe内の文字にも影響が出るっぽいので悔しくないです。

フォントを本当にこだわっている人は変更したりも出来るんじゃないかと。


marakdown.css

body{

/** background-image: url("/Users/aya7581026/Pictures/Konachan108462tsubaki_nazuna.jpg");**/
background-image: url("/Users/xxx/qiita_bg_r.png");
}

.code-frame {
-webkit-font-smoothing: antialiased;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-webkit-background-clip: padding-box;
-moz-border-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
margin: 1.0em 0;
border: solid 1px #f0f0f0; }
.code-frame .code-lang {
background: -moz-linear-gradient(top, #fafafa, #e9e9e9);
background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#e9e9e9));
background: -o-linear-gradient(top, #fafafa, #e9e9e9);
background: linear-gradient(top, #fafafa, #e9e9e9);
-webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5);
-moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5);
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5);
color: #7a7a7a;
padding: 2px 10px;
border-top: solid 1px #CCCCCC;
border-right: solid 1px #DDDDDD;
border-left: solid 1px #CCCCCC;
text-shadow: 0px 1px 0px #FFFFFF;
/** background-color: #e9e9e9;**/
background-color: rgba(225, 225, 225, 0.1);
font-size: 0.85em; }
.code-frame .highlight {
/** background-color: #e9e9e9;**/
background-color: rgba(225, 225, 225, 0.1);
border-top: solid 1px #CCCCCC;
border-right: solid 1px #DDDDDD;
border-bottom: solid 1px #DDDDDD;
border-left: solid 1px #CCCCCC; }
.code-frame .highlight pre {
overflow: auto;
background-color: rgba(225, 225, 225, 0.1);
border-left: solid 1px #DDDDDD;
padding: 0.5em 1.0em;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 3px; }
.code-frame .highlight pre code {
padding: 0;
border: none;
/** background-color: transparent;**/
background-color: rgba(225, 225, 225, 0.1);
font-size: 0.9em;
font-family: "Monaco", monospace, "Courier", "Inconsolata", "Bitstream Vera Sans Mono"; }


弄ったらこうなりました↓

http://t.co/BzKI4yyEZG

はい、画像が無断転載・使用だったり、公式アプリの一部書き換えとか色々よろしくないので今日の記事は後日に削除することになるかもしれない。。