四十三庵

蔀の雑記帳

ブログのデザインをいじりました

いい感じのデザインにしました

f:id:st43:20150208210653p:plain
この土日で、四十三庵のデザインをいじった。
はてなブログCSSがいじりやすいので、こんなこともできるようだ。
JavaScriptとかも入れられるような話を聞いたような)

使い続けてくと色々問題点・不満点が出てくるのかもしれないけども、一旦これで行こうと思う。
全体的に楽天っぽいデザインになりましたね。

  • 元ネタ

今回はてなブログのテーマストアにあったCSSを改変した。
元ネタになったのは、id:kgsiさんの「slim」というテーマ。
http://blog.hatena.ne.jp/css/theme/bordeaux/bordeaux.css
http://blog.hatena.ne.jp/-/store/theme/12921228815715016151
元々のやつも中々にクールだったんですが、自分の理想とはちょっとだけズレていた。

当初は自分しか使わないとはいえ、テーマストアに公開して、
URLをもらおうと思ってたんだけども、どうやら改変したものをストアに登録するのは
微妙なラインっぽいので、Githubで公開するにとどめました。

以下、作業メモ。

こだわったこと

もともとはてなダイアリー時代から持ってた不満として、
デフォルトで指定できる色の赤が、僕の指定したいクリムゾンレッドじゃなかった。
今回使ってるのはmaroon(#800000)っていう色なんですけど、これを使うことで、理想的な配色になった。

  • ブログタイトル画像

はてなブログのデフォルトだと、ブログタイトルの画像が真ん中に表示されるようになっていた。
これに僕はどうも違和感を持っていたので、左に寄せた。

#blog-title-inner {
    padding: 80px 0 0 80px;
    background-position:left !important;
    border-bottom: solid 1px #000000;
 }

important指定がないと、指定が効かなかった気がする。

  • サイドバー

元々のCSSでは、ウィンドウを最大化してない状態だと、横にスクロールしないとダメだった。
人によってウィンドウのサイズは違うだろうけども、僕は割とマルチウィンドウで使う派だったので、軽いストレスを感じていた。
元々の指定は、固定値持たせてたんだけど、これを相対値(%)指定にした。

これは正直できると思ってなかった。
ずっとウザいな〜とは感じていて、今回CSSいじってたらたまたま無効化できることを知って、
ググってサンプルコード見つけて、それを使った。

/* keywordをすべて無効にしてる */
a.keyword {
    pointer-events: none !important;
    cursor: default !important;
    color: #000000 !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

無効化と言っても、HTMLソースで見るとリンクは貼られていて、
それをスタイルシートで無理やり普通の文章にしてる、という感じだ。

  • 挫折したこと

↑この箇条書きの黒点のサイズをもっとデカくしたかったんですが、
どう指定すればいいかわからなかったので、挫折した。


他にも細かいことはあるんだけど、とりあえずそんなところで。
何か表示がおかしいとこあったらガシガシ指摘ください。

詳細

  • コード



(了)