昨日に引き続き、今日もサイト改築をしていた話

2026/06/11(木)昨日に引き続き、今日もサイト改築をしていた話

投稿日：2026/06/11

昨日の改築で一旦Webツールとリンク集は何とかなったので、今日は他の部分をやっていた。いや、Webツールはドメイン変えた以外なんもしてないに等しいが…。（仕組み上、中の実装を直すとか、内部ディレクトリの整理とかはしているので、何もしていないわけではないが見えない部分なので…）

トップページのサイトリンクを修繕し、リンクをリッチに

まだまだ整備中だが、いったん最低限見れる形にはなったと思う。

まずこれが昨日時点の状態。ECO-Wikiのリンクなど様々なものがなくなっている上に、リンクも単なる文字になっていてしょぼくなっている。

今日はまずテキストの地味なリンクをバナータイプに変更したうえで、元々あったが消滅してしまっていたリンクを復活させた。

逆にSNSなどのリンクが消滅しているが、これについては次に話す自己紹介ページに移設している。

トップページはフルスクラッチで作り上げたリンクページと異なり、既存資材をベースに作り替えているため今のところモバイルファーストな設計にはなっていないが、恐らくスマホで見ても支障はないと思う。少なくとも私の環境では問題なかった。

またこのバナータイプのレイアウトの作成に当たってはprofile/ななっちのサイトを参考にさせていただいた。

自己紹介ページの作成

こちらはまだ整備中で、資材が散乱している状態だ。

まずこれが昨日時点での自己紹介ページ。びっくりするほど何もない。因みにタイムスタンプは次のサブルーチンを作って実装していて、この実装に当たってはてがろぐを作られているにししさんPerlでファイルの最終更新日時を得るにはの記事と、時間 - とほほのWWW入門が非常に参考になった。

この程度の処理でTime::PieceやDateTimeを使うのは甘えだと思ったので、ネイティブで実装できたのはよかった。

sub lastmodified {
    my $filename = shift;
    my ($sec, $min, $hour, $mday, $buf_mon, $buf_year, $wday) = localtime((stat $filename)[9]);
    my $year = $buf_year + 1900;
    my $mon = $buf_mon + 1;

    return sprintf('最終更新日: %04d-%02d-%02d %02d:%02d:%02d', $year, $mon, $mday, $hour, $min, $sec);
}

さて自己紹介ページについては現状はここまで作った。SNSのリンク集はトップページから剥がしてきたものをそのまま貼り付けているだけなので何とも統一感がない感じだ。

ぶっちゃけアイコンとその横の三行の紹介を作るのに心血を注いだため、それ以外が雑な状態である。

アイコン部分はMastodon v4.5.9のアカウントページのレイアウトを模倣して作っていて、アイコンの周りにぼんやりした枠があるのがポイントだ。

こちらはアイコンのある行だけモバイルファーストで作っているが、全体のレイアウトが決まっていないので、また変えるかもしれない。

自己紹介ページには没になったレイアウトもあり、縦軸に十字を入れたら中二病感が出てよいのでは！？と思って試したのだが、元々そういうサイトでないためハマらず、これは没にした。

参考までに、この十字レイアウトはホロライブのタレント紹介ページにあったものをリスペクトして作っていた。テーブルは使っておらずDL, DT, DDをtable, table-cellとして扱い、DTのafter`に1pxの縦矩形を仕込んだものになる。

CSSの例としてはこんな感じ。

dl {
    display: table;
    width: 15.5em;
    border-bottom: 1px dashed #000;
}

dt {
    position: relative;
    display: table-cell;
    width: 7.5em;
    padding: 5px;
    font-weight: bold;
}

dt::after {
    content: "";
    position: absolute;
    background-color: #000;
    width: 1px;
    height: 15px;
    right: 0;
    bottom: -8px;
}

dd {
    display: table-cell;
    width: 6m;
    padding: 5px;
}