些細な日常
Imaginaryに ブログの目次を表示するカスタマイズ を紹介したけど、使用したJavaScriptのコンテンツの目次の自動生成のプログラムはBloggerの他のテーマを含めて他の全てのサイトで使うことができるので、もはや著者名を付けるだけで誰でも無料で使えるように提供しようと思った。 目次の自動生成のプログラムの特徴 コンテンツのHTMLの見出しタグの良く使われるh2からh4までを取り込んで順序付きリストタグのolとliに見出しへのジャンプリンクを入れて階層的に仕立てた目次を最初の見出しタグの直前に挿入する。 目次のジャンプリンクを得るために見出しのidを新しく付けているので、もしも既存のidを、そのまま、使いたい場合は ソースコードのカスタマイズ を行うと上書きを避けることができる。 目次の見出しのリストは開閉メニューのdetailsで、表題と開閉ボタンを付…
サイトのHTMLに最初から記載されてないコンテンツを後からJavaScriptで挿入するとそのときにページが新しいスペースを取られて動いてしまう。初回画面だと既存のコンテンツが押し下げられるのが、一瞬、見えたりもするけど、これがサイトのCLS（Cumulative Layout Shift／累積的な配置の変動）を上げて使い難くなる。 指標｜PageSpeed Insights｜ Google Developers 良くあるのが押そうとしたボタンがサイトの読み込み中に動いて押せなくなってしまうことだ。 訪問者に良い印象を与えないのはもちろんだけど、さらにGoogleのサイトの検索状況のSearch Consoleや性能計測のPageSpeed Insightsでも警告が出されるので、 検索エンジンからアクセスアップを望む 上でもCLSの上昇に注意しなくてはならな…
アドセンスの自動広告は最初の頃と比べると出方が良くなってサイトのデザインを崩すことが少なくなって来た。それでも 偶に突き抜けたりして修正てきるにしても 使い辛い面がないわけではない。しかしながら最も多いのはコンテンツとの隙間がおかしくなる。近過ぎたり、遠過ぎたりする。気にするかしないかの微妙なズレではあるだけれども個人的に止めて欲しいと思うし、そのせいで、アドセンスの自動広告を最初の頃は使わないでいた。 目次 自動広告の微妙なズレが悩ましい CSSで微調整を行うことができる 自動広告の微調整に役立つ二つのCSS要素 自動広告の微調整のためのCSSの指定先 自動広告の微妙なズレが悩ましい 今は相当に改善されているけれどもブログで又出たのが一つ見付かった。 ページャーに寄ってこれでは誤クリックを誘発し兼ねないほどの不味い位置にある。 自動広告にとってデザインのバランスが取り…
ブログランキングなどで登録したブログの更新を伝えてサイト内容を取得できるようにするために使われるping送信がある。ブログの更新に合わせてping送信を行う機能が付いていれば良いんだけれども付いてない場合はできない。 例えばブログサービスのBloggerにはping送信の機能が付いてないためにping送信を記事の取得に活用する にほんブログ村 や 人気ブログランキング などに登録してもブログの更新を手動で伝えなくてはそうしたランキングサイトでの記事の表示内容を変えることはできない。 しかしWebサービスの IFTTT を使えはブログのRSSフィードなどから更新に合わせてping送信を自動的に行えると分かったので、とうやるかを載せておきたい。 IFTTTでのping送信の自動化の手順 IFTTT（イフト／IF This Then That: これならばそこでそれを）はサ…
TwitterとInstagramとYouTubeには他のサイトにコンテンツを埋め込んで表示する機能があってとても便利だけれども他のサイトからすると外部ファイルやサイトを読み込まなくてはならないから表示するのに普通よりも時間がかかってしまう。 通常ではさほど気にならないかも知れないにせよ、サイトによってファイルの読み込みやコンテンツの表示の仕方からで非常に遅れることもないわけではない。 サイトで外部ファイルを優先的に読み込む方法として HTMLのリソースヒントの一つとしてpreload（先読み）のソースコードがある ので、TwitterとInstagramとYouTubeの埋め込みを少しでも表示したい場合に使える。 目次 Twitterの埋め込みコードを先読みする Twitterの埋め込みコードの外部ファイル Twitter用の二種類の先読みのソースコード Inst…
Imgurに画像をアップロードしていたら最初は何事もなく、何枚かスムーズに完了したにも拘わらず、不意に一枚がおかしな状態になり、アップロードがいつまでも完了しなくなった。 タブレットでやっていたけれどもステータスバーに「Uploading to imgur／Imgur upload is working」（Imgurへアップロード／Imgurアップロードの作業中）と出て画像が表示されるので、大丈夫そうでも公開するはずが下に「HIDDEN」（隠す）と出ておかしいと感じた。暫く経つと「Upload error／Tap to retry／CANCEL」（アップロードエラー／タップしてやり直す／中止）と出て止まってしまう。タップしてやり直しても二つのメッセージの状態を繰り返すだけでどうにもならないので、中止するとアップロードエラーが確定してさらに用意した画像…
サイトに 画像を描画できるインラインSVG は小さくても乱れず、しかもサイト内にマークアップすればサーバーの呼び出しを行わず、迅速に表示できるからアイコンのデザインなどに良く使われる。 Honeycomb by Clker-Free-Vector-Images / Pixabay インラインSVGには同じ画像を繰り返して表示するためのマークアップがある。 一つのsvgタグの内側にdefsタグを入れてそこにid付きのgタグかsymbolタグで描画内容を纏めておく。そして内側か、または外側の場合は他のもう一つのsvgタグにuseタグを入れてhref属性でgタグかsymbolタグのidを指定してリンクのように呼び出す。 目次 インラインSVGの二つの呼び出し方 一つのsvgタグの中で呼び出す場合 定義用と表示用のsvgタグを分ける場合 呼び出しのマークアップの長所と短所 SV…
サイトにヘッダーへの戻るボタンなどをスクロールしても変わらない位置にCSSのposition:fixedで普通に貼り付けると大画面でサイトの幅を越えてしまうので、コンテンツからはみ出さず、サイトの表示領域の範囲内に収める方法を考える。 calc()によるposition:fixedの位置の算出 CSSのposition:fixedはtopかbottomで縦、leftかrightで横の少なくとも二つの値で位置を決める。ただし値の基準がサイトではなくて画面になっているからサイズがサイトよりも大きな画面だとコンテンツの表示領域からはみ出してしまう。 position:fixedの振る舞いについて 要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。ビューポートによって定められた初期の包含ブロックに対して相対配置されますが、…
アドセンスに利用者の税務情報が必要となり、2021年6月1日以降、YouTubeのサイト広告などで収益を得る場合には税務情報を提出しないとアドセンスの支払いからアメリカの源泉所得税が米国内国歳入法の第三章により、控除される。 Google は、YouTube パートナー プログラム（YPP）に参加しているクリエイターから税務情報を収集する必要があります。税額控除が適用される場合、YouTube における広告の表示、YouTube Premium、Super Chat、Super Stickers、チャンネル メンバーシップを通じて得た収益のうち、米国の視聴者から得た分につき Google が源泉徴収を行います。 YouTube での収益に関する米国の税務要件｜ YouTube ヘルプ ｜Google アメリカのアドセンスを運営するGoogleが準拠する税法の…
スマホのデータ無制限の契約プランが各社から出ていてたぶん基本料金と併せて最も安く使えるのがmineoかも知れない。音声通話とデータ通信のデュアルタイプの1GBとデータ無制限のパケット放題で、2021年4月時点、1298円と385円の1683円（税込み）で使い始めた。最も安く纏めるならばデータ通信のみのシングルタイプの1GBの880円とパケット放題で、1265円（税込み）まで下げることができる。 追記：2021年6月1日から従来のパケット放題と価格は変わらず、通信速度が三倍の最大1.5Mbpsとなるパケット放題Plusの提供が開始された。通信データが非常に多いInstagramなどの画像中心のサイトでもさほど待たされず、閲覧できるから本当に使い易くなった。 目次 パケット放題の使い心地は決して悪くない mineoのパケット放題の通信速度の目安 体感速度としての…
Bloggerの管理画面が更新されて「設定」の「公開しています」に新しく追加された項目にフォールバックサブドメインがある。 フォールバックサブドメインとは何か 設定｜ Blogger カスタムドメインの登録と関連してメインとなるドメインの他に（共通する独自ドメインから）一つだけ同じようにブログのサーバーに接続することができるようにする。 フォールバックサブドメインは通常のサブドメインを読み込む間のサーバーの障害への予防策として追加されるサブドメインです。ドメインに一つ以上の使用できるサブドメインがある場合にはドメインの登録済みのサーバーにサブドメインを設定するとメインとなるドメインはフォールバック――無視できるものの微細な低速度状態の閲覧を得られるようになります。 原文 A Fallback subdomain is a subdomain added as a…
Juno Download は音楽データの購入サイトで、イギリスでエレクトロを中心にドラムンベースやソウルやヒップホップやハウスやポップなどを取り扱っている。 日本からでもクレジット／デビットカードやオンライン決済サービスの決済で使えるので、楽曲を購入する方法を纏めておくけど、現状は日本語版がないから些か注意を要する。 Juno Downloadでの楽曲購入の流れ 商品ページ｜ Juno Download 海外のサイトで日本からの購入では商品価格に当時の為替相場が反映する。料金表示がイギリスの￡になっているけれども日本の円に変えることができて画面の最上段の右上の人型のドロップメニューの最下段の「My currency」（私の通貨）を使う。最初は「GBP」（イギリスポンド）だけれども押すと他の通貨を幾つか選択できて「JPY」（日本円）がある。選択するとサイトの商…
