たわごとの記～耽溺者の備忘録～

10/18/2024

画像ボタンでページトップへ戻る固定リンクのJavaScriptとCSS

トップへ戻るボタンの画像を用意してサーバにアップして、ボタンを表示するページのHTMLに以下を挿入

<div id="back-to-top"></div>

JavaScriptの以下のコードを読み込む

  const backToTopButton = document.addEventListener('DOMContentLoaded', function () {
    const backToTopButton = document.getElementById('back-to-top');
    
    backToTopButton.addEventListener('click', () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });

    window.addEventListener('scroll', () => {
        if (window.pageYOffset > 300) {
            backToTopButton.classList.add('show');
        } else {
            backToTopButton.classList.remove('show');
        }
    });
});

back-to-topの部分はCSS

/* 画面トップへのボタン */
#back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 160px;
    background-image: url('https://tan-deki.com/img/up.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    cursor: pointer;
    z-index: 100;
    opacity: 0; /* 初期状態は非表示 */
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#back-to-top.show {
    opacity: 1;
    pointer-events: auto;
}

実際の動作⇒https://tan-deki.com/

10/17/2024

ブラウザのページ内を検索

[Ctrl]+[F]で検索窓が立ち上がるので検索したい語を入力

10/16/2024

ウェブサイトのフッターにコピーライトは絶対に必要か？

典型的な表示は以下

©2024 Company Name. All rights reserved.

でも頭の©は環境依存文字なので、このままコピペしても c になってしまったりするから、実体参照にするべき

&copy;2024 Company Name. All rights reserved.

という風にね

自分の場合はこんなで・・・

<div class="copyright">&copy; <?=date("Y")?> <a href="<?=$url?>" target="_blank">MomoiroOokamiRose</a>. All rights reserved.</div>

PHPを使って西暦年を取得したり、ファイルの行頭に定義してあるURLを取得してる

https://hachikuma.tan-deki.com/2017/06/index.html

10/15/2024

PC画面が真っ暗（カーソルも無い）

モニターが真っ暗になって、カーソルも見えなくなって無反応になってしまった場合、強制終了するしかない

再起動する前に電源が落ちてるのを確認してから、まずアナログ的に接続を一通り確認してみるのは有効だと思われ

ChatGPTは以下を提案してくれた

放電処置:
PCの電源アダプターを外し、バッテリーを取り外せる場合は取り外します。電源ボタンを10?15秒間長押しして、内部の電気を放電させます。その後、アダプターとバッテリーを再接続して、PCを再起動してみてください。
モニターの確認:
別のモニターやケーブルを使って、PCが正常に出力しているか確認します。モニターが正しく接続されているか、入力ソースが正しいかもチェックします。
ハードウェアの確認:
RAMやグラフィックカードがしっかりとスロットに挿入されているか確認します。もし可能であれば、別のRAMやグラフィックカードを試してみるのも良いでしょう。
リセット:
BIOSのリセットも考えられます。これには、CMOSバッテリーを一時的に外す方法や、リセットジャンパーを使用する方法があります。

そして再起動しただけで解決すればそれに越したことはないが、起動後も動作が不安定な気がしたら、チェックディスクやシステムファイルチェッカーを実行すると良い

検索窓から「cmd」でコマンドプロンプトを起動（管理者として実行）

チェックディスクは以下のコマンドでEnter

chkdsk /f C:

システムファイルチェッカーは以下のコマンドでEnter

sfc /scannow

結構、時間がかかる場合があるけど、途中の状態でもバックグラウンドで進行する（別のアカウントに切り替えたら中断してしまうも悪影響は無い）

10/14/2024

地図のプリントアウト用HTML

行先の住所や担当者名などのメモを地図と一緒にプリントアウトするためのHTMLなんて、方向音痴でないスマホ使いには誰得って記事だろうが、方向音痴・・・いや、方向感覚皆無のガラケー使いの自分には必須なのだ

１，GoogleMapなどを使って地図をスクショしてmap.jpgという名で保存

２，メモ帳に以下をコピペして、メモ〇行目にメモを書いたら、拡張子を.htmlにしてmap.jpgと同じフォルダに保存

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地図とメモ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            text-align: center;
        }
        img {
            max-width: 100%;
            height: auto;
        }
        .print-info {
            margin-top: 20px;
            font-size: 18px;
        }
        @media print {
            .container {
                page-break-after: always;
            }
        }
    </style>
</head>
<body>

<div class="container">
    <img src="map.jpg" alt="Map">
    <div class="print-info">
        <p>メモ1行目</p>
        <p>メモ2行目</p>
        <p>メモ3行目</p>
    </div>
</div>

<script>
    window.onload = function() {
        window.print();
    };
</script>

</body>
</html>

保存したhtmlファイルをブラウザで開くとこんな感じで[印刷]ボタンでプリントアウト

※文字コードはUTF-8にするコト

10/13/2024

ConoHaWINGに移管できないドメインだった件

.siteとか.websiteとかドメイン移管する予定でいたのに、プルダウンに無いので移行できないと判明した！

何のために新規契約したのか・・・詰めが甘かった！！

移管できないドメインで運営してる2つのサイトは、移管できるサーバ見つけて移管するしかないのだが、そうなると別途、激安サーバ探すしかなくってよ、lolipopの月額99円か？！

10/12/2024

サーバ移行時に書き換えが必要なリンクをVSCodeで一括変換

サーバ移行しても外部リンクだったら、当然ながら書き換えは不要

また、サイト内のリンクの中でも、相対パスのリンクと、あるいはURLのリンクもドメインが変わらなければ書き換えは不要

つまり、書き換えが必要なのは、絶対パスのリンクと、ドメインが変わった場合のURLのリンクだが、VSCodeを使えば一括変換が可能だ

VSCodeで複数ファイルのリンクを一斉に書き換える手順

VSCodeを開く:
- プロジェクトフォルダを開く
全ファイルを対象に検索:
- 左サイドバーの「検索」アイコン 🔍（または Ctrl + Shift + F）をクリック
- 変更したいテキスト（例: 古いリンクやパス）を検索バーに入力
置換対象を確認:
- 検索結果がリスト表示されるので、対象のテキストが正しいことを確認
置換するテキストを入力:
- 「置換」バーに、新しいリンクやパスを入力
一括置換:
- 「すべて置換」ボタンをクリックすると、該当するすべてのファイル内のテキストが一斉に置き換え
変更を確認:
- 変更後、該当ファイルを開いて適切に置き換わっているか確認し、問題がなければ保存 (Ctrl + S)

補足

Undo（Ctrl + Z）で戻すこともできるので、安心して作業できる
特定のファイルのみを対象にしたい場合は、検索バー下の「検索するファイル」のところにパスや拡張子を指定することもできる

ConoHaサーバの.htaccess（PHPの設定）

先月やっと引っ越したばかりのサイトだが、PHPのVer.があがったり、サーバが変わってドキュメントルートが変わってしまうとエラー出まくりの可能性があるサイトなので、このサイトこそが引っ越しせねばならぬのだった

https://pinkwolf.site/hachikuma/

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

中身を移行して、そのままトップページを開いてみると、index.htmlではPHPが使えない設定（まあ通常はそれがデフォルト）のようで、確認のためにindex.phpと拡張子を変えてみたら、一応はPHPを読み込んでるがショートタグは読み込まれてなさそうだ

info.phpから確認したら、確かに short_open_tag が「Off」になってたので、.htaccessファイルに以下のように記述して、FTPでアップ

AddType application/x-httpd-lsphp .html
php_value short_open_tag On

しかし、これが全く反映せず・・・結果としてはコンパネから設定できたのだが、恐らくうっかり上書きや削除をしてしまったりせぬよう、コンパネからしか編集できない仕組み？

[サイト設定]⇒[応用設定]⇒[.htaccess設定]

これでPHPのエラーは出なくなって、残るエラーはリンクだ

10/10/2024

ConoHaサーバのPHP

デフォルトで最新のVer.になってた

PHPのVer.は[サイト設定]⇒[応用設定]⇒[PHP設定]から確認できる

ここでinfo.phpというファイルを以下のように記述して作成

<?php phpinfo() ?>

これをFTPでアップしてブラウザから開けば、PHPが使えることがわかり、Ver.や詳細がわかる

表示されたってことは、何も設定しなくてもPHPが使えるサーバなんだわね！

10/09/2024

ConoHaサーバのFTPの設定

FTPは通常、3つの情報があれば繋がるものだと確信してた

１，ホストアドレス

２，ユーザ名

３，パスワード

しかし、NextFTPではどうにも繋がらず、パスワードを変更したりしてみたがダメで、結果的にはWinSCPで繋がったが、「暗号化しない」と設定したからだ

「暗号化しない」というのは盲点だった！もちろんNextFTPでも「暗号化しない」としたらすぐ繋がったのだった

FTPの設定は[サイト設定]⇒[設定したいサイトを選択]⇒[FTP]⇒[＋FTPアカウント]

登録: 投稿 (Atom)