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

11/16/2024

Amazon のミュージックで聴きたい曲だけを聴く

Amazon のミュージックのライブラリを開くと、□で囲んだあなたのためのセレクトが何よりも優先してかかる仕様になってる？

購入したMP3の曲ならダウンロードして聴けるので、頑張ってブラウザ上から聴こうとせず、素直にダウンロードすればいいのだが、その購入済みの曲の一覧が[購入済み]ボタンを開くとある

そしてミュージックディレクトリに聴きたい曲をダウンロードしたら、自分のPCではMP3はPowerDVDで再生される

参考までに既定のアプリ一覧画面

10/27/2024

WordPressのテーマ：MintWPは字が小さいのでフォントサイズをカスタマイズ

MintWPの記事画面はデフォルトではこんなだ

cssファイルを確認してみた

body{background:#e6e6e6;font:normal normal 13px Domine,Arial,Helvetica,sans-serif;line-height:1.6;margin:0;padding:0;}

13pxはダメだろう、ウェブアクセシビリティ的には16px必要だろうて、カスタマイズ＞追加CSSから以下のように指定

body {
    font-size: 16px !important;
}

これで良しと思ったが一瞬だけ大きく表示されても元のサイズに戻ってしまう・・・この挙動はJavaScriptかなんかで制御されてるぽいので（いや、全くのあてずっぽうだが）、元のCSSファイルを編集してしまうのが簡単だろう、そしてフォントサイズ80％で指定されてる箇所もあるので、大きめに18pxで修正

俄然、見易くなったわ

ついでにこのブログのフォントサイズも12pxに指定されてたのを16pxに変更した

10/26/2024

WordPressのテーマ：MintWPはレスポンシヴ感がサイコー

やり方としては基本エディタ（ViviかVS Code）にHTML手打ち、適宜PHPやJavaScriptで色々便利な機能を搭載というのが、自分にとっては扱い易いサイトで、できればWordPressは使いたくないのだが、「検索機能」が標準搭載ってのは便利だ

あの映画、録画してあったような・・・？

ドキュメンタリーを全部どこかにダビングしてあったはず・・・？

録画だけはしてあっても1度も観てないなんてDVDやBDが100枚以上あって、それぞれに10タイトル入ってるとしても1,000・・・覚えていられるワケもなくってよ、ましてや現物をそのまま手にしても中身はわからんて、当たり前だがいちいちプレーヤーに挿入して確認せねばなので、検索できる一覧を作成しようと一念発起

ここ1ヵ月くらいかけて1記事に1枚分のタイトルをリスト化したのを144記事アップした！

テーマはMintWPというのを使ってて、今はまだ何もカスタマイズしていない状態なので、特にトップページの一覧は画像無しだとちと間抜けだが、幅が狭くなると以下のような表示になり・・・

スマホ画面表示が以下だ

これが自分の理想とするレスポンシヴ感！！

他は手直しできるのでレスポンシヴ感でこのテーマを選んだのだ

10/25/2024

背景画像から文字を浮き上がらせて見易くするためのテキスト縁取りCSS

サイトのタイトルなのにマスカット粒の影と重なって文字が読み難い

白い縁を付けてみたら見易くはなったけど、なんか・・・浮き過ぎじゃん？

#site-title h1 {
    color: #663366;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;
    font-size: 2.5rem;
    line-height: 1.4;
    text-shadow: 2px  2px 3px RGB(255, 255, 255),
            -2px  2px 3px RGB(255, 255, 255),
             2px -2px 3px RGB(255, 255, 255),
            -2px -2px 3px RGB(255, 255, 255);
}

マスカットの色の淡いのにしてみよう

#site-title h1 {
    color: #663366;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;
    font-size: 2.5rem;
    line-height: 1.4;
    text-shadow: 2px  2px 3px RGB(222, 250, 222),
            -2px  2px 3px RGB(222, 250, 222),
             2px -2px 3px RGB(222, 250, 222),
            -2px -2px 3px RGB(222, 250, 222);
}

いんじゃん♪

サイト・ディスクリプションにはなんかチカチカするのでうっすら影を付けてみた

#site-description {
    font-family: "メイリオ", "Meiryo", sans-serif;
    text-shadow: 3px 3px 6px #888;
    padding: 30px;
}

10/24/2024

HTMLでどうしても改行するならここにして！

スマホ画面だと短いタイトルでも折り返してる時がある

しかもこの折り返し方は嫌だ・・・「i」と「～」の間で折れて欲しいので、間に<wbr>タグを入れたのだが<wbr>タグが効かない？！

じゃ、折り返して欲しくない部分をくるむ方法で以下

<div id="site-title">
    <h1>Tan-Deki<span class="no-break">～耽溺～</span></h1>
</div><!-- /site-title -->

CSS

#site-title h1 {
    color: #663366;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;
    font-size: 2.5rem;
    line-height: 1.4;
    text-shadow: 2px  2px 3px RGB(222, 250, 222),
            -2px  2px 3px RGB(222, 250, 222),
             2px -2px 3px RGB(222, 250, 222),
            -2px -2px 3px RGB(222, 250, 222);
}

.no-break {
  white-space: nowrap;
}

上手く行った

10/23/2024

HTMLで絶対に改行させたくない！

https://tan-deki.com

HTMLで絶対に改行させたくない場合、一般的に<nobr>タグが使用されてたのが、<nobr>タグはHTML5で非推奨となり、代わりにCSSのwhite-spaceプロパティを使用することが推奨された

CSSの`white-space`プロパティで改行を禁止する

CSS
.no-break {
  white-space: nowrap;
}
上記のように、white-spaceプロパティにnowrapを指定することで、要素内のテキストが改行されなくなる

`<nobr>`タグについて

<nobr>タグは、Netscape Navigatorが独自に拡張したタグで、HTML5では非推奨となっているため、white-space: nowrap;を代替使用

具体的な使用例

HTML
<p class="no-break">これは改行されません。</p>

その他の注意点

ブラウザの互換性: white-space: nowrap;は、ほとんどのモダンブラウザでサポートされているも、古いブラウザでは動作しない可能性あり
レイアウトの崩れ: nowrapを指定した場合、要素の幅を超えてテキストが表示される可能性あり、この場合、overflowプロパティなどを併用して、はみ出した部分の処理を行う必要がある
アクセシビリティ: 視覚障がいを持つユーザーにとっては、改行がないことで内容が理解しにくくなる可能性あり、<span>タグなどで区切りを入れるなど、適切な対策を検討すべし

10/22/2024

スクリーンリーダーのダウンロードと使用（ウェブアクセシビリティを体験する）

自分でもスクリーンリーダーを試してみれば、ウェブアクセシビリティを実感できる？

スクリーンリーダーのダウンロードと使用

NVDA (NonVisual Desktop Access):
- ダウンロード:
- 無料でオープンソースのスクリーンリーダーで、Windowsで使用可
JAWS (Job Access With Speech):
- ダウンロード:
- 高機能な商用スクリーンリーダーで、Windowsで使用可、試用版あり
VoiceOver (Mac, iPhone, iPad):
- 使用方法: Apple製品に標準搭載されてるので、Macでは「システム環境設定」→「アクセシビリティ」→「VoiceOver」、iPhoneやiPadでは「設定」→「アクセシビリティ」→「VoiceOver」から有効

簡単なチェック項目

ページを開き、スクリーンリーダーを有効に
キーボードだけでページをナビゲートできるか確認する（タブキーで移動し、エンターキーで選択）
画像のalt属性や、リンクやボタンのラベルが適切に読み上げられるかチェック

10/21/2024

AIによるaria-labelとaria-labelledbyの違いの解説（ウェブアクセシビリティ）

aria-labelとaria-labelledbyはどちらもWebアクセシビリティのための属性ですが、用途や使い方に若干の違いがあります。

`aria-label`

用途: 要素に対して直接ラベルを指定するために使われます。
使用例: 要素自体にラベルを与える場合に適しています。特に、視覚的にはラベルが存在しないが支援技術にはラベルを伝えたい場合に便利です。

<button aria-label="閉じる">
  <i class="fas fa-times"></i>
</button>

この例では、アイコンボタンに「閉じる」というラベルを付けています。

`aria-labelledby`

用途: 他の要素を参照してラベルを指定するために使われます。
使用例: 別の要素（例えば、<label>や他のテキスト要素）をラベルとして使用する場合に適しています。これにより、ラベルの再利用やより複雑なラベル構成が可能です。

<label id="usernameLabel">ユーザー名:</label>
<input type="text" id="username" aria-labelledby="usernameLabel">

この例では、<input>要素が<label>要素によってラベル付けされています。

まとめ

aria-label: 要素に直接ラベルを指定。例えば、アイコンボタンにラベルを付ける場合に使用。
aria-labelledby: 他の要素を参照してラベルを指定。例えば、フォームフィールドにラベルを付ける場合に使用。

この記事に合った画像もAIに生成してもらったが、よく見ると色々微妙・・・

10/20/2024

ウェブアクセシビリティをチェックできるサイト：WAVE

WAVE (Web Accessibility Evaluation Tool)

ブラウザでツールのページを開いたらURLを入力するだけ

※英語サイトなのでChromeで開いてDeepL（拡張機能）で翻訳してる

10/19/2024

AIによるJavaScriptコードの説明：ページトップに戻るボタン（前記事参照）

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

  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');
        }
    });
});

【コードの目的】

このJavaScriptコードは、Webページに「ページトップに戻る」ボタンを作成し、特定の条件下で表示・非表示を切り替えるためのものです。ユーザーがページをある程度スクロールするとボタンが表示され、クリックするとページの一番上へスムーズに移動することができます。

DOMContentLoaded イベントリスナー:
- document.addEventListener('DOMContentLoaded', function () { ... }): WebページのDOM（Document Object Model）が完全に読み込まれた後に、中の関数が実行されます。これは、JavaScriptコードがHTMLの要素にアクセスする前に、すべての要素が準備できていることを保証するためです。
「戻る」ボタンの取得:
- const backToTopButton = document.getElementById('back-to-top');: HTMLの中でIDが'back-to-top'となっている要素（通常はボタン）を取得します。このボタンがクリックされたときの動作を定義します。
ボタンクリック時の処理:
- backToTopButton.addEventListener('click', () => { ... }): ボタンがクリックされたときに実行される関数を設定します。
  - window.scrollTo({ top: 0, behavior: 'smooth' });: ブラウザウィンドウをページの一番上（top: 0）へスムーズにスクロールします。behavior: 'smooth'によって、カクカクせずに滑らかなスクロールを実現します。
スクロールイベントリスナー:
- window.addEventListener('scroll', () => { ... }): ユーザーがページをスクロールしたときに実行される関数を設定します。
  - if (window.pageYOffset > 300) { ... } else { ... }: 現在スクロールされている位置（window.pageYOffset）が300ピクセルを超えているかチェックします。
    - 300ピクセル以上スクロールした場合:
      - backToTopButton.classList.add('show');: ボタンに'show'というクラスを追加します。CSSでこのクラスに表示に関するスタイルが定義されており、ボタンを表示させる効果があります。
    - 300ピクセル未満スクロールした場合:
      - backToTopButton.classList.remove('show');: ボタンから'show'クラスを削除します。これにより、ボタンが非表示になります。

まとめ

このコードは、以下の動作を実現します。

ページが読み込まれると、IDが'back-to-top'のボタンを探します。
ユーザーが300ピクセル以上スクロールすると、ボタンが表示されます。
ボタンをクリックすると、ページの一番上へスムーズに移動します。

補足:

CSS: ボタンの表示・非表示を切り替えるためには、CSSで'.show'クラスに表示に関するスタイルを定義する必要があります。
カスタマイズ: スクロールのしきい値（300ピクセル）や、ボタンの表示位置、デザインなどは、CSSやJavaScriptを調整することで変更できます。

このコードは、Webページのユーザビリティ向上に役立つ基本的なJavaScriptの例です。

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アカウント]

10/08/2024

ConoHaサーバの無料の独自SSL

デフォルトのサブドメインには最初からSSLが設定してあるが、それ以外のドメインにも無料の独自SSL（Let’s Encrypt）がコンパネから簡単に設定出来る

https://support.conoha.jp/w/letsencrypt/

※SSLを設定すると自動的にhttpsのURLへリダイレクトされる

10/07/2024

ConoHaサーバのWINGベーシックプラン契約した

メインで使ってるサーバはPHPのVer.あげるのにサーバ移行しなくてはならず、とりあえず保険で1年だけ月額1,000円以下で並行して運用するが、使ってみてこちらが良ければ全面的に移行もありだ

契約するとデフォルトのサブドメイン（●●●.conohawing.com）がすぐに使えるのは、どこのレンタルサーバもやってるサービスだが、オマケでドメインが1つ無料で取得出来て、SSLも無料で設定可能＝サーバ代のみで運用可能だ

更に無料のドメインからのサブドメインも無料で設定出来るので以下の3つのサイトが用意できた

デフォルトサブドメイン

https://td.conohawing.com/

オマケの無料ドメイン

https://tan-deki.com/

オマケの無料ドメインからのサブドメイン

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

10/06/2024

XサーバのVPSの基本（ユーザの作成・削除、ユーザ名の変更、パスワードの変更）

root 以外の他のユーザの作成は、コンパネからは設定できず、コンソールを開いて root ユーザでログインして、adduserで作成したが・・・

このユーザを削除するには deluser

deluser momoiroookami

このユーザのユーザ名を変更するには usermod

usermod -l newwolf momoiroookami

newwolf ユーザのパスワードを変更するには passwd

passwd newwolf

このコマンドを実行すると、新しいパスワードの入力を求められるので、パスワードを2回入力すればOK

※ユーザ名の変更は、特にシステムの設定やファイル権限に影響を与えることがあるので注意が必要

※パスワード変更は、一般的には管理者権限なしでも実行できるが、他のユーザのパスワードを変更する場合は、管理者権限が必要

10/05/2024

XサーバのVPSの基本（ログイン、ユーザ切り替え、終了）

https://secure.xserver.ne.jp/xapanel/login/xserver/

上記リンクより、Xサーバのアカウントにログインしたら、サービス管理からご利用中のサービスにある【VPS】を選択

サーバの一覧から[VPS管理]ボタンで選択するとVPSパネル（要はコンパネ）が開く

稼働中なら[コンソール]ボタンが使える

コンソール画面が表示され、login: とあるので、root （または他のユーザ名）とパスワードでログインする

root ユーザはすべての権限があるため、root ユーザから別のユーザに切り替える場合は、パスワード不要なのだった

exit（もしくは Ctrl + D）で現ユーザのセッションが終了

※そもそも root ユーザの作成は、コンパネからのサーバ設定時にパスワードを入力したのだけど、他のユーザはコンパネからは設定できないので、コンソールを開いて root ユーザでログインして、adduserでユーザ名とパスワードを設定して作成したのだった

10/04/2024

SSLの更新作業手順（GlobalSign）

更新作業を進める前に確認しておくこと

・正確なドメイン

・GlobalSignのログインIDとパスワード

・承認メールアドレス（受信可能かどうかもテスト）

更新作業手順

・CSRの生成

・GlobalSignにログインして、必要な情報を入力して申請

・入金が確認されると承認メールがくる

・承認メールからURLを開いて[承認]

・SSLサーバ証明書が発行されるので、GlobalSignにログインして確認

・SSLサーバ証明書をインストール

・ブラウザから確認

※承認メールに使えるメールアドレスリスト

admin@コモンネーム
administrator@コモンネーム
hostmaster@コモンネーム
webmaster@コモンネーム
postmaster@コモンネーム
admin@コモンネームで使用されているドメイン名
administrator@コモンネームで使用されているドメイン名
hostmaster@コモンネームで使用されているドメイン名
webmaster@コモンネームで使用されているドメイン名
postmaster@コモンネームで使用されているドメイン名

10/03/2024

Instagramの登録メールアドレスが変更できないんですと

レンタルサーバを1つにまとめてるので、今月中に解約になってしまうレンタルサーバがあり＝使えなくなるメールアドレスがある

そのメールアドレスで登録してたSNSなどは、今月中に新しいメールアドレスに変更する必要があるのだが、殆ど使ってないInstagramはこの変更を拒否するんだよね

そもそもがFacebookと連携してるんだから、一緒に変更できても良さそうなのに、ログインを月に10回もしてないからか、上記画像のようにはねられたというね

フツーは使用してるメールアドレスが最新のモノかどうかをこそ確認するのだけどね、これでInstagramにログインできなくなったら笑える

試しに1日1回は同じPCからログインしてみるか？！

10/02/2024

Facebookから機能の一時停止ですと

何のためにFacebookやってるのかって、友達の動向を知るためと、その友達といざって時に連絡できるからよ

でも最近のFacebookのフィードには20件に1件くらいしか必要とする友達の投稿が流れてなくて、くだらない動画と広告ばかりでしょ？

それらをブロック（非表示に）して、友達の投稿を見易くしたいってのの何が悪いの？？？

「コミュニティ規定に違反」ってのがまた笑っちゃうけど、何も関係ない投稿を延々と見てる暇があったら、Facebookやめて友達一人一人と連絡取り合えてるっつの！

とりあえず「見てて癇に障る広告を非表示にしてるだけで、何も違反してないと思いますよ」とお知らせしたら解除されたけど、ブロックしたくなるほど広告だらけにする方がおかしい、限度ってモノがある！！

10/01/2024

.htaccessのPHP設定（CPI、ロリポップ、heteml）

HTMLファイルでPHPを使いたい場合、Xサーバでは以下のように.htaccessに記述

AddHandler fcgid-script .html

これはFastCGIを使ってHTMLファイルを処理する設定

でもレンタルサーバによって異なる方式でPHPを処理するので、他では設定が違う

ちなみにCPIだと以下

AddHandler x-httpd-php80 .php .html

ロリポップだと以下

AddHandler php8.2-script .html

hetemlだと以下

AddHandler php7.4-script .html

てか、hetemlはVer.上げなきゃだわ・・・

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>

登録: 投稿 (Atom)