@Blog{zip358.com}
日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。
アイキャッチ画像を表示するように変更。PHPコード
2023.11.25
おはよう御座います、先日アイキャッチ画像を表示するように変更しました、PHPコードはこんな感じです。Bootstrapでレスポンシブ画像に対応しています。アイキャッチ画像を表示するようにした訳はデザインも変えたのでアイキャッチいれても変じゃないかなって思ったことです。そういう訳で先日の休みに対応しましたというのが経緯（いきさつ）です。
<div>
<?php
print get_the_post_thumbnail_url() ? '<img src="' . get_the_post_thumbnail_url() . '" class="img-fluid">' : '';
?>
</div>そんな休みの日にこんなタイムラインが流れてきました、こんなのが浸透したら商売が破綻すると思う人がいると思うけれども、たぶん今の生成AIで凄いことが出来るのに殆んどの人が使えていない。これが浸透するのにかなり月日がかかると思います。一般の人に浸透するにはラグが存在するので、それまでにどうすれば良いか対処出来ると思います。ちなみにポストが消えてしまった時のために上のポストの内容を解説しておくと、画像（デザイン）からフロントエンドエンジニアやデザインナーが行うHTML作成作業を生成AIが変わって行ってくれる。今の所、完璧なコードが生成される訳ではないので手直しが必要ですが、いずれは必要なくなることは時間の問題という話なんだけど、実際ひとが思っている未来の斜め上を行くのが未来かと思います。なので落胆はせずに上手く取り入れていく方が賢明かなって自分は思います。
明日へ続く。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
Bootstrap, class, div>, get_the_post_thumbnail_url, gt, img src, img-fluid", lt, php, print get_the_post_thumbnail_url, quot, アイキャッチ, デザインナー, ラク, レスポンシブ画像, 商売, 手直し, 生成AI, 経緯, 落胆,
tailwind-cssで画面中央に表示するクラスはこれ、中央表示でググっても。
2022.02.08
この頃、Bootstrapからtailwind-cssに変えようと奮闘中で勉強中です。そんな中でググっても中々ヒットしなかった事を紹介します。
tailwind-cssで画面中央に表示する方法を中央表示でググっても画面中央表示がヒットしなかったのは、少しやっかいだなって思いました。何でも検索出来るGさんですが、何度か自分はNot Foundページを見たことがあります。つい最近のNot Foundページは、こんな感じ釣り堀？で釣りをしている宇宙人さんみたいなが表示されます、そしてちょっとした操作が出来ます😌。
脱線した話をもとに戻して…tailwind-cssで画面中央に表示したい場合は、このクラスを付与すると良いですよ😏。
<div class="h-screen w-screen flex justify-center items-center">
<p>center</p>
</div>
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
Bootstrap, center<, div class, div>, gt, Gさん, h-screen w, justify-center items-center", lt, Not Foundページ, p>, quot, screen flex, tailwind-css, クラス, もと, 奮闘中, 感じ釣り堀, 操作, 画面中央,
javascriptの並列処理について
2018.02.13
javascriptの並列処理についてdemoサイトを作りましたので
参照し見てください。尚、コードは下記になります。
注意点とかは下記の画像を参照してみて下さい。
使用してわかったことは落ちないというのは良いことだということ。
落ちても表面上はエラー警告などはないので、結構便利なんじゃないだろうかという事です。
ちなみにこちらがデモサイトのリンクになります。
https://zip358.com/tool/worker/
<!DOCTYPE html>
<html>
<head>
<title>worker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var wkr = new Worker("worker.js");
wkr.onmessage = function(d) {
document.getElementById("wkr").innerHTML = document.getElementById("wkr").innerHTML + d.data + "<br>";
};
</script>
</head>
<body>
<div id="wkr">
</div>
</body>
</html>
var e = 0;
function en(){
e = e + 1;
postMessage((e*3.14));
if(e < 1000)en();
}
en();
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
AM, body>, device-width, div>, DOCTYPE html>, document.getElementById, function en, head>, initial-scale, innerHTML, meta charset, meta name, new Worker, script src, script>, title>, var wkr, wkr.onmessage, worker.js, worker<,
猫でもできるjsでゴリゴリ
2017.06.10
有言実行ということで、ゴリゴリJSのサンプル書いてみました。
と言ってもサンプルなので数行だけです。
唯、これを理解すると結構便利です。使い方は人それぞれだと思いますが
簡単に言えばJSのプラグインの考え方と似ていますね。
最初の部分だけ変更すればプラグインになっちゃうからね。
トイウコトでサンプルです。
本当はボタン押しても何も動かない仕様にするつもりでした。
コンソールログから出力した値から導き出して欲しかったけど
いまどきオープンなので・・・。
サンプルサイトとソースを掲載します。
https://zip358.com/tool/ajikan_js/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>猫でもできるjsでゴリゴリ</title>
<meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../topcoat/main/fonts/stylesheet.css">
<link rel="stylesheet" type="text/css" href="../topcoat/css/topcoat-desktop-dark.css">
<link rel="stylesheet" type="text/css" href="../topcoat/main/css/main.css">
<link rel="stylesheet" type="text/css" href="../topcoat/main/css/brackets.css"><!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script>
$(function(){
var ajikan = {
ajisen:function(){
var str = "味せんべい";
console.log(str);
return str;
},neko:function(){
var str = "猫が";
console.log(str);
return str;
},loop:function(obj){
var cnt = Number($(obj).val());
console.log(cnt);
return cnt;
},taberu:function(ore,str1,str2,cnt){
var o = "";
for(var i=0;i<cnt;i++){
o+=str1;
}
for(var i=0;i<cnt;i++){
o+=str2;
}
o+="たべる？";
$(ore).html(o);
return;
}
};
$("#ore").click(function(){
console.log("oioioi・・投資信託");
var e = ajikan;
e.taberu("#obj",e.neko(),e.ajisen(),e.loop("#cnt"));
});
});
</script>
</head>
<body class="dark">
<div id="wrapper">
<section class="component">
<input type="text" value="" id="cnt">
<input type="button" value="お!!" id="ore">
<div id="obj">
</div>
</section>
</div>
</body>
</html>
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
１, ajax.googleapis.com, AM, console.log, div id, div>, DOCTYPE html>, head>, html5shiv.googlecode.com, input type, link rel, meta http-equiv, return str, script src, script>, str1, stylesheet, title>, topcoat-desktop-dark.css, var ajikan, var str,