些細な日常

サイトに 画像を描画できるインラインSVG は小さくても乱れず、しかもサイト内にマークアップすればサーバーの呼び出しを行わず、迅速に表示できるからアイコンのデザインなどに良く使われる。 インラインSVGには同じ画像を繰り返して表示するためのマークアップがある。 一つのsvgタグの内側にdefsタグを入れてそこにid付きのgタ…

BIGLOBEモバイルを四年近く使って来て契約時に購入したスマホの Moto G5 Plus は依然として快調だけれどもかつての 基本料金 や エンタメフリー のオプションが他社と比べて魅力を失ったと感じたから乗り換えるべく、解約することにした。 BIGLOBEモバイルの解約方法のパターン データSIM 解約：ウェブでのみ行う BIGL…

ブログにSearch Consoleのモバイルユーザビリティの赤い文字のエラーで、モバイルユーザビリティの問題として「コンテンツの幅が画面の幅を越えています」というのが出た。 モバイルユーザビリティ｜ Search Console ｜ Google 問題のページは一つだけで、確認してみるとスマホで画像などのコンテンツの一部が画…

イギリスの作家、小説家で詩人の ラドヤード・キップリング の童話集 その通り物語 （1902）の収録作品の 駱駝はどのように瘤を得たか の日本語訳を行った。 ラドヤード・キップリングの 駱駝はどのように瘤を得たか の英語の出典 How the Camel Got His Hump by Rudyard Kipling／ラドヤード・キップ…

アドセンスの自動広告は一つの広告コードで幾つもサイト広告を表示できて便利だし、基本的にコンテンツの隙間に上手く挿入されてサイトのレイアウトが崩れることはないと思っていたらやられた。 ある日、突然、ブログの記事が右端から抜けてしまって行毎の折り返しを解除したような状態になっていた。画像や文章の一部、そして自動広告も右に少…

サイトのコンテンツをサイト全体とは別に子要素として上下左右に移動して表示できるスクロールボックスをデザインのCSSを使ってパソコンやタブレットやスマホなどの様々なデバイスの画面幅に合わせられるレスポンシブな作り方を纏めた。 目次 スクロールボックスに必要なCSS 縦スクロールボックスの作り方 縦スクロールボックスのサンプル サ…

サイトで画像や動画に文章を続けると隙間が多めに付いたり、囲うリンクが大き過ぎて画像や動画の下が余ったりしてデザインが崩れることがある。枠線や余白を消しても現れて悩まされるけれども対処法が分かったので、どうすれば余分な隙間を消し去って画像や動画のデザインを次の文章やリンクの大きさと整えられるかを纏める。 画像や動画が周り…

BloggerのテンプレートのCSSでbodyのセレクターに#layoutを使用すると管理画面のレイアウトに表示されるガジェットのデザインをカスタマイズして付けることができる。 目次 body#layout：管理画面のレイアウトへの指定 背景色のサンプルのソースコード CSSのカスタマイズに適した領域 ガジェットのデザインのた…

ブログの人気の投稿の表示で画像と文章をCSSのdisplay:flexで横並びにしようとしたら上手く行かなくて参った。行毎に画像の大きさが異様に変わったり、スペースに合わなくて無駄な隙間が増えるかスペースが広がり過ぎて慌てるばかりだった。画像が潰れるとしか呼べない。あるいは縮んだり、膨らんだりして大変だったけど、しか…

サイトにヘッダーへの戻るボタンなどをスクロールしても変わらない位置にCSSのposition:fixedで普通に貼り付けると大画面でサイトの幅を越えてしまうので、コンテンツからはみ出さず、サイトの表示領域の範囲内に収める方法を考える。 calc()によるposition:fixedの位置の算出 CSSのposition:…

JavaScriptのイベントのtransitionendとanimationendはそれぞれにCSSのtransitionとanimationの終了を検出する。なので後者を使うときに前者も一緒に使うとサイトで連動する動作を簡単に実現するプログラムが組める。 Metal gears by Bill Oxford / …

スマホでサイトのリンクをタップすると青く光る。調べると使用中のブラウザが影響しているようで、リンクの光の色と形がそれぞれで、何も起こらないものもある。僕はAndroidのChromeで気付いたけれどもiPhoneのSafariでもリンクのタップした瞬間の光が付けられている。その他、Edgeなども対応している。サイトの…

英語で住所を表記する場合、語順は全て日本語の場合と逆になる。 英語の住所の語順 国会議事堂の住所を例にしてみる。 日本語の表記 〒100-0014 東京都千代田区永田町１丁目７−１ 英語の表記 7-1 Nagata-cho 1 chome, Chiyoda-ku, Tokyo-to 100-0014 面白いようにすっかり前後が入れ…

アドセンスに利用者の税務情報が必要となり、2021年6月1日以降、YouTubeのサイト広告などで収益を得る場合には税務情報を提出しないとアドセンスの支払いからアメリカの源泉所得税が米国内国歳入法の第三章により、控除される。 Google は、YouTube パートナー プログラム（YPP）に参加しているクリエイターか…

外国人の親日YouTubeチャンネルは日本人として逆に教えられることがあるのが特に面白い。観ると次々と関連したチャンネルが表示されるけれども気付いたのはロシア人がやっているのが目立つ。 昨今はヴイログ／Vlogといってブログのように気軽に撮られた動画が増えていてそんな親しみ易い内容のロシア人の親日YouTubeチャンネ…

所用でマイナンバーカードが必要となり、申し込んで手に入れたけど、偶々、マイナポイントが付与されるので、受け取りに特定のポイントカードなどがさらに必要となった。一つも持ってなかったので、色んな店のポイントに対応していて使い易そうな nanacoカード を新しく作ることにした。 nanacoの三種類のタイプ nanacoカード 電…

JavaScriptで時間を数えてスタートとストップとリセットの三つのボタンで操作できるストップウォッチのプログラムを組む。 目次 ストップウォッチの計測時間の表示 ストップウォッチのソースコード 時間を数えて表示するプログラムの概要 時間を数えて表示するプログラムの説明 ストップウォッチの計測時間の表示 00:00.00.00 ス…