雑記（ブログ）

2013年に手組みHTMLからWordPressにリニューアルして10年強が経過、とあることがきっかけでサイトデザインを全体的にリニューアルしました。備忘録も兼ねてやったことをご紹介。

【目次】
・サイトリニューアルせざるを得なかった理由
・サイトデザインはAIにお任せ！
・デザイン上のこだわり？ポイント
・プラグインについて
・サイト構築に注意したこと
・その他デザイン上のお気に入り
・まとめ：サイト構築は難しくない！
・【参考】新サイト構築に一時的に使用したプラグイン一覧

サイトリニューアルせざるを得なかった理由

現行サイトでも満足していてリニューアルは考えていなかったのですが、使用していたプラグインの１つがバージョンアップを停止、PHP7.4までしか対応しておらず、PHPをバージョンアップすると機能が停止してしまう羽目に。しかもそのプラグインがイラスト表示に使用していたので使用しないという選択肢はありませんでした。WordPressからはPHPを早く更新しろとせかされるし、重い腰を上げる羽目になってしまいました。

サイトデザインはAIにお任せ！

そういえば現行サイトはレスポンシブデザインに対応していないな、と思いながらサイトデザイン検討開始。2013年に初めてWordPressを導入した際には当時の知識をフル活用してPHPファイルを作成したけど、今回はAI（Google Gemini）に作成してもらいました。こちらの希望を伝えてPHPコードを書いてもらって微調整。CSSデザインにちょっと苦労したものの、手組み時代と比べて楽にサイト構築することができました。単なるGoogle検索ではなく、こちらの意図をくみ取り様々なPHPコードを提案してくれるなど、開発効率が劇的に向上しました。制作系はAIを使用することをオススメします。

ちなみに、サイト構築用のローカル環境は前回使用したXAMPPからLocal（旧Local by Flywheel）に変更しました。難しい設定や操作が少なく、XAMPPよりも導入・運用が簡単という印象でした。

デザイン上のこだわり？ポイント

現行サイトと同様に「ヘッダー画像を日ごとに切り替える」仕様としています。現行サイトは「基準日から経過した日数を計算し、19種類のヘッダー画像を毎日自動で巡回表示する」というルールに基づき画像を切り替えていました。

<?php
  $firstsunday = mktime( 0, 0, 0, 7, 7, 2024 ); // 
  $diffsec = time() - $firstsunday + 32400; // 
  $weeks = $diffsec / ( 60 * 60 * 24 ); // 
  $weeks = $weeks % 19 + 1; // 
?>
<?php
  $img = get_template_directory_uri() . '/images/title' . $weeks . '.png';
?>
<div class="TitleImage">
  <a href="<?php echo home_url('/'); ?>">
    <?php echo "<img src=\"$img"; ?>" alt="濱撫子の館" width="900" height="230">
  </a>
</div>

しかしながら、こちらのコード生成が悪いのか、表示性能が高いとされるエックスサーバーを使用しているにも関わらず画像表示時間にムラがあり、２秒で表示されることもあれば５秒以上反応がないこともありました。よって、AIと相談しながら「テーマフォルダ/images/headers/に格納されたヘッダー画像（枚数無制限）を自動取得し、日付のハッシュ値から毎日違う画像を決定。決定した画像URLは夜中0時までキャッシュに保存され、2回目以降は即座に出力される」仕様に変更しました。
日替わりでヘッダー画像を表示するプラグインは意外と存在しないのでコードを載せておきます。（function.phpに記載）参考になれば幸いです。

function get_daily_header_url() {
    // 1. データベースに保存された「今日の答え」があるか確認
    $cached_url = get_transient('daily_header_url');
    
    // 2. 答えがあれば、それを返して終了（計算は一切しない）
    if ($cached_url !== false) {
        return $cached_url;
    }

    // --- ここから下は「その日最初の1人」だけが通る重い処理 ---

    $dir_path = get_stylesheet_directory() . '/images/headers/';
    $files = glob($dir_path . '*.jpg');

    if (empty($files)) {
        $url = get_stylesheet_directory_uri() . '/images/default.jpg';
    } else {
        sort($files);
        // ハッシュ計算で画像番号を決定
        $today = wp_date('Y-m-d');
        $index = abs(crc32($today)) % count($files);
        $url = get_stylesheet_directory_uri() . '/images/headers/' . basename($files[$index]);
    }

    // 3. 次の0時までの残り時間を計算して、答えを保存する
    $now = current_time('timestamp');
    $expiration = strtotime('tomorrow midnight', $now) - $now;
    
    set_transient('daily_header_url', $url, $expiration);

    return $url;
}

プラグインについて

プラグイン更新停止に懲りたので、今回はプラグインを可能な限り使用しないことにしました。その結果、現行使用の26個から3つに激減しました。外部プラグインは2つだけ。

・SiteGuard WP Plugin→セキュリティ用
・UpdraftPlus→ローカルＰＣ内のバックアップ・復元用で使用
一番上の「Custom Tag Oorder」は自作プラグインで、イラスト記事に設定しているタグの並び順を自由に変更できるメタボックスを追加するものです。WordPressの仕様によりタグの並び順が「半角数字 ＞ アルファベット ＞ ひらがな ＞ カタカナ ＞ 漢字」となるため、これをドラッグアンドドロップで自由に並び替えることが出来るようにしました。地味に便利な機能だと自画自賛しています(笑)。自作プラグイン制作もAI（Google Gemini）に協力してもらいました。良い時代になりました。

サイト構築で注意したこと

前述の通りプラグインを使用しないスタンスから、お問い合わせページ（page-contact.php）も定番プラグインのContact Form 7から自作に変更しました。こちらもAI（Google Gemini）と相談しながら制作、ハニーポット・CSRF（クロスサイトリクエストフォージェリ）対策・XSS（クロスサイトスクリプティング）対策・サニタイズ・メールヘッダーインジェクション・二重送信防止（PRGパターン）を盛り込んでもらいました。
また、検索フォームについてもXSS（クロスサイトスクリプティング）対策・サニタイズ対応を行っています。

その他デザイン上のお気に入り

現行サイトに存在せず今回実装したのがトップページの「PickUp」コーナーとサイドバーの「イラストから探す」コーナーです。前者はスライダーと呼ばれる画像スライドショー、後者はタグ表示で「3件以上投稿されているタグの中から、アクセスするたびにランダムに20個を選び出して並べる」としています。イラストサイトらしくなったかな？もちろん、レスポンシブデザインにも対応しています。

まとめ：サイト構築は難しくない！

今回のサイト構築にあたり、既存の有償・無償テーマファイル導入を検討したものの、あれもこれもしたいと妄想が膨らみ、結局自分で全部作ることになりました。その殆どのコード出力はAIを活用したものでしたが、逆に言うと、AIの力を借りることでコスパ・タイパに優れたサイトを制作することができました。
皆さんも自作テーマ制作に挑戦してみてください。

【参考】新サイト構築に一時的に使用したプラグイン一覧

・Admin Columns
投稿一覧などの管理画面をカスタマイズ。スラッグの英語化確認で一時的に使用。
・Associate Attachment
メディアライブラリの画像を投稿と関連付け。移行テストで使用。
・Better Search Replace
データベース内のURLまたはその他のテキストを更新。記事と画像の関連付け修正に使用。
・Media Cleaner
使用していない画像ファイルの整理用として使用。
・Media File Renamer
登録済みのメディアファイル名をリネーム。メディアファイルの命名規則統一に使用。
・Media Sync
Uploadsフォルダに格納された画像をメディアライブラリに反映させる。
・Post Type Switcher
投稿タイプ変更。ブログ記事とイラスト記事を分けるために使用。
・UpdraftPlus
ローカルＰＣ内のバックアップ・復元用で使用。
・WordPressインポートツール
本番サイトからのバックアップ用で使用。
・WPvivid Backup & Migration
本番環境への移行用で使用。

pixiv投稿作品の特集サイトpixivisionに、9月に描いたお燐イラストが掲載されました！

2025年1月に初掲載、今回で通算3回目の掲載です。pixivランキング獲得よりも難しいと思われるpixivision選出にこれだけ選ばれるのは嬉しい限りです 😉 ちなみに、選出されたイラスト群のうち、M字開脚はお燐だけでした。そりゃそうだ 😆

2年半前に描いた小傘ちゃんイラストが東方スレまとめサイトに掲載されました！
（下記は『2ch東方スレ観測所』より）

このイラストはYoutubeの東方解説動画にも使われました（製作者さんより掲載許可依頼が来ました）シンプルな可愛さが評価されたと思います 😉

今年1月の芳香ちゃんに引き続き、pixiv投稿作品の特集サイトpixivisionに4月に描いたあややイラストが掲載されました！

選考基準は分かりませんが毎日沢山アップロードされる作品群の中からよく見つけたよな～と関心。次はイラストランキング上位を目指して頑張りましょう 😉

5月に描いた魔理ちゃんイラストが東方スレまとめサイトに掲載されました！
（下記は『東方お姉ちゃんまとめ』より）

魔理沙のカワイイ部分を表現出来た結果故の掲載かなと思います 😉 お気に入りのイラストがより沢山の方に見てもらえるのは嬉しいです。

先日描いたあややイラストが東方スレまとめサイトに掲載されました！
（下記は『2ch東方スレ観測所』より）

東方Projectまとめサイトが少ない ⇒ 多くのファンがまとめサイトに集まる ⇒ 沢山の方々に絵を見てもらえる機会が増えるのでありがたいですね 🙂

先週描いたすわかなイラストが東方スレまとめサイトに掲載されました！
（下記は『2ch東方スレ観測所』より）

結構お気に入りのイラストで皆さんノリノリでコメントいただいたので大変嬉しいです。神奈子様も喜んでいることでしょう 😆

pixiv投稿作品の特集サイトpixivisionに昨年描いた芳香ちゃんイラストが掲載されました！

キョンシーというニッチなネタだったというのもあるけど、数ある作品の中から選ばれたので大変嬉しいです 😳 人の心をグッと掴むイラストをこれからも描き続けたいものです。

2015年のクラウンピースに引き続きピクシブ百科辞典に典ちゃんイラストが掲載されてた！やったぜ 😛

結構かわいく描けたので辞典に採用されて嬉しいです～ 😳

6月に描いた小傘ちゃんイラストが東方スレまとめサイトに掲載されていました！
（下記は『2ch東方スレ観測所』より）

梅雨のイラストとして描きましたが投稿日以降暑い日が戻ってきちゃいました 🙁 外に出たくね～ 🙄