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ファイルの背景色を変えることが可能です。
タグ
3, body, coding, colors, css, cssfile, description, examplestyle, gt, href, ID, javascript, JS, link, lt, quot, rel, site, span, stylesheet, コード, サイト, ファイル, ブログ, プログラム, ベタ, ヘッダー, 一括, 下記, 不明, 不良, 今日, 体調, 作成, 先日, 内, 原因, 回復, 変更, 実際, 導入, 挿入, 方法, 日曜日, 最後, 背景色, 自分, 記述, 設定,
jsのクリックイベントの謎??
2019.06.22
javaScriptとjqueryのクリックイベントの挙動が違うのは
わかったのですが・・・。
これは結構奥が深い気がします。
See the Pen jsのクリックイベントの謎?? by taoka (@taoka-toshiaki) on CodePen.0
タグ
0, 265, BY, codepen, default, embed, gt, hash, Height, href, html, ID, io, javascript, jquery, JS, lt, ON, Pen, QXprJX, result, See, slug, tab, taoka, taoka-toshiaki, The, theme, user, イベント, クリック, これ, 奥, 挙動, 気, 謎,
単純なコードで背景色にグラデーション。
2019.06.15
単純なコードで背景色にグラデーションつける。
このコード自体は単純なコードです、ですが・・・。
気に食わないので何度も初期の色コードを設定を変えてみたのですが
鮮やかさがでません。ちょっとドス黒いグラデーションのまま。
コードを貼り付けておきます。
一時間ぐらい色を変えて遊んでました: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, グラデーション, コード, ドス, まま, 一, 何度, 初期, 単純, 背景色, 自体, 色, 設定,
文字の置き換え と コールバック
2019.06.08
お蔵入りしたコードです。文字の置き換えとコールバック関数です。
置換する際に、それぞれ違う文字に置き換えて表示したいなどに
使用すると便利かなと思います。
See the Pen 文字の置き換え と コールバック by taoka (@taoka-toshiaki) on CodePen.0
タグ
0, 265, BeXapO, BY, codepen, default, embed, gt, hash, Height, href, html, ID, io, lt, ON, Pen, result, See, slug, tab, taoka, taoka-toshiaki, The, theme, user, お蔵入り, コード, コール, それぞれ, バック, 使用, 便利, 文字, 置換, 表示, 関数, 際,
グーグル画像検索リンク抽出とYahoo画像検索リンク抽出!!
2018.01.15
昨日Qiitaで公開したコードです。プラスYahooも作ってみたよ。
php5.6
ライブラリ Goutte
説明:コマンドラインから巨人ぐーぐるさんの画像検索に検索内容を投げHTMLを抽出後、
HTML解析を行い画像リンクだけを抽出するものです。コメントを外しダウンロードディレクトリを
作成すればダウンロードが可能ですが、あくまでもローカルで動かす事を前提としています。
尚、機械学習の為に画像収集するには少し数が少ないですね・・・(水増し)orz。
リンクはこちら
ライブラリはググってインストールして下さい。
おそらくレンタルサーバーなら大体、標準がPHP5.6だと思います。
PHP7とかで動いている場合もあるだろうけれど・・・。
ライブラリはバージョン2系を自分はインストールして作成しました。
<?php date_default_timezone_set('Asia/Tokyo'); include '/composer/vendor/autoload.php'; use Goutte\Client; $p=count($argv)>=2?$argv[1]:"cat"; $client = new Client(); $client->setHeader('User-Agent', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36'); $crawler = $client->request('GET',"https://www.google.co.jp/search?hl=fr&tbm=isch&source=hp&biw=1920&bih=959&q={$p}&oq={$p}&gws_rd=cr&dcr=0");//'https://www.google.com/search?hl=fr&tbm=isch&source=hp&biw=1920&bih=959&q='.$p.'&oq='.$p); $img = $crawler->filter('div.rg_bx.rg_di.rg_el.ivg-i')->each(function($element){ if(preg_match("/\"ou\":\".*\"\,\"ow\"/",$element->text(),$link)){ $url = str_replace(array('"ou":"','","ow"'), "",$link[0]); $ext = pathinfo($url, PATHINFO_EXTENSION); $name = pathinfo($url,PATHINFO_FILENAME); echo $url."\n"; if(preg_match('/((jpg)|(jpge)|(png)).*/',$ext)){ //$data = file_get_contents($url); //file_put_contents('./download/dl_'.$name.".".$ext,$data); //echo '<img src="'.'./download/dl_'.$name.".".$ext."\">\n"; } } });
こちらがYahoo版ですが、あまり抽出出来てません。
<?php date_default_timezone_set('Asia/Tokyo'); include '/composer/vendor/autoload.php'; use Goutte\Client; $p=count($argv)>=2?$argv[1]:"cat"; $client = new Client(); //$client->setHeader('User-Agent', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36'); $crawler = $client->request('GET','https://search.yahoo.co.jp/image/search?p='.$p.'&rkf=1&oq=inu&ei=UTF-8&imc=&ctype=&dim=large'); $img = $crawler->filter('.gridmodule .SeR .tb a')->each(function($element){ if(!preg_match("/.*search\.yahoo\.co\.jp/",$element->attr('href'),$link)){ $url = $element->attr('href'); $ext = pathinfo($url, PATHINFO_EXTENSION); $name = pathinfo($url,PATHINFO_FILENAME); echo $url."\n"; if(preg_match('/((jpg)|(jpge)|(png))$/',$ext)){ //$data = file_get_contents($url); //file_put_contents('./download/dl_'.$name.".".$ext,$data); //echo '<img src="'.'./download/dl_'.$name.".".$ext."\">\n"; } } });
タグ
'User-Agent', 63.0.3239.132 Safari, AM, AppleWebKit, Asia, autoload.php', href, img src, like Gecko, new Client, pathinfo, PATHINFO_EXTENSION, PHP5.6, setHeader, Tokyo, use GoutteClient, Win64, Windows NT 10.0, ライブラリ, 巨人ぐーぐる,
ANA旅割逆算日導きサービスモバイル版:最終
2016.05.04
<!DOCTYPE html>
<html>
<head>
<title>ANA旅割逆算日導きサービス(mobile)</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="jquery-mobile/jquery.js"></script>
<script src="jquery-mobile/jquery.mobile-1.4.5.min.js"></script>
<style>
.ui-page{
background:#73cbe6;
}
</style>
<script>
$(function(){
$("#ckday").click(function(){
//alert($("#day").val().replace(/\-/g,'\/'));
$.ajax({
type: 'POST',
url: "../ana_calendar/json.php",
data:{day:$("#day").val().replace(/\-/g,'\/')},
dataType: 'json',
success: function(obj){
var str = '<ul id="ana_listview" data-role="listview">\n';
str = str + '<li>予定日:' + obj.anaday + '</li>\n';
str = str + '<li>75日[旅割]の予約期日:' + obj.day75 + '</li>\n';
str = str + '<li>55日[旅割]の予約期日:' + obj.day55 + '</li>\n';
str = str + '<li>45日[旅割]の予約期日:' + obj.day45 + '</li>\n';
str = str + '<li>28日[旅割]の予約期日:' + obj.day28 + '</li>\n';
str = str + '<li>21日[旅割]の予約期日:' + obj.day21 + '</li>\n';
str = str + '</ul>\n';
$("#ana_api").html(str);
$("#ana_listview").listview().listview('refresh'); ;
}
});
});
});
</script>
</head>
<body>
<div data-role="page" data-title="ANA旅割逆算日導きサービス(mobile)">
<!--ヘッダー領域-->
<div data-role="header">
<h1>ANA旅割逆算日導きサービス(mobile)</h1>
</div>
<div role="main" class="ui-content">
<input type="date" id="day">
<button id="ckday" class="ui-btn">逆算する。</button>
<span id="ana_api"></span>
</div>
<div data-role="footer">
<h3>Copyright zip358.com</h3>
</div>
</div>
</body>
</html>
ANA旅割逆算日導きサービスモバイル版:最終として webから逆算日を導きだすサービスを公開します。
ほんと・・・簡単なものですので 最初からwebで作れたんじゃねぇっていう疑惑が あると思うです。
webゴニョゴニョ…(ノ゚д゚(; ̄Д ̄)っていう誘惑は モバイル版のアプリを作る時からありましたが アプリ作るよって言ったので、有言実行ということで 作ってみました。
作った結果ですけど・・・ ウェブで作れるものはウェブで作ったほうが手間暇かからないという事がわかりました。 http://zip358.com/tool/ana_calendar/?[PC]
zip358.com/tool/ANAmobile/?[モバイル] ?
タグ
1.0, 1.4.5, 8, ANA, charset, content, css, device-width, DOCTYPE, gt, head, href, html, http, initial-scale, jquery, jquery-mobile, link, lt, meta, min, mobile, name, quot, rel, stylesheet, title, UTF-, viewport, Width, サービス, モバイル, 旅割, 最終, 逆算,