オンリー | Be Yourself

新着記事紹介を電光掲示板2CSSに切り替えました.

2025.10.04

おはようございます.気温って徐々に寒くなるのではなくていきなり変わっていくものなのかも知れません、これも温暖化の性なのかも.

さて、「新着記事紹介を電光掲示板2CSSに切り替えました.」の話をしていきます.お気づきかも知れませんがトップページの新着記事紹介を変えました.これにより何得かは分かりませんが以前よりシンプルなトップページになった事は確かかも.

因みに自分はCSSがあまり好きではないのですが、CSSオンリーで電光掲示板を作れたのもChatGPTのおかげです.でも、彼の作った電光掲示板が良いなと思っています.ググっても上位表示しないけど一番、電光掲示板に近いCSSコードだと思います.

そのうち彼の作った電光掲示板CSSに変える可能性はあります.彼のコードを参照して作ってとChatGPTにお願いしても出てくるコードは全く別物ばかりで…呆れ顔.

トイウコトで今回作ったコードはそのうち変えますのでお裾分けです.

<div class="slide">
    <ul>
        <li>ABC TEST</li>
    </ul>
</div>

        @import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

        .slide {
            margin: 20px auto;
            width: 90%;
            /* スマホでも見切れないように */
            max-width: 600px;
            overflow: hidden;
            background: #000;
            border: 3px solid #111;
            border-radius: 8px;
            box-shadow: 0 0 20px #000 inset;
            position: relative;
        }

        /* LED風ドット背景 */
        .slide::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
            background-size: 4px 4px;
            background-color: #302f2f;
            pointer-events: none;
            z-index: 0;
        }

        /* スクロールテキスト */
        .slide ul {
            display: inline-block;
            margin: 0;
            padding-left: 100%;
            white-space: nowrap;
            animation: SlideAni 15s linear infinite;
            position: relative;
            z-index: 1;
        }

        /* テキストスタイル */
        .slide ul li {
            display: inline;
            margin: 0 80px 0 0;
            font-size: clamp(10px, 2vw, 16px);
            letter-spacing: 0.1em;
            font-family: "DotGothic16", "Noto Sans JP", "MS Gothic", monospace;
            color: #0f0;
            text-shadow:
                0 0 2px #0f0,
                0 0 5px #0f0,
                0 0 10px #0f0,
                0 0 20px #0f0;
            animation: Flicker 0.2s infinite alternate;
            image-rendering: pixelated;
            /* ピクセル感強調 */
            filter: contrast(180%) brightness(1.3);
            /* LEDっぽく */
        }

        /* 横スクロールアニメーション */
        @keyframes SlideAni {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-100%);
            }
        }

        /* チラつきアニメーション */
        @keyframes Flicker {

            0%,
            18%,
            22%,
            25%,
            53%,
            57%,
            100% {
                opacity: 1;
            }

            20%,
            24%,
            55% {
                opacity: 0.7;
            }
        }

        /* --- レスポンシブ対応 --- */

        /* タブレットサイズ */
        @media (max-width: 768px) {
            .slide {
                max-width: 90%;
            }

            .slide ul li {
                margin: 0 40px 0 0;
            }

            .slide ul {
                animation: SlideAni 18s linear infinite;
                /* ややゆっくり */
            }
        }

        /* スマートフォンサイズ */
        @media (max-width: 480px) {
            .slide ul li {
                margin: 0 24px 0 0;
            }

            .slide ul {
                animation: SlideAni 22s linear infinite;
                /* スマホではさらにゆっくり */
            }
        }

明日へ続く

著者名 @taoka_toshiaki

※この記事は著者が40代後半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2025年10月04 07:00日

タグ

ChatGPT, css, おかげ, オンリー, お気づき, お裾分け, お願い, ググ, コード, これ, シンプル, トイウコト, トップページ, もの, 一番, 上位, 今回, 以前, 別物, 参照, 可能, 好き, 掲示板, 新着, 明日, 気温, 温暖, 確か, 紹介, 自分, 表示, 記事, 電光,

去年出来なかったダイエット、どこまで減量、増量したのか？

2022.01.07

Logging

おはよう御座います。昨日、お餅を2つ食べただけで体重が1kg増えておりました。

さて、去年か一昨年ダイエットすると公約した訳ですが今現在、全然減っておりません（少し減量）？。体重の経過はこんな感じです、ダイエット宣言した当初の体重は82kgでした。そこからウォーキングなどをして70kgまでは体重が落ちていたのですが、ここ数ヶ月で76kgまで体重が増えてしまいました。

https://www.youtube.com/watch?v=_YbP4_HhgsM

このままでは前の体重に戻ってしまうということで、何とかしないといけないなと思っております。まず今回は食べる量も少し減らし、運動をして筋肉を付けるということを行おうと思います。ウォーキングだけでは減量出来ないのでウォーキングの中に軽いジョギングを追加しようと思っております。出来ればジョギングオンリーにしたいのですが今の体重で走ると確実に足に負担がかかるので長続きしないと思います。

あと、腹筋や腕立て伏せなども取り入れて短期間で減量出来ればと思っております、どうなるかは分からないですがこのままではヤバいので今日から始めようと思います。

因みに短期間で痩せる方法は筋肉をつけることらしいという事は知っていたのですが今まで逃げてました・・。しかし今年はトライします！

体重経過は毎日、ツイートします。
目標体重は60kgとします。

体重経過はこちらのサイトで確認できるようにします。
https://zip358.com/fit-fat/ [本日中に開設]

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年01月07 07:11日

タグ

１, 2, 70, 76, 82, com, https, kg, watch, www, youtube, ウォーキング, オンリー, お餅, ここ, こと, このまま, ジョギング, そこ, ダイエット, どこ, 一昨年, 中, 今, 今回, 今現在, 体重, 公約, 前, 去年, 増量, 宣言, 少し, 当初, 感じ, 数, 昨日, 減量, 筋肉, 経過, 訳, 負担, 足, 追加, 運動, 量, 長続き,

スマホ決済の今後。

2019.11.14

Logging

スマホ決済の今後、都市ではSuicaだけあれば
ほとんどの店舗で使用できるようになり、地方ではPaypayだけで
十分使用できるようになるかと思います。

ちなみにYahooとLINEが経営統合すれば間違いなく、そうなりそうな
気がします。高知県ではスーパーは楽天と提携している店舗が多いです。
スーパー以外はPaypayとLINE Pay決済のアプリを入れていれば
60％の確率で決済可能です。

現金オンリーというお店はありますが…。
徐々に増えていくと思います。

銀行ペイなどもありますが、今後ソフトバンクが地方銀行を
提携していくか買い取っていくと思います。

著者名 @taoka_toshiaki

※この記事は著者が30代後半に書いたものです．

OFUSEで応援を送る

投稿日時 2019年11月14 06:08日

タグ

60, line, Pay, Paypay, Suica, Yahoo, アプリ, オンリー, お店, スーパー, スマホ, ソフトバンク, ペイ, ほとんど, 今後, 使用, 十, 可能, 地方, 店舗, 提携, 楽天, 気, 決済, 現金, 確率, 経営, 統合, 都市, 銀行, 高知県,

画像をタイル状に分離して一括ダウンロードさせるジェネレーター

2019.09.07

Logging

画像をタイル状に分離して一括ダウンロードさせるジェネレーターを
作ってみました。画像は自動的に削除されます？
あることをすれば他人の画像がアップした画像も削除されます。
ちなみに一括ダウンロードbuttonを押すと画像がサーバー上に保存され
強制ダウンロードが始まります。
動作はブラウザChromeオンリーです。
また一括ダウンロードを押すと複数のファイルを一括ダウンロードするか
どうかの問い合わせが表示されますので「はい」を
選択してください。尚、30秒以内に保存されていないファイルは
次々と削除されます。
サイトはこちらから
https://zip358.com/tool/demo5/index-14.html
ソースコードは下記になります。
ページ（base64生成＋画像ダウンロード処理）

追記：zipファイルにより格納するように処理を変更しました。
参考にしたサイト：https://ex1.m-yabe.com/archives/4215

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>画像分離してダウンロード：画像分離ジェネレーター</title>
        <meta name="description" content="画像分離してダウンロード：画像分離ジェネレーター">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="../jquery/jquery-3.4.1.js"></script>
        <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-71682075-1"></script>
        <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-71682075-1');
        </script>        
        <style>
            body{
                background-color: black;
                color: antiquewhite;
            }
            img{
                margin:10!important;
                padding:10!important;
            }       
            #container{
                width: 100%;
            }
            #container img{
                margin:10px;   
            }       
        </style>    
    </head>
    <body>
        <span id="bat"></span><a id="dl"></a>
        <input class="form-control" type="file"></input>
        <div id="container"></div>
        <script>
            $(function(){
                $("[type=file]").on("change",function(){
                    $('#container').html("");
                    $("#bat").html("");
                    console.log($(this));
                    if(!$(this).prop('files')[0].type.match(/[png|jpg|jpge|gif]/)){
                        alert("ファイル形式エラー");
                        return false;
                    }                        
                    var canvas = document.createElement('canvas');
                    var reader = new FileReader();
                    reader.onload = function(event) {
                        var image = new Image();
                        image.onload = function() {
                            sprite = {width:50,height:50};
                            canvas.width = sprite.width;
                            canvas.height = sprite.height;
                            var ctx = canvas.getContext("2d");                            
                            var x = 0;
                            for(var i=0; i*sprite.height<image.height; i++){
                                for(var j=0; j*sprite.width<image.width; j++){
                                    ctx.drawImage(
                                    image,j*sprite.width,i*sprite.height,
                                    sprite.width,sprite.height,
                                    0,0,
                                    sprite.width,sprite.height
                                    );

                                    var spriteElement = new Image;
                                    spriteElement.src= canvas.toDataURL();
                                    $('#container').append(spriteElement);
                                }
                            }
                            $("#bat").html("<input type='button' value='一括ダウンロード' onclick='bat_img()'>");
                        }
                        image.src = event.target.result;                       
                    }
                    reader.readAsDataURL($(this).prop('files')[0]);
                    
                });
            });

            function bat_img(){
                var data = [];
                for(var i=0; i< $("img").length;i++){
                    data.push({"base64":$("img").eq(i).attr("src"),"no":i});
                }
                $.ajax({
                    type: 'POST',
                    url: 'bat_img.php',
                    data:{"obj":data},
                    dataType: 'json'
                }).done(function(obj){

                    if(obj[obj.length - 1 ].chk=="ok"){

                        var link = document.getElementById("dl");
                        link.href = obj[obj.length - 1].zippath;
                        link.download = "zipimg.zip";
                        link.click();

                        var data2 = [];
                        for(var i = 0 ; i < obj.length ; i++){
                            if(i==0){
                                data2.push({Path:obj.path,no:obj.no,t:obj.t,"zipimgpath":obj[obj.length - 1].zippath});
                            }else{
                                data2.push({Path:obj.path,no:obj.no,t:obj.t});
                            }
                            
                        }

                       var del = function(){
                            $.ajax({
                                type: 'POST',
                                url: './bat_del.php',
                                data:{"obj":data2},
                                dataType: 'json'
                            });
                        };
                        del();
                    }
                    });
                }
        </script>
    </body>
</html>

<?php
$i=0;
foreach($_POST["obj"] as $key=>$val){
    $b64 = base64_decode(str_replace("data:image/png;base64,","",$val["base64"]));
    $no = (int)$val["no"];
    $t = time();
    $Path = "./bat_img/tmp/$t-$no.png";
    $re = @file_put_contents($Path,$b64);
    if($re){
        $obj[$i]["chk"] = $re?"ok":"ng";
        $obj[$i]["name"] = "$t-$no.png";
        $obj[$i]["path"] = $Path;
        $obj[$i]["no"] = $no;
        $obj[$i]["t"] = $t;
        $i++;
    }
}
$obj[--$i]["zippath"] = zipfile($obj);

print json_encode($obj);


function zipfile($obj){
    $ZipFiles = function($obj){
        foreach($obj as $key=>$val){
           $path[] = $val["path"];
        }
        return $path;
    };
    $Zip_Files = $ZipFiles($obj);
    $zipFileName = time().'_zipimg.zip';

    set_time_limit(0);
    $zip = new ZipArchive();
    $zipTmpDir = './tmp/zip/';
    $result = $zip->open($zipTmpDir.$zipFileName, ZIPARCHIVE::CREATE | ZIPARCHIVE::OVERWRITE);
    if( $result !== true ){ //エラー処理
      echo 'error!';
      exit();
    }
    foreach ($Zip_Files as $key=>$filepath) {
      $filename=basename($filepath);
    // ZIP圧縮するファイルを追加
    // ファイルパス・ファイル名としないと圧縮ファイルを解凍するとフルパスになる
      $zip->addFile($filepath,$filename); 
    }
    //ZIP 出力
    $zip->close();

    return $zipTmpDir.$zipFileName;
}

<?php

unlink($_POST["obj"][0]["zipimgpath"]);
foreach($_POST["obj"] as $key=>$val){
    $Path = $val["Path"];
    $no = (int)$val["no"];
    $t = (int)$val["t"];
    
    $cmd = function(){
        foreach(glob("./bat_img/tmp/*") as $file_name){
            $command = "rm -rf " . realpath($file_name);
            exec($command);
        }    
    };
    
    if(pathinfo($Path)["extension"]=="png" and preg_match("/bat_img\/tmp/",$Path)){
        if(is_file($Path)){
            sleep(30);
            unlink($Path);
        }else{
            $cmd();
        }
    }else{
        $cmd();
    }

}

著者名 @taoka_toshiaki

※この記事は著者が30代後半に書いたものです．

OFUSEで応援を送る

投稿日時 2019年09月07 12:00日

タグ

１, 14, 30, 358, 4, 5, 64, archives, base, button, Chrome, com, demo, ex, html, https, index, m-yabe, tool, www, zip, アップ, オンリー, コード, こちら, こと, サーバー, サイト, ジェネレーター, ソース, タイル, ダウンロード, はい, ファイル, ブラウザ, ページ, 一括, 下記, 他人, 保存, 処理, 分離, 削除, 動作, 参考, 問い合わせ, 変更, 強制, 格納, 生成, 画像, 表示, 複数, 追記, 選択,

@Blog

過去の蓄積を見るために書く日記.

新着記事紹介を電光掲示板2CSSに切り替えました.

最新記事を非広告記事で読みたい方用のページを作りましたよ😏。

去年出来なかったダイエット、どこまで減量、増量したのか？

スマホ決済の今後。

画像をタイル状に分離して一括ダウンロードさせるジェネレーター