@Blog
過去の蓄積を見るために書く日記.
新着記事紹介を電光掲示板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
タグ
ChatGPT, css, おかげ, オンリー, お気づき, お裾分け, お願い, ググ, コード, これ, シンプル, トイウコト, トップページ, もの, 一番, 上位, 今回, 以前, 別物, 参照, 可能, 好き, 掲示板, 新着, 明日, 気温, 温暖, 確か, 紹介, 自分, 表示, 記事, 電光,
ブログは必要最低限の広告にしました.
2025.09.29
おはようございます.ユニクロさんが秋冬用を変わっていたけど大丈夫かなって思っていたけど、今日はエアコン無しで仕事が出来るような季節になってきましたね.さて、コアなユーザー（読者）さんならお気づきかも知れませんが、広告をかなり削減しました.
広告を削減して良かったことはブログがシンプルになり良かったです、ではデメリット面は何かといえば広告をアフェリエイトに変えたのでクリックしても自分に収益が入らないところです、収益が発生するのは契約を結んだときです（※現時点（2025/09/16）の話です）.
なので収益は発生したら大きいのだけど、前のようなアクセス数があればとかクリックしたら収益が発生するのとは大きく違います.断っておきますが、前のような広告も駆動している所はあります例えばこのサイトの自作ツールサービス部分は以前の広告が動いています.
｛※注意 Adsに変更しましたので、クリックすると収益が発生します（2025/09/23）｝
以前書いたように稼ぎ頭のサービスを閉鎖した時点で収益は激減しました、どれぐらい減ったかというと60％収益が減りました.サービスを閉鎖したらそれぐらい減るのは分かっていたけど閉鎖しました.
ここまで減ったので、もう最低限の広告にしようと決断して今に至ります.広告がいっぱいあるよりシンプルな広告がひとつ有れば良いという考えに至ったのはザッカーバーグ氏などと同じ考えです.
無料で使用して頂いて回転数が上がればその時に広告を貼るという考えです.いま、このブログは毎日50ー60人ぐらいのアクセス数があります.サイトで言えば120超えにはなるのだけどブログはその半分のアクセス数だと思って頂いてOKです.
自分の戦略としてはブログに関しては最小の広告だけにしてリピーターと滞在率を増やして徐々にアクセス数を増やしていこうと思っています.
広告はもしかしたら変わっていくかも知れないけど極力少なくしたいという思いはあります.
話は尽きないですけどここら辺で〆ます、ではまた明日.
明日へ続く
著者名
@taoka_toshiaki
※この記事は著者が40代後半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
ads, OK, アクセス, アフェリエイト, いま, エアコン, お気づき, クリック, グロ, コア, ここ, ここら, こと, サービス, サイト, ザッカーバーグ, サン, シンプル, それ, ツール, デメリット, とき, ところ, どれ, ひとつ, ブログ, ます, ユーザー, ユニ, よう, リピーター, 今日, 仕事, 以前, 使用, 削減, 半分, 収益, 回転, 変更, 大丈夫, 契約, 季節, 広告, 思い, 戦略, 明日, 時点, 最低限, 最小, 毎日, 決断, 注意, 滞在, 激減, 無し, 無料, 現時点, 発生, 秋冬, 考え, 自作, 自分, 読者, 部分, 閉鎖, 駆動,