CSSファイルの設定を読み込んで一括背景色変更するコード。 #cssfile #javascript #coding #colors

2022.11.30

Logging

おはようございます、先日の日曜日は原因不明の体調不良で寝込んでおりました(¦3[▓▓]。

今日は何とか体調が回復したので、CSSファイルの設定コード読み込んで一括背景色変更するプログラムコードを作成しました。※実際、自分のブログ・サイトで動いているコードになります。

<link rel="stylesheet" href="examplestyle.css">

導入方法はまずヘッダーに変更したいCSSファイルを記述します。次にbody内に下記のコードを記述します。

<span id="site_description"></span>

最後にJSコードを挿入します。JSコードはファイルで読み込むでもベタ書きでも良いのですが、上記のHTMLタグより下に記述してください。そうしないと動作しません😗。

let htmlcode = ["#efefef", "#181B39", "#262a2e", "#192734", "#1c483b", "#bf7800", "#83094f"].map(elm => `<span class='color_code' style='color:${elm}' data-color-code='${elm}'>■</span>`).join("\n");

const basecolor = "#262a2e";
let cookiefn = function (CodeColor) {
    let r = document.cookie.split(';');
    return r.length ? ((r) => {
        let changecolor = "";
        for (let ii = 0; ii < r.length; ii++) {
            let content = r[ii].split('=');
            for (let i = 0; i < content.length; i++) {
                if (content[i].replaceAll(" ", "") === "bgcolor_code") {
                    changecolor = content[i + 1];
                }
            }
        }
        return changecolor?changecolor:CodeColor;
    })(r) : CodeColor;
};

let old_color = cookiefn(basecolor);
document.getElementById("site_description").insertAdjacentHTML("afterend", htmlcode);
[...document.querySelectorAll(".color_code")].forEach(elm => {
    elm.addEventListener("click", function (e) {
        color_set(elm.getAttribute("data-color-code"));
    });
});

color_set(old_color);

function color_set(color) {
    for (let ii = 0; ii < document.styleSheets.length; ii++) {
        if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
            for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
                let element_css_code = document.styleSheets[ii].cssRules[i];
                try {
                    element_css_code.style.backgroundColor = color;
                    if (color === "#efefef") {
                        element_css_code.style.color = "#000000";
                        
                    } else {
                        element_css_code.style.color = "#FFFFFF";
                    }
//いらないかも領域🤔👇
                    document.querySelectorAll("#wp-calendar > tbody > tr > td > a").forEach(elm=>{
                        elm.style.backgroundColor = "#909091";
                    });
                    document.getElementById("searchsubmit").style.backgroundColor = "#000";
                    document.querySelector("#s").style.backgroundColor = "#909091";
                    [...document.querySelectorAll("code")].forEach(elm=>{
                        [...elm.querySelectorAll("span")].forEach(childen_elm=>{
                            childen_elm.style.backgroundColor = "#565656";
                        });
                    });
//いらないかも領域🤔👆                    
                } catch (error) {
                }
            }

            document.cookie = "bgcolor_code=" + color;
        }
    }
}

注意事項:背景色を変更するCSSファイルをJSコードでチェックしています。そのチェックしている部分を外すと全てのCSSファイルの背景色を変えることが可能です。

タグ

, body, coding, colors, css, cssfile, description, examplestyle, gt, href, ID, javascript, JS, link, lt, quot, rel, site, span, stylesheet, コード, サイト, ファイル, ブログ, プログラム, ベタ, ヘッダー, 一括, 下記, 不明, 不良, 今日, 体調, 作成, 先日, , 原因, 回復, 変更, 実際, 導入, 挿入, 方法, 日曜日, 最後, 背景色, 自分, 記述, 設定,

このサイトの背景色を勝色に変えました。縁起の良い色ということで。

2021.10.31

Logging

今日はブログ投稿お休みの日だけど、報告ということで書いています。このサイトの背景色を勝色に変えました。縁起の良い色ということで、その色にしました?

前々から背景色を黒に近い色に変えようと思っていたのですが、なかなか踏ん切りがつかなくてやっとこさ、本日変えました。これでちょっとアンダーワールドなサイトに見えるかもしれませんが、それはそれで良いです。飽きたらまた白に変えるかもしれませんが今の所、この勝色で置いておこうと思います。

あと、サンプルコードの動画はもうネタ切れなので、これからは自分が作ったコードをサラッと見せるとかDEMOコードをサラッと見せるようにします。

トイウコトデ、今日は10月最後の日曜日でハロウィーンらしいですが高知のひろめ市場に行くこともなく、皆が騒いで終電で帰る頃には自分は夢の中だと思います。まだ仕事も決まらず悔しい思いの中、年を越しそうですね。ちょっと悔しいですが、結果は結果なので坦々と日々頑張るしかないかなと思います。

タグ

10, demo, あと, アンダーワールド, お休み, コード, こと, これ, サイト, サンプル, それ, トイウコトデ, ネタ切れ, ハロウィーン, ひろめ, ブログ, , , 今日, 仕事, 前々, 動画, 勝色, , 報告, , 市場, , , 投稿, , 日曜日, 最後, 本日, , , 終電, 結果, 縁起, 背景色, 自分, , , 高知, ,

即席デザイン文字生成[iDrawジェネレーター]という命名がダサいw

2020.07.09

Logging

即席デザイン文字生成[iDrawジェネレーター]というWEBツールを作りました。あのイケハヤさんみたいなテキスト文字だけのアイキャッチ画像みたいなものが生成可能です。これをどうして作ったのか?

昔、パソコンが壊れてアドビが一時期があり、その時に仕方ないのでこれでアイキャッチ画像を生成して使用しておりました。とくに凝ったデザイン文字が生成されるわけではなく。書体と背景色や文字色などを変更してそれらしいものを即席で作るというものです。昔、作ったので変数の命名もかなり杜撰な感じでしたがひとまず動く形になりましたので、公表しますね。

ご自由にお使いいただければ幸いです。
https://zip358.com/tool/idraw/

この他にも無料ツールをいろいろ作っているのでご自由にお使いいただければと思っています。

タグ

iDraw, , web, あい, アドビ, イケハヤ, お使い, かなり, キャッチ, これ, ご自由, ジェネレーター, それ, ツール, テキスト, デザイン, パソコン, もの, わけ, 一時期, , 使用, 公表, 即席, 可能, 命名, 変数, 変更, , 感じ, 文字, , , 書体, 杜撰, 無料, 生成, 画像, 背景色,

単純なコードで背景色にグラデーション。

2019.06.15

Logging

単純なコードで背景色にグラデーションつける。
このコード自体は単純なコードです、ですが・・・。
気に食わないので何度も初期の色コードを設定を変えてみたのですが
鮮やかさがでません。ちょっとドス黒いグラデーションのまま。
コードを貼り付けておきます。
一時間ぐらい色を変えて遊んでました:D

See the Pen 単純なコードで背景色にグラデーション。 by taoka (@taoka-toshiaki) on CodePen.0


 

タグ

0, 265, BY, codepen, default, embed, gt, hash, Height, href, ID, io, JQGLoO, JS, lt, Pen, result, See, slug, tab, taoka, taoka-toshiaki, The, theme, user, グラデーション, コード, ドス, まま, , 何度, 初期, 単純, 背景色, 自体, , 設定,

現場のプロが教えるWEB制作の最新常識をパラ読みして(´Д`)

2014.08.25

Logging

現場のプロが教えるをパラ読みしての感想などを書いてみます。
この本ですけども、毎日WEBの技術やデザインの流行をチェックしている方は
然程目新しい内容を書いている本ではないです。
こんな方はおすすめ、Web制作会社に入社したのだけど、
周りに技術を持った人がいない、または自分の技術や知識が
どれぐらいのレベルなのか知りたいなどが分かる本です。
この本が示すトコロは世間一般でいうWeb制作会社を
軸として経営している会社のレベルです。
ただ、これは技術書ではないため、
これだけではWeb技術やデザインの知識を得ることは難しいです。
ちなみにこの本は、文章が結構多めですけど
重要な部分にはマーカー(黄背景色)を塗っているので
マーカーの前後を読むことで一通り理解できるような感じになってます。
 

タグ

4844363980, asin, jp, web, おすすめ, こと, コレ, これだけ, ため, チェック, デザイン, トコロ, どれぐらい, プロ, マーカー, レベル, 一般, 一通り, 世間, , 会社, 入社, 内容, 制作, 前後, 周り, 多め, 常識, 感想, 技術, 技術書, 文章, , 最新, , 毎日, 流行, 現場, 理解, 知識, 経営, 背景色, 自分, , 部分, 重要, ,