読者です 読者をやめる 読者になる 読者になる

あざらしとペンギンの問題

主に漫画、数値計算、幾何計算、TCS、一鰭旅、水族館、鰭脚類のことを書きます。

ブログのデザイン

またまた今更ですが、ブログのデザインを変えてみました。最初は今まで使っていた公式デザインにちょろっと書き足せば済むと思ったのですが、それだけではどうにもうまく行きませんでした。筆者の要求は

  • 背景を白に、リンクを青にしたい
  • 見出しの下線を実線にしたい
  • 記事本体と右のサイドバーの間の線を消したい

だったのですが、実際にやってみると

  • 背景色を変えるとヘッダの文字が見えなくなる
  • リンクの色を変えると、自動でリンクが貼られるキーワードにも色がついて記事が色だらけになる

とよろしくない見栄えになってしまいました。

というわけでいろいろやってみた結果が次のCSSです。色くらいもっと簡単に変えられてもいいのではないでしょうか。

/* <system section="theme" selected="bordeaux"> */
@import "/css/theme/bordeaux/bordeaux.css";
/* </system> */

/* <system section="background" selected="fff"> */
body{background:#fff;}
/* </system> */

#globalheader-container {
    background-color: black;
}

a:not(.keyword), a:not(.keyword):link, a:not(.keyword):visited {
    color: #0050aa;
    text-decoration: none;
}

a:not(.keyword):hover {
    color: #0050aa;
    text-decoration: underline;
}

a:not(.keyword):active {
    color: #f1a930;
    text-decoration: underline;
}

#blog-title, #blog-title h1 a, #blog-title h1 a:link,
#blog-title h1 a:visited, #blog-title h1 a:hover,
#blog-title h1 a:active {
    color: black;
}

.entry-title a, .entry-title a:link, .entry-title a:visited,
.entry-title a:hover, .entry-title a:active,
.entry-header div[class^="entry-date"] a,
.entry-header div[class^="entry-date"] a:link,
.entry-header div[class^="entry-date"] a:visited,
.entry-header div[class^="entry-date"] a:hover, 
.entry-header div[class^="entry-date"] a:active {
    color: black;
}

.entry-header-menu a, .entry-header-menu a:link,
.entry-header-menu a:visited, .entry-header-menu a:hover,
.entry-header-menu a:active {
    background-color: white;
}

.entry-header {
    border-bottom: solid 1px #aaa;
}

.section h3 {
    border-bottom: solid 1px #aaa;
}

#main-inner {
    border-right: none;
}