MintWPの記事画面はデフォルトではこんなだ
body{background:#e6e6e6;font:normal normal 13px Domine,Arial,Helvetica,sans-serif;line-height:1.6;margin:0;padding:0;}
body {
font-size: 16px !important;
}
やり方としては基本エディタ（ViviかVS Code）にHTML手打ち、適宜PHPやJavaScriptで色々便利な機能を搭載というのが、自分にとっては扱い易いサイトで、できればWordPressは使いたくないのだが、「検索機能」が標準搭載ってのは便利だ
あの映画、録画してあったような・・・？
ドキュメンタリーを全部どこかにダビングしてあったはず・・・？
録画だけはしてあっても1度も観てないなんてDVDやBDが100枚以上あって、それぞれに10タイトル入ってるとしても1,000・・・覚えていられるワケもなくってよ、ましてや現物をそのまま手にしても中身はわからんて、当たり前だがいちいちプレーヤーに挿入して確認せねばなので、検索できる一覧を作成しようと一念発起
ここ1ヵ月くらいかけて1記事に1枚分のタイトルをリスト化したのを144記事アップした！
テーマはMintWPというのを使ってて、今はまだ何もカスタマイズしていない状態なので、特にトップページの一覧は画像無しだとちと間抜けだが、幅が狭くなると以下のような表示になり・・・
スマホ画面表示が以下だ
これが自分の理想とするレスポンシヴ感！！
他は手直しできるのでレスポンシヴ感でこのテーマを選んだのだ
サイトのタイトルなのにマスカット粒の影と重なって文字が読み難い
白い縁を付けてみたら見易くはなったけど、なんか・・・浮き過ぎじゃん？
#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;
}スマホ画面だと短いタイトルでも折り返してる時がある
しかもこの折り返し方は嫌だ・・・「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;
}上手く行った
HTMLで絶対に改行させたくない場合、一般的に<nobr>タグが使用されてたのが、<nobr>タグはHTML5で非推奨となり、代わりにCSSのwhite-spaceプロパティを使用することが推奨された
white-spaceプロパティで改行を禁止する.no-break {
white-space: nowrap;
}
<nobr>タグについて<nobr>タグは、Netscape Navigatorが独自に拡張したタグで、HTML5では非推奨となっているため、white-space: nowrap;を代替使用
<p class="no-break">これは改行されません。</p>
white-space: nowrap;は、ほとんどのモダンブラウザでサポートされているも、古いブラウザでは動作しない可能性ありnowrapを指定した場合、要素の幅を超えてテキストが表示される可能性あり、この場合、overflowプロパティなどを併用して、はみ出した部分の処理を行う必要がある<span>タグなどで区切りを入れるなど、適切な対策を検討すべし自分でもスクリーンリーダーを試してみれば、ウェブアクセシビリティを実感できる？
スクリーンリーダーのダウンロードと使用
NVDA (NonVisual Desktop Access):
ダウンロード:
無料でオープンソースのスクリーンリーダーで、Windowsで使用可
JAWS (Job Access With Speech):
ダウンロード:
高機能な商用スクリーンリーダーで、Windowsで使用可、試用版あり
VoiceOver (Mac, iPhone, iPad):
使用方法: Apple製品に標準搭載されてるので、Macでは「システム環境設定」→「アクセシビリティ」→「VoiceOver」、iPhoneやiPadでは「設定」→「アクセシビリティ」→「VoiceOver」から有効
ページを開き、スクリーンリーダーを有効に
キーボードだけでページをナビゲートできるか確認する（タブキーで移動し、エンターキーで選択）
画像のalt属性や、リンクやボタンのラベルが適切に読み上げられるかチェック
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: 他の要素を参照してラベルを指定。例えば、フォームフィールドにラベルを付ける場合に使用。
WAVE (Web Accessibility Evaluation Tool)
ブラウザでツールのページを開いたらURLを入力するだけ
※英語サイトなのでChromeで開いてDeepL（拡張機能）で翻訳してる
実際の動作⇒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ピクセルを超えているかチェックします。
backToTopButton.classList.add('show');: ボタンに'show'というクラスを追加します。CSSでこのクラスに表示に関するスタイルが定義されており、ボタンを表示させる効果があります。backToTopButton.classList.remove('show');: ボタンから'show'クラスを削除します。これにより、ボタンが非表示になります。このコードは、以下の動作を実現します。
補足:
このコードは、Webページのユーザビリティ向上に役立つ基本的なJavaScriptの例です。
トップへ戻るボタンの画像を用意してサーバにアップして、ボタンを表示するページの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/