些細な日常
サイトに 画像を描画できるインラインSVG は小さくても乱れず、しかもサイト内にマークアップすればサーバーの呼び出しを行わず、迅速に表示できるからアイコンのデザインなどに良く使われる。 インラインSVGには同じ画像を繰り返して表示するためのマークアップがある。 一つのsvgタグの内側にdefsタグを入れてそこにid付きのgタグかsymbolタグで描画内容を纏めておく。そして内側か、または外側の場合は他のもう一つのsvgタグにuseタグを入れてhref属性でgタグかsymbolタグのidを指定してリンクのように呼び出す。 目次 インラインSVGの二つの呼び出し方 一つのsvgタグの中で呼び出す場合 定義用と表示用のsvgタグを分ける場合 呼び出しのマークアップの長所と短所 SVGのgタグとsymbolタグの違い インラインSVGの二つの呼び出し方 一つのsvgタグの中で呼び出す場合 HTML <svg view…
BIGLOBEモバイルを四年近く使って来て契約時に購入したスマホの Moto G5 Plus は依然として快調だけれどもかつての 基本料金 や エンタメフリー のオプションが他社と比べて魅力を失ったと感じたから乗り換えるべく、解約することにした。 BIGLOBEモバイルの解約方法のパターン データSIM 解約：ウェブでのみ行う BIGLOBEの退会・インターネット接続のみ解約の手続 音声通話SIM 通常の解約：電話でのみ行う MNP転出：ウェブか電話で行う 「BIGLOBEモバイル」解約・他社へのMNP転出手続き BIGLOBEモバイルの解約方法はデータSIMと音声通話SIMの二つの場合に分けられて前者はウェブのみ、後者は電話かウェブのどちらかになり、通常の解約が電話のみ、電話番号の他社への持ち越しのMNP転出はMNP予約番号の発行が電話かウェブのどちらでも可能になっている。 僕は通常の解約で電話をかけてよもや参ったの…
ブログにSearch Consoleのモバイルユーザビリティの赤い文字のエラーで、モバイルユーザビリティの問題として「コンテンツの幅が画面の幅を越えています」というのが出た。 モバイルユーザビリティ｜ Search Console ｜ Google 問題のページは一つだけで、確認してみるとスマホで画像などのコンテンツの一部が画面の端から抜けてしまっていて正しく、エラーの文言の通りの状況だった。 このエラーは、ページの CSS 宣言で絶対値を使用している場合や、ページの画像が特定のブラウザ幅（980px など）で最適に表示されるように設計されている場合に発生します。このエラーを修正するには、ページの CSS 要素に対して相対的な幅と位置の値を使用し、画像も同様にスケーリングできるようにします。 モバイル ユーザビリティ レポート｜ Search Console ヘルプ ｜Google 原因として直ぐに思い当た…
イギリスの作家、小説家で詩人の ラドヤード・キップリング の童話集 その通り物語 （1902）の収録作品の 駱駝はどのように瘤を得たか の日本語訳を行った。 ラドヤード・キップリングの 駱駝はどのように瘤を得たか の英語の出典 How the Camel Got His Hump by Rudyard Kipling／ラドヤード・キップリングの 駱駝はどのように瘤を得たか 原文： Wikisource （ 作品集 ） 朗読： LibriVox （ ティム・バルクレイ ） 両方とも パブリックドメイン （著作権なし）だから無料で自由に使って構わない。 関連ページ ラドヤード・キップリングの駱駝はどのように瘤を得たかの原文と注解 ラドヤード・キップリングの 駱駝はどのように瘤を得たか の日本語の訳文 Illustration to How the Camel Got His Hump from Garden City, N.Y. : Doubleda…
アドセンスの自動広告は一つの広告コードで幾つもサイト広告を表示できて便利だし、基本的にコンテンツの隙間に上手く挿入されてサイトのレイアウトが崩れることはないと思っていたらやられた。 ある日、突然、ブログの記事が右端から抜けてしまって行毎の折り返しを解除したような状態になっていた。画像や文章の一部、そして自動広告も右に少しずれて何なのかと調べてみて自動広告を外したら直ったので、原因はこれしかないと分かった。 Googleでアドセンスの自動広告の出し方が変更されれば今までにないことが起きる可能性は十分にあるし、または自分のサイトのテンプレートの変更も影響しないとはかぎらないから注意しなくてはならない。 アドセンスの自動広告がどういうふうに表示されるかは良く分からないし、たとえ分かっても広告コードを非公式に変更するとペナルティーを食らう恐れが全くないわけではないから厄介だ。 個人的にアドセンスの自動広…
サイトのコンテンツをサイト全体とは別に子要素として上下左右に移動して表示できるスクロールボックスをデザインのCSSを使ってパソコンやタブレットやスマホなどの様々なデバイスの画面幅に合わせられるレスポンシブな作り方を纏めた。 目次 スクロールボックスに必要なCSS 縦スクロールボックスの作り方 縦スクロールボックスのサンプル サンプルのソースコード 横スクロールボックスの作り方 min()を使った横幅一杯の指定 縦スクロールボックスのサンプル サンプルのソースコード スクロールボックスに必要なCSS 紫陽花の大きな写真が縦横のスクロールで表示される。 画像や文章などのコンテンツを入れるボックスの大きさとスクロールの指定がなくてはならない。 その他に横スクロールで文章のコンテンツは行毎の折り返しを解除するための指定も必要になる。 縦と横のスクロールボックスの作り方は基本的に同じだけれども横の方が文章の折り返しや表示領域…
サイトで画像や動画に文章を続けると隙間が多めに付いたり、囲うリンクが大き過ぎて画像や動画の下が余ったりしてデザインが崩れることがある。枠線や余白を消しても現れて悩まされるけれども対処法が分かったので、どうすれば余分な隙間を消し去って画像や動画のデザインを次の文章やリンクの大きさと整えられるかを纏める。 画像や動画が周りの要素とずれる原因 サイトの画像や動画が周りの要素とずれる原因はHTMLの画像を表示するimgタグや動画を表示するiframeタグの扱いが影響している。 imgとiframeは改行なしの要素で、縦位置がベースラインとなり、次の列の要素との間に僅かな空間が取られる。 日本語にはないけれども例えば英語では「g」と「j」と「p」と「q」と「y」の文字が本体よりも下に伸びるところがベースラインの下になる。 HTMLでそうしたベースラインの下が画像のimgタグや動画のiframeの下の隙間に相…
BloggerのテンプレートのCSSでbodyのセレクターに#layoutを使用すると管理画面のレイアウトに表示されるガジェットのデザインをカスタマイズして付けることができる。 目次 body#layout：管理画面のレイアウトへの指定 背景色のサンプルのソースコード CSSのカスタマイズに適した領域 ガジェットのデザインのためのセレクター 公式テーマのガジェットの主なセレクター ガジェットの位置取りを変えるためのヒント 公式テーマのセクションの親ボックスの主なセレクター 位置取りのサンプルのソースコード レイアウト用のCSSをブログから除外する方法 body#layout：管理画面のレイアウトへの指定 BloggerのテンプレートのCSSは管理画面のテーマのカスタマイズのの詳細設定の「CSSを追加」やメニュー（▼）の「HTML編集」か「元に戻す」（テンプレートのXMLファイルのアップロード）で書き換えられる。 …
ブログの人気の投稿の表示で画像と文章をCSSのdisplay:flexで横並びにしようとしたら上手く行かなくて参った。行毎に画像の大きさが異様に変わったり、スペースに合わなくて無駄な隙間が増えるかスペースが広がり過ぎて慌てるばかりだった。画像が潰れるとしか呼べない。あるいは縮んだり、膨らんだりして大変だったけど、しかし何とか考え通りの表示を果たしたので、覚え書きというか、どうすれば上手く行ったかの対処法を纏めておきたい。 目次 フレックスボックスと画像を分けて捉える 画像を親ボックスに入れて文章と揃える方法 画像の親ボックスと文章の四対六の横並びの例 画像をそのままで文章と揃える方法 画像自体と文章の四対六の横並びの例 フレックスボックスと画像を分けて捉える 失敗の原因として気付いたのは画像を親ボックスに入れて画像の大きさだけを指定して文章と合わせようとした。するとフレックスボックスに対しては画像の親…
サイトにヘッダーへの戻るボタンなどをスクロールしても変わらない位置にCSSのposition:fixedで普通に貼り付けると大画面でサイトの幅を越えてしまうので、コンテンツからはみ出さず、サイトの表示領域の範囲内に収める方法を考える。 calc()によるposition:fixedの位置の算出 CSSのposition:fixedはtopかbottomで縦、leftかrightで横の少なくとも二つの値で位置を決める。ただし値の基準がサイトではなくて画面になっているからサイズがサイトよりも大きな画面だとコンテンツの表示領域からはみ出してしまう。 position:fixedの振る舞いについて 要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。ビューポートによって定められた初期の包含ブロックに対して相対配置されますが、祖先の一つに transform, pe…
JavaScriptのイベントのtransitionendとanimationendはそれぞれにCSSのtransitionとanimationの終了を検出する。なので後者を使うときに前者も一緒に使うとサイトで連動する動作を簡単に実現するプログラムが組める。 Metal gears by Bill Oxford / Unsplash 一般的にメニューをスライドしたり、ボタンをフェードしたりするなどの コンテンツのアニメーションを介した表示と非表示の切り替え に役立つ。 transitionendイベントでtransitionを捕捉する 何かをCSSのtransitionで動かしたら当のHTML要素をJavaScriptのaddEventListener()メソッドのtransitionendで補足して連動して別の状態に持って行くのが簡単な使い方だ。 transformとaddEventListene…
スマホでサイトのリンクをタップすると青く光る。調べると使用中のブラウザが影響しているようで、リンクの光の色と形がそれぞれで、何も起こらないものもある。僕はAndroidのChromeで気付いたけれどもiPhoneのSafariでもリンクのタップした瞬間の光が付けられている。その他、Edgeなども対応している。サイトのリンクのデザインとしてハイライトカラーと呼ばれる。 スマホのハイライトカラーはパソコンのマウスのカーソルに相当するもので、サイト作成ではリンクのクリックの効果として等しく扱うことができる。 リンクの光の色を変更する方法 CSSにスマホのハイライトカラーを変更するマークアップがある。 -webkit-tap-highlight-color スマホのリンクのハイライトカラー 通常のcolor／色やbackground-color／背景色のように色名や色コードの値を指定してデザインを付けられる…
アドセンスに利用者の税務情報が必要となり、2021年6月1日以降、YouTubeのサイト広告などで収益を得る場合には税務情報を提出しないとアドセンスの支払いからアメリカの源泉所得税が米国内国歳入法の第三章により、控除される。 Google は、YouTube パートナー プログラム（YPP）に参加しているクリエイターから税務情報を収集する必要があります。税額控除が適用される場合、YouTube における広告の表示、YouTube Premium、Super Chat、Super Stickers、チャンネル メンバーシップを通じて得た収益のうち、米国の視聴者から得た分につき Google が源泉徴収を行います。 YouTube での収益に関する米国の税務要件｜ YouTube ヘルプ ｜Google アメリカのアドセンスを運営するGoogleが準拠する税法の一部がアメリカの居住者から収益を得ている…
外国人の親日YouTubeチャンネルは日本人として逆に教えられることがあるのが特に面白い。観ると次々と関連したチャンネルが表示されるけれども気付いたのはロシア人がやっているのが目立つ。 昨今はヴイログ／Vlogといってブログのように気軽に撮られた動画が増えていてそんな親しみ易い内容のロシア人の親日YouTubeチャンネルが興味深いと感じる。 ロシアには日本の車や電化製品や漫画／アニメなどを通じて好印象を抱いて親日家になる人が多いとされる。こうしたことは他の国でもあり得なくはないけれどもロシア人の動画から初めて知ったのは日本語がロシア人には美しく聞こえるらしい。他の国の人から知ることはなかった。だからロシア人は人間として日本人に特別な感情を抱いたり、日本語を含めて日本への愛着が国民的に強くなるのかも知れないと想像される。親日YouTubeチャンネルを観ても思いが深くて心が親身に伝わるようだ。 発…
所用でマイナンバーカードが必要となり、申し込んで手に入れたけど、偶々、マイナポイントが付与されるので、受け取りに特定のポイントカードなどがさらに必要となった。一つも持ってなかったので、色んな店のポイントに対応していて使い易そうな nanacoカード を新しく作ることにした。 nanacoの三種類のタイプ nanacoカード 電子マネーカードで使用 有料登録／審査なし 店頭かWebで申し込んで受け取る nanacoモバイル おサイフケータイで登録使用 無料登録／審査なし 対応するスマホでアプリをダウンロード セブンカード・プラス クレジットカードで登録使用 無料登録／審査あり 郵送かWebで申し込んで受け取る ※シニアナナコ（六十歳以上）、ENEOS nanaco（ENEOS）やANA QUICPay + nanaco（ANA JCBカード）という特別仕様もある。 ※nanacoギフトとGoogle Payで支払い、nan…
JavaScriptで時間を数えてスタートとストップとリセットの三つのボタンで操作できるストップウォッチのプログラムを組む。 目次 ストップウォッチの計測時間の表示 ストップウォッチのソースコード 時間を数えて表示するプログラムの概要 時間を数えて表示するプログラムの説明 ストップウォッチの計測時間の表示 00:00.00.00 スタート ストップ リセット ストップウォッチのソースコード HTML <figure class="time"> <p class="counter">00:00.00.00</p> <button class="start" type="button">スタート</button> <button class="stop"…
