@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, おかげ, オンリー, お気づき, お裾分け, お願い, ググ, コード, これ, シンプル, トイウコト, トップページ, もの, 一番, 上位, 今回, 以前, 別物, 参照, 可能, 好き, 掲示板, 新着, 明日, 気温, 温暖, 確か, 紹介, 自分, 表示, 記事, 電光,
wordpressのhttps化は基本的に不可能だという事。{現時点では}改め{対応}
2015.08.02
wordpressのhttps化は基本的に不可能だという事がわかった。httpsに変更することはできるができるのは、トップページのみ、それ以外はwordpressの仕様なのかwp_head部分がhttpを指すことがわかったので恐らく現時点ではhttps化は無理だという事が判明。もし、どうしてもhttps化したい場合は他のCMSを使用することをお勧めします。基本的にNET業界はhttpsを推進しているので、そう遠くない時期にWordpressもhttps化を行うだろうと思っています。
※SSL化を試みる方法をぐぐると記載していますが恐らく難しいのではないだろうかと思います。今回、SSL化にあたりDBを一括置換して置き換えてみてたりしたのですが、全然、うまく行きませんでした。おそらくwp_head関連のファイルを変更すれば可能だと思いますが、そこまでしてまでSSL化するほど・・体力がありませんので自分は辞退します。
今回、さくらサーバが提携したラビットSSLを使用してSSL化を試みたわけですが、若干、損をした気分はありますがDLファイル時にSSLのURLでダウンロード出来るようになったので、そこだけは、よかったです。
※ちなみに初期の状態でSSLを使っていたら、おそらく問題なく使用できると思います。
header.phpに書かれているwp_head()が実行されたタイミングでブラグインのjs・cssパスが出力されるので、その内容を書き換えてしまいます。
下記の方法で対応可能になります。
// HTTPS通信時、プラグインがcss・jsパスをhttp://?で出力するのを対策する。 ob_start(); wp_head(); $wp_head_contents = ob_get_clean(); $wp_head_contents = str_replace('http://', '//',$wp_head_contents); echo($wp_head_contents);
上のソースコードは、wp_head()が吐き出す内容をob_start関数で出力バッファリングします。バッファリングした内容を変数に格納して、変数内の文字列にhttp://?で始まるパスがあれば、//?に置換した上でブラウザに出力しています。
こうすることで、http・httpsのどちらにも対応できるようになります。
引用:http://coneta.jp/11936.html
著者名
@taoka_toshiaki
※この記事は著者が30代後半に書いたものです.
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
$wp_head_contents, CMS, css・jsパス, DLファイル時, header.php, head部分, https化, js・cssパス, NET業界, ob_start関数, SSL化, str_replace, WordPress, wp_head, wp_head部分, wp_head関連, wp_https化, さくらサーバ, ソースコード, トップページ, ブラウザ, プラグイン, ラビットSSL, 一括, 仕様, 体力, 内容, 初期, 判明, 変数, 損, 文字列, 時期, 現時点, 若干,
高知県で活動するWEBクリエーター等の情報交換サイト(非公開BBS:現在制作中)です。
2015.05.24
高知県で活動するWEBクリエーター等の情報交換サイト(非公開BBS:現在制作中)です。を自分が作っています、トップページだけ決まりました。あとの事はまだ全然、作っていません・・・。その内、作りますぐらいの予定なので作ったら再度告知をさせてもらいます。おそらく来年の後半ぐらいになってやっと完成しているかもしれないサイトです。このサイト基本的に人が集まることを目的としていません。自分の鈍ったWEB制作の勘を取り戻すために非公開BBSを作ろうとしているだけなのです。また、これとは関係はあまり無いのですがBBSもどきも、BBSもどきからBBSへ完成させます。こちらは非公開BBSよりも先に完成させるつもりでいます。ちなみに完成させた後は、別ドメインでの単独運用となります。いろいろ機能をつけてオリジナルぽっいBBSにはしたいと思っていますが、今のところ普通のBBSになりそうです。
※忘れて作るのを放棄している場合があります。その時はその時でああぁ?怠け者だなと思ってください。
著者名
@taoka_toshiaki
※この記事は著者が30代後半に書いたものです.
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
1, BBSもどき, WEBクリエーター, Web制作, オリジナルぽっいBBS, トップページ, 再度告知, 別ドメイン, 制作中, 勘, 単独運用, 後半, 怠け者, 情報交換サイト, 来年, 機能, 目的, 関係, 非公開BBS, 高知県,