@Blog{zip358.com}
日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。
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ファイルの背景色を変えることが可能です。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
３, body, coding, colors, css, cssfile, description, examplestyle, gt, href, ID, javascript, JS, link, lt, quot, rel, site, span, stylesheet, コード, サイト, ファイル, ブログ, プログラム, ベタ, ヘッダー, 一括, 下記, 不明, 不良, 今日, 体調, 作成, 先日, 内, 原因, 回復, 変更, 実際, 導入, 挿入, 方法, 日曜日, 最後, 背景色, 自分, 記述, 設定,
広告を挿入される無料レンタルサーバーの仕組み。
2021.03.19
タイトル通り、広告を挿入される無料レンタルサーバーの仕組みはこれだけだと思います。ApacheでWEBサーバーを構築することで可能だということを知っているのですが、nginxではどうかはまだ調査中です。広告をどのタイミングで入れ込んでいるかというと表示する間際でApacheのモジュール、mod_layoutを使用して広告を差し込んでいるだと思います。
差し込み方法はこんな感じです。
AddOutputFilter LAYOUT html htm cgi php
LayoutHeader /header.html
LayoutFooter /footer.htmlこうすることで、サーバーの配下に広告を差し込んでいるだと思います。LayoutHeaderやLayoutFooterがどのような役割をしているかはググると解説サイトがありますのでそちらを参照ください。あと、このモジュールの入れ方を解説しているサイトがありましたので紹介します。
Apache2.4.6にmod_layoutを導入する >>https://qiita.com/mr_wednesday/items/8b799aacf41447c004e7
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
AddOutputFilter, Apache, cgi, footer, header, htm, html, layout, LayoutFooter, LayoutHeader, mod, nginx, php, web, こと, これだけ, サーバー, サイト, そちら, タイトル, タイミング, モジュール, レンタル, 使用, 入れ方, 参照, 可能, 広告, 役割, 感じ, 挿入, 方法, 構築, 無料, 表示, 解説, 調査, 配下, 間際,
VirtualBoxで共有フォルダ設定とApacheが表示されるまで。
2020.11.29
前処理としてこのコマンドを打つ。
yum -y groupinstall "Development Tools"
yum -y update kernel
yum -y install kernel-devel kernel-headers gcc gcc-c++起動したらメニューから[デバイス]-[Guest Additions CDイメージの挿入]
mount /dev/cdrom /mnt
cd /mnt
./VBoxLinuxAdditions.run
rebootcd /var/www/
ln -s マウント先 sf_htmlgpasswd -a oreore vboxsf
gpasswd -a apache vboxsf
mount -t vboxsf -o dmode=0755,fmode=0755 （共有名） (マウント先）
rebootApacheのconfig設定ではリンク先はシンボルリンクを参照させとこう、これでリブートさせて完了やねん。さてこれで理解できたら、あなたは凄いです。これは単なるメモ書き記載なので、わからないと思います。
なので、参考にしたサイトのリンクを貼っときます。
http://itemy.net/?p=1355
https://www.codelab.jp/blog/?p=2587
これらでおそらく大体の人が理解できたと思います。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
-o, -s, -t, -y, 0755, A`, Additions, Apache, cd, cdrom, dev, Development, dmode, fmode, gcc, gcc-c, gpasswd, groupinstall, Guest, html, install, kernel, kernel-devel, kernel-headers, ln, mnt, mount, oreore, quot, reboot, run, SF, Tools, UPDATE, var, VBoxLinuxAdditions, vboxsf, virtualBOX, www, yum, イメージ, コマンド, デバイス, フォルダ, マウント, メニュー, 共有, 前処理, 挿入, 表示, 設定, 起動,