2025エイプリルフール振り返り(2025.4.2)

さて平成37年(2025年)のエイプリルフール、お楽しみいただけましたでしょうか
企業サイトとかで4月1日だけ様子がガラッと変わるやつ、1回やってみたかったんよね！サイト開設当初からやりたがってはいたものの、なかなかサイトいじりパワーが足りずに昨年は断念したのですが結構HTMLもCSSも自由に扱えるようになってきた本年、満を持してイタズラさせていただきましたという事でしたそしてやっぱり結構かなり準備が大変だったので流石に振り返り記事を残したい GO

まず平成の個人サイトを作ろう！！という大枠のアイデア自体は結構早いうちに思いついておりましてなおここで言う平成は｢00年代｣を指します携帯ホムペだのキリ番だの前略だのオエビだのが蔓延っていた時代……世代がバレそうだなまあいい
一応｢平成　個人サイト｣とかで検索すると似たようなことやってる方は見つかるんですがなんかもっと…！もっと具体的に｢平成の女性向け趣味絵サイト｣を目指したい…！！と思い、大格闘が始まりました
もうだいぶ記憶が薄れていますが当時実際にショボいサイトを運営していたので、当時の自サイトやリンクを貼ってた他サイト様を思い出しつつ案出ししていくゥ

これでどうだ！！！フレームで作ったメニューバー、カウンターとキリ番報告、作品リンクは■で並べる、同盟バナーも並べて貼る、おえび(お絵描きBBS)、等…！！結構解像度高いんじゃないか？色々思い出している間にメル画とか…あったな…と思いましたがあれは別に文化であってサイトに直接関係するものではないのでパスちょっと見てみたかったけど自分で作るのはこう、耐えられなさそうだったのでやっぱりパス誰かフランクくんのメル画あったらください

とにかくなんとなく概形がイメージできたのでHTMLとCSSをこねくり回して再現していくこねくり回して再現していくと一言で書きはしたがこれがかな～～～～り大難航大混乱だったので後世のために(？)特につまづいた部分はここに書き記しちゃうさながら平成個人サイト文化保存委員会伝統文化みたいに言うなしかしこんな辺鄙サイトに置いていても(定期)ではあるのでなんか良い置き場所を思いついたらもうちょっと人目に付く場所に置き直したいと思っています
まずは完成形をボン、その下にそれぞれ要素の再現方法を書いてこ～

▼左側に固定するメニューバー(flameもどきのflexbox)

本来こういう左右分割画面はframeとかiframeというHTMLタグを使って作るのが一般的？なんですが、なんとWordpressではタグが無効になるらしい…！？プラグインを使えば出来ないことも無いけど細かい設定が難しそうだったのでお得意のFlexboxで疑似フレームページとして見せかけることにしました左のメニューバーの右端に灰色太めの境界線を入れているだけです
ただしこれだけだと右のコンテンツが下スクロールするときに一緒に動いちゃうのでposition: fixedで左上に固定してやっています

【HTML】
<div class="f-parent">
 <div class="f-left">
  左側に配置するコンテンツが入る
 </div>
 <div class="f-right">
  右側に配置するコンテンツが入る
 </div>
</div>

				
					
				1
2
3
4
5
6
7
8

						<div class="f-parent">
 <div class="f-left">
  左側に配置するコンテンツが入る
 </div>
 <div class="f-right">
  右側に配置するコンテンツが入る
 </div>
</div>

					

			

【CSS】
.f-parent{       /*flex親*/
    display: flex;
    height: 100vh;
}
.l-menu{         /*flex子①(左メニュー)*/
    position: fixed;
    top: 0;
    left: 0; 
    height: 100vh;
    background: #ffffff;
    width: 320px;
    box-shadow: inset -1px -1px gray;
    border-right: 4px solid;
    border-color:  silver ;
}
.r-contents{     /*flex子②(右コンテンツ)*/
    height: 100vh;
    margin: 50px 0 0 370px;
}

				
					
				1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

						.f-parent{       /*flex親*/
    display: flex;
    height: 100vh;
}
.l-menu{         /*flex子①(左メニュー)*/
    position: fixed;
    top: 0;
    left: 0; 
    height: 100vh;
    background: #ffffff;
    width: 320px;
    box-shadow: inset -1px -1px gray;
    border-right: 4px solid;
    border-color:  silver ;
}
.r-contents{     /*flex子②(右コンテンツ)*/
    height: 100vh;
    margin: 50px 0 0 370px;
}

					

			

▼右から左に流れていく文字（marquee）

こういうやつ流れる向きを逆にするとか速さ変えるとかはやり方わからん
動かしたい文字列をHTMLタグのmarqueeで囲ってやると右から左に流れていく！簡単！あとはCSS側で背景とか文字色を入れてるだけです

【HTML】
 <marquee>流したい文字列</marquee>

				1

						 <marquee>流したい文字列</marquee>

【CSS】
marquee{
background: #000000;
color: #ffff00;
width: 100%;         /*メニューバー内の幅ミチミチに流す*/
}

				1
2
3
4
5

						marquee{
background: #000000;
color: #ffff00;
width: 100%;         /*メニューバー内の幅ミチミチに流す*/
}

▼newとか相互とかのちっこいGIF素材

そもそも当時の雰囲気の素材屋さんが絶滅寸前になっていて使わせていただく素材を探すところから大変どうにか見つけたサイト様からGIF素材をDLして普通にWordpressメディアライブラリからUP、画像URLを貼り付ける…のは普通なんですがなんか本来のピシッとしたドット絵で表示してくれないちょっとぼやけているこれ解決にものすごい苦戦したのですがどうやらあまりにも小さすぎるGIF(Tiny GIF)はWordpress側のお節介で勝手にアンチエイリアスがかかってしまいぼやけるらしいいらんことをするな一応img要素に対するCSSでピクセルでちゃんと表示するよう指定してやればぼやけは解消出来ましたこれ難しかった～～ChatGPTに教えてもらいましたありがとう

img.sozai{
    image-rendering: pixelated; /* ピクセル単位で正確に表示 */
    image-rendering: crisp-edges; /* 拡縮する場合もドット絵を維持 */
}

img.sozai{

image-rendering: pixelated; /* ピクセル単位で正確に表示 */

image-rendering: crisp-edges; /* 拡縮する場合もドット絵を維持 */

}

▼ゴツいスクロールバー

これは既に理想に近いスクロールバーをカスタムしているサイト様のCSSを参考に作った！が、どうやらスクロールバーはカスタムして標準の状態から手を加えると上下ボタンの▲▼マークが消し飛ぶらしいんでこれも戻すのがかなり難しいらしいのでそこはもう仕方なく諦めたちょっともう忘れかけてて詳しく説明しないがCSSはこんな↓　HTMLにはなにもしてません

*::-webkit-scrollbar {
    background: none;
}
*::-webkit-scrollbar-button {
    background-repeat: no-repeat;
}
*::-webkit-scrollbar-thumb, *::-webkit-scrollbar-button {
    background: silver;
    box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px gray;
    border: 1px solid;
    border-color: silver #000 #000 silver;
}
::-webkit-scrollbar-track {
    background-color: #dedede;
}

*::-webkit-scrollbar {

background: none;

}

*::-webkit-scrollbar-button {

background-repeat: no-repeat;

}

*::-webkit-scrollbar-thumb, *::-webkit-scrollbar-button {

background: silver;

box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px gray;

border: 1px solid;

border-color: silver #000 #000 silver;

}

::-webkit-scrollbar-track {

background-color: #dedede;

}

▼更新履歴のちっちゃい窓

こ
う
い
う
や
つ

これはCSSで縦幅をわざと履歴の長さよりも短くして、表示できない部分をスクロールさせてねっていう設定でやっていますスクロールバーは全体のわざとゴツくしたやつと一緒になるのでニッコリ個別に変える方法もあった気がする

【HTML】
 <div class="rireki">
履歴とかの文字列
何行でもOK
</div>

				
					
				1
2
3
4

						 <div class="rireki">
履歴とかの文字列
何行でもOK
</div>

					

			

【CSS】
.rireki{
height: 79px;         /*何行か分の高さに揃えると見映え良い*/
width: 300px;
overflow-y: scroll;
border: black solid 1px;
padding-left: 5px;
background: #ffffff;
}

				
					
				1
2
3
4
5
6
7
8

						.rireki{
height: 79px;         /*何行か分の高さに揃えると見映え良い*/
width: 300px;
overflow-y: scroll;
border: black solid 1px;
padding-left: 5px;
background: #ffffff;
}

					

			

大体こんなかなんか抜けてるものもあるかもしれんいやしかし作っててヒシヒシ思いましたけど令和のサイトってのはどこもかしこもシンプルでなんか至る所の角が丸くてフォントも可愛くてエモい感じがヨシとされている！！！！意味の分からんドロップシャドウが効いたごっついスクロールバー、アンチエイリアス皆無のドットで表現されたMS Pゴシック…再現するのにいくら検索してもやり方が出て来ない…！なんならこうなっちゃった時の対処方法ばかりがヒットする対処したいんじゃないが！？！時代に逆行するのがこんなにも難しいのかと痛感しました結局検索で解決できなかったものは再現できているサイトをどうにかこうにか掘り出してきてデベロッパーツール(F12)でコードを拝借するゴリ押し手法で解決して参りました平成デザインを貫いている数少ないサイト様たちに圧倒的感謝の意…！
あとは「平成の表現」の塩梅も難しかった、今の自分と同年代くらいの人が当時運営しているサイトの雰囲気で作りたいんだけど油断すると平成の表現(年代に関わらずその時代に流行ってた表現)なのか厨二の表現(学生だった当時の自分とその周辺が使ってた表現)なのかの区別が…！危うくて…！！orzとか(爆)みたいなあったよな多分みんな使ってたよな最近めっきり見ないのう…(インターネット老人)

なおエイプリルフール限定のお遊びページのつもりでしたが愛着沸いてしまったし平成個人サイト文化保存委員会なので(？)これはページごと残しておこうかななおカウンター(SlimStat Analyticsプラグイン使ってます)は置いとくと普通のビカビカまで解析されて邪魔なので4/2以降はダミーで不変の数字にしときますその他仕様はリンクと共に下にまとめておきます万が一参考にしようとした方がいて上で説明しきれてない部分でお困りでしたらデベロッパーツールでガンガン調べ回ってもらって大丈夫ですド素人が書いたコードなのでバカ見にくいかもしれんが何卒、何卒

▼ビカビカ平成ver.▼

※仕様について※

・カウンターの数字はダミー(不変)になっています(のでキリ番は無効)
・BBSはそのまま機能しますが、特に通知も無いので書き込んでも気付かない可能性が高いです
・お絵描きBBSも機能しますこれも通知ないです辿り着く方法が限られてて滅多に人に見られることはないはずなので、
宜しければなんか描いていってもらえると気付いたときに私が大喜びします
・MAILも機能しますこれは私に通知が入るのでもしここから何か送られましたら通常通りMEMOにてお返事します
・他なにか気になることがありましたらTOPの匿名メッセージか平成サイト内のMAILにてお寄せください

【蛇足おまけ】Spotify
専用の作業用プレイリストまでちゃんと作って平成に没入して準備したのでついでにご覧になって！もはや森は全然関係ない曲ばかりですが同世代のオタクには刺さるかもしれないなつかし～～！となった方は同世代かつ同じような道を辿ってきた方ですね、へへ本当は某庭球部員たちのキャラソンとか他にも入れたいのあったんだけどSpotifyに無くて…！ちなみに個人的にDive to worldが作業のノリノリ具合とノスタルジーパワーで優勝でした某ヒットマンのオタクキッズをしていましたあ～なつかし以上です