たわごとの記～耽溺者の備忘録～: 2024/09

9/30/2024

.htaccessの基本設定（Xサーバ）

SetEnvIf Request_URI ".*" Ngx_Cache_NoCacheMode=off
SetEnvIf Request_URI ".*" Ngx_Cache_AllCacheMode
AddHandler fcgid-script .html

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

各行の意味

1行目　SetEnvIf Request_URI ".*" Ngx_Cache_NoCacheMode=off

すべてのリクエストURIに対して、Ngx_Cache_NoCacheMode 環境変数を off に設定
これはキャッシュ無効化モードをオフにし、キャッシュを有効化する設定なので、サイトの更新中は行頭にコメントアウト（#）しておく

2行目　SetEnvIf Request_URI ".*" Ngx_Cache_AllCacheMode

すべてのリクエストURIに対して、Ngx_Cache_AllCacheMode 環境変数を設定（デフォルトでは値 1 が設定されてる）
これですべてのコンテンツをキャッシュ対象とするモードが有効になってるので、サイトの更新中は行頭にコメントアウト（#）しておく

3行目　AddHandler fcgid-script .html

拡張子 .html ファイルを fcgid-script ハンドラーで処理するように設定
PHPコードなどのサーバサイドスクリプトを .html ファイル内で実行可能にするためなので、PHPを使用してても拡張子 .php ファイルでしか使わなければ不要
ブラウザ上で実行されるJavaScriptはクライアントサイドスクリプトなので不要

5行目以降はHTTPからHTTPSへのリダイレクト設定

<IfModule mod_rewrite.c>:
mod_rewrite モジュールが有効な場合にのみ、内部のリライトルールを適用
RewriteEngine On:
URLの書き換え機能を有効化
RewriteCond %{HTTPS} off:
リクエストがHTTPの場合にのみ、次のリライトルールを適用する条件を設定
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]:
すべてのHTTPリクエストを同じホスト名とリクエストURIを保持したまま、HTTPSにリダイレクト
R=301:
恒久的なリダイレクトを指定
L:
これが最後のルールであることを示し、他のリライトルールの適用を停止

9/29/2024

PHPのVer.を7から8に（Xサーバ）

サーバのコンパネから簡単に変更できる

もちろん、変更後に不具合が起きる可能性はある！

覚悟が必要だし、不具合に対処できるスキルも必要だ！！

ちなみにコンパネの【サーバ情報】では、以下がわかる

サーバー番号
ホスト名
IPアドレス
OS
CPU AMD EPYC
メモリー
Apacheバージョン
PHP8バージョン
PHP7バージョン
PHP5バージョン
MySQLバージョン
Perlバージョン
ホームディレクトリ

9/28/2024

tableのセル内に同じ幅の画像を縦に並べて揃える（水平揃え）

<table>
    <tr>
        <td style="display: flex; flex-direction: column; align-items: center;">
            <img src="img1.jpg"><img src="waon.jpg"><img src="img2.jpg">
        </td>
    </tr>
</table>

tableのセル内に並べずとも水平揃えは可能

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画像の縦並び</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="img1.jpg" alt="前向きウサギ">
        <img src="waon.jpg" alt="イッヌ">
        <img src="img2.jpg" alt="振り向きウサギ">
    </div>
</body>
</html>

9/27/2024

tableのセル内に並んだ画像が下に寄ってるのを中心に揃える（垂直揃え）

tableのセル内に画像を並べると何もしなければ下揃えになる

<table>
    <tr>
        <td>
            <img src="img1.jpg"><img src="waon.jpg"><img src="img2.jpg">
        </td>
    </tr>
</table>

中心に揃える（垂直揃え）にはセルにスタイルを追加

<table>
    <tr>
        <td style="display: flex; justify-content: center; align-items: center;">
            <img src="img1.jpg"><img src="waon.jpg"><img src="img2.jpg">
        </td>
    </tr>
</table>

画像にスタイルを追加してもOK

<table>
    <tr>
        <td>
          <img src="img1.jpg" style="vertical-align: middle;">
          <img src="waon.jpg" style="vertical-align: middle;">
          <img src="img2.jpg" style="vertical-align: middle;">
        </td>
    </tr>
</table>

9/26/2024

「colspan」と「rowspan」

覚え方

Colspan =列: 「colspan」は列を水平に結合

コルスパン → 水平ストレッチ（→→→）

例: 1 つのセルを 4 列にまたがって拡張する場合　colspan="4"

<table border="1">
    <tr>
        <th colspan="4">colspan</th>
    </tr>
    <tr>
        <td>colspan</td>
        <td>colspan</td>
        <td>colspan</td>
        <td>colspan</td>
    </tr>
    <tr>
        <td>colspan</td>
        <td>colspan</td>
        <td>colspan</td>
        <td>colspan</td>
    </tr>
</table>

Rowspan =行: 「rowspan」は行を垂直に結合

行間 → 垂直ストレッチ（↓↓↓）

例: 1 つのセルを３行にカバーする場合　rowspan="3"

<table border="1">
    <tr>
        <th rowspan="3">rowspan</th>
        <td>rowspan</td>
        <td>rowspan</td>
        <td>rowspan</td>
    </tr>
    <tr>
        <td>rowspan</td>
        <td>rowspan</td>
        <td>rowspan</td>
    </tr>
    <tr>
        <td>rowspan</td>
        <td>rowspan</td>
        <td>rowspan</td>
    </tr>
</table>

9/25/2024

Viviエディタのホームディレクトリ設定

デフォルトだとViviディレクトリになってるが

さっとメモするのに使いたいのでデスクトップにしたい

[設定]から[設定ダイアログ]を開いて・・・

ホームディレクトリからデスクトップを選択

[変更箇所を全てのタイプに適用]⇒[OK]

9/24/2024

生まれてから2万日目はいつなのかをJavaScriptで計算するフォーム

  <h1>あなたの生年月日から生まれて2万日目をお教えします、生年月日を選択してください</h1>
  <form>
    <label>年：</label>
    <select id="year">
      <option value="">--年--</option>
      <?php
      $currentYear = date("Y");
      for ($i = 1950; $i <= $currentYear; $i++) {
        echo "<option value='$i'>$i</option>";
      }
      ?>
    </select>
    <label>月：</label>
    <select id="month">
      <option value="">--月--</option>
      <?php
      for ($i = 1; $i <= 12; $i++) {
        $month = str_pad($i, 2, "0", STR_PAD_LEFT);
        echo "<option value='$month'>$month</option>";
      }
      ?>
    </select>
    <label>日：</label>
    <select id="day">
      <option value="">--日--</option>
      <?php
      for ($i = 1; $i <= 31; $i++) {
        $day = str_pad($i, 2, "0", STR_PAD_LEFT);
        echo "<option value='$day'>$day</option>";
      }
      ?>
    </select>
    <button type="button" onclick="calculate()">送信</button>
  </form>
  <div id="result"></div>
  <script>
    function calculate() {
      var year = document.getElementById("year").value;
      var month = document.getElementById("month").value;
      var day = document.getElementById("day").value;
      if (year == "" || month == "" || day == "") {
        alert("年月日を選択してください。");
        return;
      }
      var birthday = new Date(year, month - 1, day);
      var targetDate = new Date(birthday.getTime() + (20000 * 86400000)); // 20000日後の日付を計算する
      var result = document.getElementById("result");
      result.innerHTML = "あなたが生まれてから2万日目は「" + targetDate.getFullYear() + "年" + (targetDate.getMonth() + 1) + "月" + targetDate.getDate() + "日」です！！";
    }
  </script>

↓実際のページ↓

https://pinkwolf.site/20000days.html

9/23/2024

今日は生まれてから何日目か、誕生日から（カレンダーで選択して）JavaScriptで換算するフォーム

  <h1>今日は生まれてから何日目か？</h1>
  <form>
    <label for="birthday">生年月日：</label>
    <input type="date" id="birthday" name="birthday">
    <button type="button" onclick="calculateDays()">計算する</button>
  </form>
  <div id="result"></div>
  <script>
    function calculateDays() {
      const birthday = new Date(document.getElementById("birthday").value);
      const today = new Date();
      const differenceInTime = today.getTime() - birthday.getTime();
      const differenceInDays = Math.floor(differenceInTime / (1000 * 3600 * 24));
      document.getElementById("result").innerHTML = `今日は生まれてから ${differenceInDays} 日目です！`;
    }
  </script>

↓実際のページ↓

https://pinkwolf.site/howmanydays.html

9/22/2024

今日は生まれてから何日目か、誕生日からJavaScriptで換算するフォーム

今日という日が、自分が生まれてから何日目かを誕生日から換算

<form name="myF">
    <p>西暦<input type="text" size="4" name="myFy">年<input type="text" size="2" name="myFM">月<input type="text" size="2" name="myFd">日生まれ　<input type="button" value="☆ボタン☆" onclick="mySet()"></p>
    <p><input type="text" size="45" name="myFmes"></p>
</form>

    function mySet(){
       myNow = new Date();
       myBirth = new Date( document.myF.myFy.value, document.myF.myFM.value-1, document.myF.myFd.value );
       myMsec = myNow.getTime() - myBirth.getTime();
       myDay = Math.floor( myMsec / (1000*60*60*24) );
       document.myF.myFmes.value = "今日は生まれてから " + (myDay+1) + "日目ですよ！";
    }

↓実際のページ↓

https://pinkwolf.site/

9/21/2024

PHPでお宅のペットや子供の年齢（今、何歳何ヵ月か）を換算するフォーム

    <form method="post">
        <label for="birth_date">誕生日をカレンダーから選んでね</label><br>
        <input type="date" id="birth_date" name="birth_date" required>
        <button type="submit">今、何歳何ヵ月か？</button>
    </form>

    <?php if (isset($_POST['birth_date'])): ?>
        <?php
            // 入力された誕生日を取得
            $birth_date = new DateTime($_POST['birth_date']);
            $now = new DateTime();  // 現在日時
            $age = $birth_date->diff($now);  // 年齢を計算
        ?>

        <h2>計算結果:</h2>
        <p>誕生日: <?= htmlspecialchars($_POST['birth_date'], ENT_QUOTES, 'UTF-8') ?></p>
        <p>今、<?= $age->y ?>歳<?= $age->m ?>ヶ月です</p>
    <?php endif; ?>

↓実際のページ↓

https://pinkwolf.site/howmanyym.html

9/20/2024

PHPでペットや子供の年齢（今、何歳何ヵ月か）を表示

うちのはちくまが何歳何ヵ月か、個人サイトのトップページを見ればすぐわかるのだ♪

最終行の表示、毎月書き換えるのは大変なので、誕生日から換算して表示

$birth_date = new DateTime('2017-05-10');
    $now = new DateTime();
    $age = $birth_date->diff($now);
    echo "今、".$age->y."歳".$age->m."ヶ月";

↓実際のページ↓

https://pinkwolf.site/

9/19/2024

PowerPointのフォントのデフォルト設定を変更

まず、既存のプレゼンテーション（作成中含む）に対してフォントを変更する場合

[デザイン]タブをクリック

[バリエーション]グループのプルダウンから[フォント]をクリック

[見出しのフォント]と[本文のフォント]の両方で変えたいフォントを選択

次に、新しいプレゼンテーションのデフォルトフォントを変更する場合

上記のようにして変えたいフォントを選択後、[ファイル]タブをクリックし、[名前を付けて保存]を選択

これにわかりやすいファイル名を付けて、使い易い場所に保存しておき、次回からはこのファイルを開けばOK

9/18/2024

WinSCPで.htaccessファイルが非表示になってるのを表示させる

歯車（環境設定）を開いて、[パネル]を選択

[一般]の1番上の「隠しファイルを表示する」にチェックを入れて[OK]

9/17/2024

ChatGPTに「メモリがいっぱいです」と拒否られたら・・・

今までのやりとりが不要ならば、全部削除してしまえばOK

設定→パーソナライズ

1番下の[ChatGPTのメモリをクリアする]ボタンで・・・

9/16/2024

ドイツ語表記の際に必要な10進文字コード

Ä (ウムラウト大文字) : Ä

Ö (ウムラウト大文字) : Ö

Ü (ウムラウト大文字) : Ü

ß (エスツェット) : ß

ä (ウムラウト) : ä

ö (ウムラウト) : ö

ü (ウムラウト) : ü

9/15/2024

フランス語表記の際に必要な10進文字コード

à (accent grave) : à

â (accent circonflexe) : â

ç (cédille) : ç

è (accent grave) : è

é (accent aigu) : é

ê (accent circonflexe) : ê

ë (tréma) : ë

î (accent circonflexe) : î

ï (tréma) : ï

ô (accent circonflexe) : ô

ù (accent grave) : ù

û (accent circonflexe) : û

9/14/2024

スマホエミュレータよりブラウザの開発者ツール

ウェブサイトをスマホ画面で表示して、機種によってどんなだかを確認したいだけなら、エミュレータよりもブラウザの開発者ツールが便利

Google ChromeやFirefoxなどのブラウザには、スマホ画面をシミュレートする機能が内蔵されているので、これを使わない手は無い

Google Chromeの手順

サイトを開く。
右クリックして「検証」を選択（もしくはF12キーを押して開く）。
開発者ツールが開いたら、画面の左上にあるデバイスアイコン（タブレットとスマホのマーク）をクリック。
これで画面がスマホビューに切り替わる。

上部のドロップダウンから、さまざまなデバイスを選んで確認できる（上の画像はSurface Duoを選択、下の画像はSamsung Galaxyを選択）

ちなみにアランの『幸福論』の各章タイトルの邦訳比較表

9/13/2024

返信専用メールフォームの文字化けを修正

docomoで受けたメールが文字化けしてたので修正

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $to = $_POST['recipient_email'];
    $subject = "予約確認";
    $message = "予約承りました、ありがとうございました。"; // 固定メッセージ

    // メールのエンコーディングをISO-2022-JPに変換
    $subject = mb_encode_mimeheader($subject, "ISO-2022-JP");
    $message = mb_convert_encoding($message, "ISO-2022-JP", "UTF-8");

    // ヘッダーにエンコーディングを指定
    $headers = "From: info@ドメイン\r\n";
    $headers .= "Content-Type: text/plain; charset=ISO-2022-JP\r\n";
    $headers .= "Content-Transfer-Encoding: 7bit\r\n";

    if (mail($to, $subject, $message, $headers)) {
        echo "メールが送信されました。";
    } else {
        echo "メールの送信に失敗しました。";
    }
}

一昔前は文字化けで毎度苦労してたが久々に化けてるの見た

9/12/2024

返信専用メールフォーム

WordPressをメールフォームにしか使ってなかったら、PHP7でもPHP8でも動くようなメールフォームに差し替えて、WordPressは削除してしまえばいんじゃん？

チケット予約のフォームは、名前とメールアドレスと通信欄しか項目要らないから簡単だ

いや、その前にチケット予約のメールが着て、返信するのに使ってたWEBメールが使えなくなったので（なぜかスマホからだとエラーが出てログイン不可）、返信専用のフォームを作らねばだ

必要最低限項目だけで・・・

HTMLはこんな感じ

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>返信フォーム</title>
</head>

<body>

<form method="post" action="send_reply.php">
    宛先メール: <input type="email" name="recipient_email" required><br>
    メッセージ: <textarea name="message" required>予約承りました、ありがとうございました。</textarea><br>
    <input type="submit" value="送信">
</form>

</body>

</html>

PHPはこうかな・・・

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $to = $_POST['recipient_email'];
    $subject = "予約確認";
    $message = $_POST['message'];
    $headers = "From: info@ドメイン";

    if (mail($to, $subject, $message, $headers)) {
        echo "メールが送信されました。";
    } else {
        echo "メールの送信に失敗しました。";
    }
}

これでとりあえず送信できた

9/11/2024

使用サーバのPHP問題

2つ契約してるサーバのうちの1つを解約するために、もう一方のサーバに中身を集約してる作業中だったが、そのサーバは現状PHP7.4で、それ以上にはアップグレードできず、サーバを移行するよう促された

詳細を以下に貼っておくが、サーバ移行するなら1つづつエラーが出ぬよう、確認しながらやりたいので、新しいサーバに移行する方が安全安心だろう
ちなみに次の契約更新日は2025年3月末なので、他サーバに移行するか、危険な賭けに出てこのサーバを継続するか遅くても年内には決めなくてはだ

◆プラン変更について

ご利用アカウントがPHP8系のバージョン未対応の場合、プラン変更いただくことでPHP8系をご利用いただけます。また、データベース作成数が無制限になります。

◆プラン変更の手順

1.運用サイトが移設先環境へ対応している状態かを確認

2.プラン変更に伴う注意事項などの詳細を確認

3.［プラン変更］ボタンをクリックしサーバー移設開始（キャンセル不可）

4.サーバー移設完了を確認

5.メンテナンス完了後のレコード設定（個別レコード設定の場合のみ）

※ プラン変更完了から移設先サーバー環境へのFTP/SSH接続ができるようになるまで反映に１時間ほどかかります。

※ データ転送時間の目安はよくある質問をご確認ください。

※「メールアカウント」や「データベース(MySQL4を除く)」は、移設の際にそのまま引き継がれますのでデータ移動や再設定等は不要です。

◆ネームサーバーの設定変更について

移設完了後、自動的に設定が変更され、移設先のデータでサイトが公開されるようになります。

◆注意事項

移設先での動作確認期間は設けられません。

そのため、移設完了後にサイト表示がエラーになることも考えられます。

移設先でも表示可能な状態に移設元データを調整いただき事前準備をお願いします。

エラーが発生した場合も移設のキャンセルは承ることができません。

現在のリニューアル環境の仕様についてはサービスサイトやマニュアルなどでご確認ください。

.htaccessやcronで提供していないPHPバージョンが指定されている場合はエラーになります。また、移設元と移設先では環境などが異なりますので以下の内容についてもご確認ください。

◆各種情報の変更

移設に伴い以下情報が変更となります。

・サーバー番号

・ロードバランサーIPアドレス

・WEBサーバーIPアドレス

FTP、WebDAV、SSH、フルパスに変更なく、引き続き同じ情報でご利用いただけます。クレジット決済等のサービスで「WEBサーバーIPアドレス」を許可設定いただいている場合、許可IPの変更、もしくは追加いただく必要がございます。

◆PHP設定について

プラン変更後も引き続きCGI版の PHP5.6 / PHP7.1 / PHP7.3 をご利用いただけます。

【移設後自動的にPHPのバージョンが指定される場合】

PHP7.4（モジュール版）を指定→移設後はPHP8.3（モジュール版）になります。

◆利用料金

◆プラン変更機能利用中の制限について

機能利用開始から完了までの間、数分から1時間程度以下をご利用いただくことができません。

・WEBサイト表示

・バックアップオプション管理画面ログイン、操作

・FTP接続

・WebDAV接続

・SSH接続

・アクセスログ解析

また、プラン変更開始から完了までの間、コントロールパネル上の下記操作が制限されます。

プラン変更開始から完了までの時間はデータの転送量によって異なり、場合によっては長時間化する場合もございます。

・独自ドメイン、サブドメインの設定

・独自ドメインのメール機能利用開始

・バックアップオプションのお申込み

・SSH / サブFTPアカウントの作成、削除

・アクセス制限

・各種簡単インストール

・WebDAVの設定変更

・cron設定、表示

・サブFTPアカウントでの移設先サーバーへのアクセス

9/10/2024

更に画像一覧を見易くした

サーバのディレクトリ内の画像一覧を表示するのに画策してて、つい昨日「完璧だ」とか言ってたけど、画像同士がくっついてるのは見づらいので、CSSファイルで隙間開けた

span {
    margin: 5px
}

今度こそ完璧だ

9/09/2024

画像一覧を見易くした

数日前にサーバのディレクトリ内の画像を一覧できるようにした

サーバ内の画像一覧をブラウザで表示する

でも縦にずらっと並んでるのは見づらいので、画像名の表示は止めて、サムネイル画像だけが並ぶように修正

// ディレクトリ内の画像を表示する
while($file_name = $dir_name->read()){
    $path = $dir_name->path . "/" . $file_name;
    if (@getimagesize($path)){
        echo "<span><a href=\"$url" . $file_name . "\" target=\"_blank\">";
        echo "<img src=\"$url" . $file_name . "\" height=\"150\" title=\"$file_name\"></a></span>";
    }
}

サムネイル選択時には左下にURLが表示されるが、titleタグを使えば画像名がツールチップで出てきて、サムネイルをダブルクリックすれば元画像が開いてダウンロードもできる・・・完璧だ

9/08/2024

WordPressの削除

このブログを再利用するコトにしたので、WordPressの方は使用しなくなり、削除した

まず、画像データだけは何か別で使ってるか、あるいは今後使うかもなので、wp-content/uploadsはディレクトリごとダウンロードしておき、WordPressのトップディレクトリ内をすべて削除（自分はディレクトリ毎ごと削除した）

あとはデータベースで必要なモノ（wp-postなど）を一応.sqlファイルでダウンロード（エクスポート）しておいてから、削除

エクスポートしたwp-postデータ、開いてみたらとか、<figure class=\"wp-block-image size-full is-resized\">とか、勝手に挿入されたタグだらけになってたので、必要なテキスト部分だけを再利用するには、それらを一括削除しないとな～

9/07/2024

ルートディレクトリから始まる完全なパスの調べ方

まあドキュメントルートがわからなくても、PHPでエラーになればエラー箇所がどこにあるか、ルートディレクトリから始まる完全なパスを表示してくれるからそれでわかるのだが、事前に調べるコトももちろんできる（余りちゃんと事前に調べたことはないがね）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>パス表示</title>
</head>
<body>

<p>現在のスクリプトのディレクトリパスを表示</p>

<?php

echo __DIR__;

?>

<p>サーバのドキュメントルート（ルートディレクトリ）を表示</p>

<?php

echo $_SERVER['DOCUMENT_ROOT'];

?>

</body>
</html>

いや、HTMLにする必要は実際無くて、PHPの部分だけで十分なのだが、こうして並列して表示した方が違いがわかり易いのでね

ちなみにこのHTMLファイルをWEBのトップディレクトリに置けば、どちらも同じパスが表示される

それにしても「サーバの中身を扱うには、やはりPHPだよな」と2024年になっても思ってる自分はもうWEBの最先端からは遠いよな・・・

PythonのFlaskやDjangoなんかのフレームワーク使うのが一般的になるのは、近年のPython人気とそれに比してPHPの凋落ぶりからして、目前な気がする

ヨユーが出来たら、この辺をやってみようか・・・

9/06/2024

サーバ内の画像一覧をブラウザで表示する

サーバ内にある画像の一覧をブラウザから閲覧出来て、その際には画像のサムネイルと画像名が表示されて、画像をクリックすれば元のサイズで表示できるとなれば便利だろうと考えて、PHPでプログラム部分を書いて、こんなHTMLファイルをアップ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>画像一覧</title>
</head>
<body>

<p>画像一覧</p>

<?php

// ディレクトリ名(アップロード先に書き換える)
$dir_name = dir("/ルートディレクトリの完全なパス/gazo");
$url = ("https://ドメイン/gazo/");

// ディレクトリ内の画像を表示する
while($file_name = $dir_name->read()){
    $path = $dir_name->path . "/" . $file_name;
    if (@getimagesize($path)){
        echo "<a href=\"$url" . $file_name . "\" target=\"_blank\">";
        echo "<img src=\"$url" . $file_name . "\" height=\"150\"></a> ";
        echo "<p>$file_name</p>";
    }
}
$dir_name->close();

?>

</body>
</html>

これを画像がアップロードされてるディレクトリに置いて、URLをブラウザから開くと・・・

画像をクリックすると元画像が別タブで開く

HTMLで作成してあるので、CSSで見栄えよくしたら、サイトの１ページとして成り立つだろう

9/05/2024

画像の整理でまず拡張子を統一する

JPGとjpgが混在してると、プログラムで拾うのがメンドウだし、そもそもファイル名は基本的に全部小文字としておいた方が、間違える心配がなくていい

そこで変換バッチを使う

ren *.JPG *.jpg

エディタに上記のように書いて、例えば henkan.bat などと名前を付けて保存

これをJPGとjpgが混在してるフォルダに置いて、ダブルクリックすればすべてのファイルの拡張子が.jpgに統一される

【BEFORE】

　　↓↓↓

【AFTER】

但し、瞬間には変わらず、一旦、フォルダを閉じて開き直すと変わってる

9/04/2024

メディアクエリでモバイル表示対応

「本の旅」サイトはモバイル用の表示が酷い

右に寄っちゃってるし、横スクロールしないと読めぬ
幅が768px以下のブラウザでは、100％表示になるようにしよう

HTMLの構成がこんなで・・・

<!DOCTYPE html>
<html lang="ja">

<head>
    <link rel="stylesheet" href="hon-dana.css?<?php echo filemtime('hon-dana.css'); ?>" type="text/css">
</head>

<body>

<article>

    <header>

        <h1>本の旅</h1>

        <nav>
        目次
        </nav>

    </header>

    <section>

    </section>

    <footer>

    </footer>

</article>

    <script src="hon-dana.js"></script>

</body>

</html>

CSSでメディアクエリだな、article（本文部分）がブラウザの幅768px以下の表示に100％を指定

article {
    width: 768px;
    margin: 0px auto;
    padding: 0px;
    background: #fff;
    text-align: center;
}

@media (max-width: 768px) {
    article {
        width: 100%;
    }
}

で、100％表示されるようになった

それと背景色も真っ白（#fff）だったのを#e0f7ffに変更した

9/03/2024

「本の旅」サイトの引越し

昨年、よく考えずにhon-no-tabi.siteなんてドメインとって、「本の旅」なるサイトを新たに作ったのは、最終的に本に関するサイトをそこに統合する目論見があった

しかし、ちゃんとしたサイトに作り過ぎたせいで、更新がメンドウになってしまい、放置気味になってたし、ここは殆どアクセスが無かったので、今回、ドメイン解約して、サイトは新しいドメイン下に引っ越すコトにした

ついでに放置してるサイトも新しいドメイン下に持ってきて、要は2つのサイトを融合させてしまおうかなんて思いついたが、ふとGoogle Search Consoleを確認してみると、以外とアクセス数は多いのだった！

以前は確かにこのサイトからｱﾏｿﾞﾝでポチッとしてくれる方がいたので、まあそこそこアクセスはあるのかと思ってはいたが、今年はもうｱﾏｿﾞﾝのアフィリエイトリンクの画像が仕様変更で全部消えてしまい、貼り直してもいないからｱﾏｿﾞﾝからの収益は限りなく0に近くなったので、アクセス自体も減ったのだと思ってたがそうでもなかった！！

そうするとむやみに動かさずに、同じディレクトリ（URL）のまま、リンクの張り直しした方が良さそうな気が・・・

そして「本の旅」だけ無事に引っ越しを終えたが、このサイトモバイルファーストじゃなかったのだな、CSS書き換えなきゃ～

9/02/2024

「サイト引っ越しました」のお知らせはどう出す？

「ホームページ〇〇は引っ越しました」というお知らせを出したコトがある人、昔ならmetaタグに以下のように書いてたであろう、かくいう自分もそう

<meta http-equiv="refresh" content="30;URL=https://hachikuma.tan-deki.com/">

URLの前にある30は30秒って意味で、30秒待ってると自動的に新しいURLが開くけど、たいていはそこでじっと待たずにサイトに表示されてるリンクから開くよね

bodyタグにJavaScriptを書く方法もある

<body onload='setTimeout(function(){
    location.replace("https://hachikuma.tan-deki.com/");
    }, 3000);'>

この場合は3秒後に自動的に新しいURLを開こうと思ったら3000（ミリ秒）だ

サーバによっては.htaccessで飛ばすのも可能だが、そうするとユーザは旧サイトのページは開かずに新しいサイトが開いてしまうので、新しいURLになってるとは気付きにくいと思われ

9/01/2024

デザインが決まるまでCSSファイルの更新日時を反映させておくPHP

全部を１つのドメイン下に置こうと思うが、まず1番大変なのはhachikumaの引っ越しだな

https://hachikuma.tan-deki.com/

index.htmlを開いて、とりあえずCSSを以下のように書き換える

<link rel="stylesheet" type="text/css" href="hk.css?<?php echo filemtime('hk.css'); ?>" media="screen">

こうしておけば、CSSを書き換えてアップする度にその更新日時（filetime）を拾ってくるので、確実に再読み込みをしてくれるのだが、そうでないと頑固にキャッシュを表示するのでね

そしてデザイン（という程のモノではないが）に丸1日かかって、先月分までの写真もアップしたのは今朝・・・

登録: 投稿 (Atom)