アゴ乗せ日記

適当なポジティブ日記

スポンサーリンク

【はてなブログ】パンくずリストのデザイン修正

このサイトのデザインを確認してたところ

毒霧

パンくずリストが残念なことになっている

パンくずリスト

デザインのセンスがないアゴでもこれはアカンってのがわかる。

さっそく修正の前に

デザインCSSのコメント文って何なんなんだ?

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

/* <system section="background" selected="default"> */
/* default */
/* </system> */

消してみる

コメント消してみた

毒霧

背景とタイトル消えた!

よくみると、@import "/css/theme/afternoon/afternoon.css";の部分はコメントアウトになっていなかった。

これは使っているテーマのCSSみたいだ。(たしかに最初選んだ気がする

なるほど、今後は独自テーマ作りたいから消す予定だけど、今は残しておこう...。

パンくずリストの修正

前回の記事で使い始めた「Hatena-Blog-Theme-Boilerplate」っていうのをベースに修正を続けていく。

www.agonose-nikki.com

scss/lib/_core.scss

/* container */
#container {
    display: flow-root;
    padding-top: 0px;

    /* ここから追記 */
    #container-inner {
        #top-box {
            width: 100%;
            background: #FFF;
            padding-top: 5px;
            text-indent: 10px;
        }

        #content {
            background: #FFF;
            box-shadow: initial;
        }
    }
}

#top-boxの幅を広げて背景色を白に合わせてあげるっていうシンプルな修正。 #contentはbox-shadowが邪魔だったので消した。

scss/lib/_core.scss

.archive-header-category {
    text-align: center;
    /* ここから追記 */
    .archive-heading {
        border-bottom: 1px solid #ccc;
        text-align: left;
        margin: 0 30px;
    }
}

.archive-headingはカテゴリ名の表記部分。もともと中央寄せだったけど、パンくずリスト要素との境界が無くなって浮いている感があったので、左寄せにして下線を加えてみた。

反映

修正前よりはよくなったと思う!(強い気持ち

修正後

おわり

やることたくさん見えてきた。

スポンサーリンク