アゴ乗せ日記

適当なポジティブ日記

スポンサーリンク

【はてなブログ】レスポンシブ対応 - テーマを外してみる

ついに、重い腰を上げる時がきた。

時は来た、それだけだ

CSSのソースがいろんな場所に散らばってしまったので一元管理したくなってきた。 それが動機。

ちなみにこのブログのCSSは『Boilerplate』っていうので管理している。 github.com

まずデザインCSSに書かれている

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

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

を削除する。afternoonっていうテーマを使っていたみたいだ。今まであざますmm

f:id:agonosetaro:20200227164404p:plain

背景が真っ白になった。

背景

まずは背景の木目を復活させる。 以下のサイトからフリー素材を頂いた。

https://switch-box.net/free-wood-patterns.html

f:id:agonosetaro:20200227135213j:plain:h100

これをはてなフォトにアップロードして画像URLを背景に設定。

body {
    background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/agonosetaro/20200227/20200227135213.jpg);
}

タイトル

#blog-title {
    margin: 3em auto;
    text-align: center;
    width: 100%;
    text-shadow: 0 2px 2px rgba(0,0,0,.4);
    letter-spacing: .3em;
    h1 {
        padding: 40px 0 0;
    }
}
#blog-description {
    font-weight: normal;
    font-size: .8rem;
    margin: 1em 0 0;
    color: #FFF;
    letter-spacing: .3em;
}

とりあえず前のテーマに合わせて修正していく。

f:id:agonosetaro:20200227165435p:plain

サイドメニュー

.hatena-module-title {
    margin-bottom: .6em;
    padding-bottom: .2em;
    border-bottom: 1px solid $border;
    font-size: 1rem;
    font-weight: bold;

    padding-left: .6em;
    color: #555;
    background: #fff;
    border-left: solid 5px #555;

とりあえずの帯を付けてみた

f:id:agonosetaro:20200227165936p:plain

あとは大丈夫そう。

意外と平気だった

もっと崩れるかと思ったが、あまり大きな崩れとかは無さそうで良かった。 まだ見直した方がいい箇所はいくつか見られるが、ひとまずはPC版のCSSとスマホCSSの統合が優先。
ソースが散らばっている状態だから

いったん終わり

次回以降でレスポンシブのチェックをつけて修正していく

f:id:agonosetaro:20200227170905p:plain

以上!!

スポンサーリンク