CSSファイルの設定を読み込んで一括背景色変更するコード。 #cssfile #javascript #coding #colors
2022.11.30
おはようございます、先日の日曜日は原因不明の体調不良で寝込んでおりました(¦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, コード, サイト, ファイル, ブログ, プログラム, ベタ, ヘッダー, 一括, 下記, 不明, 不良, 今日, 体調, 作成, 先日, 内, 原因, 回復, 変更, 実際, 導入, 挿入, 方法, 日曜日, 最後, 背景色, 自分, 記述, 設定,
Laravelで再構築した2bbs-video.comをヨロシク😌
2022.08.10
こんにちは、よさこいをしている踊り子さん達へ、熱中症にはお気をつけてくださいませ。
本日はあまり使用されていなかった、2bbs-video.comをLaravelで再構築したお話を記載します。2bbs-video.comはYOUTUBE動画を共有するのに特化したサイトになります。当然、YOUTUBEのアドレスのない投稿はできません。今のところ動画の投稿内容は管理人が独断と偏見で管理します、その為、投稿していた内容が削除されるという事もあります。
サイトをLaravelで再構築していて、ページネーションが半端ないぐらい楽に生成できたのは凄く便利だなって感じましたが、逆にベタで構築できる技術も必要じゃないかなって思います。
そしてLaravelにはパッケージが豊富にあるのだけど、正直な所、どれが良いパッケージ（有名所）なのか分からないので調べる必要があるなって感じました。それまでは自分で作るしか無いかもしれない、そういう所などの経験値を積まないとLaravelゴリゴリ使えますとは言えないなと。ただ、大体の勘所は掴めましたね。あとは習うより慣れろ感覚でいろいろと制作していきます😌。
タグ
2, bbs-video, com, Laravel, youtube, アドレス, お気, お話, キャッチャー, サイト, ところ, どれ, ネーション, パッケージ, ページ, ベタ, よさこい, 事, 今, 使用, 便利, 偏見, 共有, 内容, 削除, 動画, 半端, 必要, 所, 技術, 投稿, 有名, 本日, 構築, 正直, 為, 熱中症, 特化, 独断, 生成, 管理, 管理人, 記載, 調, 豊富, 踊り子, 逆,
とにかくプロなフロントエンドエンジニア。
2020.11.16
下記の動画を見て頂ければ分かると思うのですが、フレームワークなどを使わずにベタでこれを作っているというのは、フロントエンドエンジニアとしてはプロ領域だと感じます。出来る人の違いはCSSをゴニョゴニョ使えるかにあるだろうなと、ここまでゴニョゴニョ使えたらフレームワークなんていらないよな。ちゃんとレスポンシブにもなっていて、感心してしまいます。ここまで出来ないとプロのフロントエンドエンジニアとは言えないのかは、わからないけど。でも見ていて爽快感がありますよね。
自分もゴニョゴニョとフロントエンドエンジニアの領域も侵食していかなければ、いけないなと何事も手を動かさないと覚えない。この頃のWEBは動的なデザインをCSSやJSを駆使して作られているので、そこんトコロを自分も勉強していけたらなと思います。バックエンドもフロントエンドも両方極めたいなと思えた動画だった。未だにWEBは奥が深いなと思うし、ソフトもアプリもそうなんだけどいろいろと頑張らないと思えてならない。
タグ
css, JS, web, アプリ, いろいろ, エンジニア, エンド, ここ, ゴニョゴニョ, これ, そこ, ソフト, デザイン, トコロ, バック, フレームワーク, プロ, フロント, ベタ, 下記, 両方, 人, 何事, 侵食, 勉強, 動画, 奥, 感心, 手, 爽快感, 自分, 違い, 頃, 領域, 駆使,
オブジェクト指向を勉強するのに最適なのは
2019.04.05
オブジェクト指向を勉強するのに最適なのはjavaのような気がする。
C言語で理解するというのはベタなのかもしれないけれど、
javaが最適化と思ったりする。
javaとjavascriptとは全然違うけれど、javascriptもかなり
ゴリゴリ書こうと思えば書けます。
プログラムをどこから学べ良いだろうかと悩んでいる方は
ソフトウェア系ならjava、Web系ならjavascriptが良いじゃないだろうか。
仕事でコードのレベルを上げるべきなのかというのは
人それぞれ考え方が違うかもしれないけれど、人が多ければ多いほど
平均に合わさないといけないのではないだろうかと思うのです。
これ本当に大事なことなんです。
訳のわからないコードは負の遺産に他ならない。
自分は他人のコードを見て大体の平均に合わせて書いているつもりです。
新人が入社してきてもそれまで勉強してきたことで
理解できるレベルでコードを書いている。
なのであまりコメントは書かない。
修正に修正を加えたコードを見ているとこれは直すべきだと思う人も
いると思う、昔はそう考えていた時もあったけれど
今はそれで良いじゃないだろうかと思っています。
何故かといえば、処理がかなりの遅延になっていれば
それは直さないといけないけれど、そうではない場合は
わざわざ直す必要はないと教えられてきたこともあり
直さない。先人に敬意を払うということだ。
言語のバージョンによって直さないといけない箇所は
出てきます、そういう箇所は修正しないといけないかもしれないが
そうではない場合、直さなくて良いが
答えではないだろうか。
来週からコードサンプルに戻ります。
タグ
java, javascript, web, オブジェクト, かなり, コ, コード, こと, これ, ソフトウェア, それぞれ, それまで, つもり, どこ, プログラム, ベタ, レベル, 人, 仕事, 他人, 入社, 勉強, 大事, 大体, 平均, 指向, 新人, 方, 最適, 最適化, 本当, 気, 理解, 系, 考え方, 自分, 言語, 訳, 負, 遺産,