ブログの背景色を変えられるようにしてみた

このブログのデザインってなんだか暗いですよね。 🙄

こんにちは、Hikaruです。

なんとなくブログを始めるときに
「ま、いっか」 と、安易に（失礼）選んだこのブログのデザインですが、
なんだか暗い。

スマホでは別スタイルになっているので
そっちは良いとしても、何とかしたくなってきました。

そこで、はたと

思いだしたのが自分のこの記事

blog.yutenji.biz

1. このコードをちょっと改造して、チェックボックスをラジオボタンに変更する。

2. 選んだボタンで背景色を変えられるようにする。

と、そんな風にしてみようかと思い立ったので作りました～。

でも、はてなブログにはすでにそんな機能があったりして？

とりあえず、オリジナルカラーを含めて4色展開にしました。

折を見てサイドバーに設置しようと思います。

読みづらいなと思ったら、背景色を変更してみてください

あ、でもスマホで見ていただいてる方（背景が白）はタップするとたぶん悲惨なことになります。
（ちょっと慌てて追記しました。💦）

だけど、PCでもかえって読みずらいかな。。。
たぶん色サンプルの選び方のセンスの問題ね。😏

---

はてなブログの背景色を変えるコード

はこんな感じです。
※ JqueryとVue.jsのライブラリが必須です。 😅

HTML

Copied!

file_copy

<div id="radioColorSample">
    <dl class="">
        <dt class="">読みづらいな、と思ったら、背景色を変更してください</dt>
        <dd v-for='(extension, idx)  in radioList'>
        <input 
            type="radio" 
            name="colorExtension" 
            :id="'extension' + idx" 
            :value=extension>
        <label :for="'extension' + idx">
            <span class="colorSample"></span>
        </label>
        </dd>
        <div style="clear:both;"></div>
    </dl>
</div>

javascript

Copied!

file_copy

let radioColorSample = new Vue({
    el: '#radioColorSample',
    data: {
        // サンプルカラーはここに
        radioList: ['#292c2f', '#435d77', '#674654', '#466467'],
    },
});
$(document).ready(function () {
    $('span.colorSample').each(function (index, element) {
        $(element).css(
            'background-color', 
            $(element).closest('dd').find('input').val()
        );
    });
});
$(document).on('change', 'input[name="colorExtension"]', function () {
    $('body').css('background-color', $(this).val());
});

style sheet

Copied!

file_copy

#radioColorSample dl {
    background-color: #fff;
    color: #333;
    padding: 10px;
}

#radioColorSample dl dd {
    float: left;
}

#radioColorSample .colorSample {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 6px;
}

#radioColorSample input[type="radio"] {
    display: none;
}

---

Hikaru

---