些細な日常
サイトのHTMLに最初から記載されてないコンテンツを後からJavaScriptで挿入するとそのときにページが新しいスペースを取られて動いてしまう。初回画面だと既存のコンテンツが押し下げられるのが、一瞬、見えたりもするけど、これがサイトのCLS（Cumulative Layout Shift／累積的な配置の変動）を上げて使い難くなる。 指標｜PageSpeed Insights｜ Google Developers 良くあるのが押そうとしたボタンがサイトの読み込み中に動いて押せなくなってしまうことだ。 訪問者に良い印象を与えないのはもちろんだけど、さらにGoogleのサイトの検索状況のSearch Consoleや性能計測のPageSpeed Insightsでも警告が出されるので、 検索エンジンからアクセスアップを望む 上でもCLSの上昇に注意しなくてはならな…
テンプレートの Imaginary theme にポップアップの表示を付けようとしてCSSのposition:fixedを使おうとしたら横幅が画面から突き抜けてしまって困った。 調べるとposition:fixedのコンテンツの位置指定の基準が普通とは異なることに起因している。 固定位置指定は絶対位置指定に似ていますが、要素の包含ブロックがビューポートによって定義される初期包含ブロックであるという点が異なり、祖先の一つに transform, perspective, filter の何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。 position｜ MDN ｜Mozilla 通常、position:fixedのコンテンツは固定位置指定として親…
サイト作成でHTMLのemとstrongはHTML5／Living Standardで強調と重要性の違いがあるもののどちらも使い方が似ていて分かり辛い。そして初期のデザインが斜体と太字なのがそれぞれにiとbと同じなので、見た目からどちらを使っても良いのかと混乱してしまう。 em／強調タグとは何か strong／重要性タグとは何か i／斜体タグとは何か b／太字タグとは何か 紛らわしい四つのタグの意味をしっかり捉えて的確に使い分けができるようにしたい。 em／強調タグとは何か HTMLのemタグのemはemphasis／強調の冒頭の二文字で、コンテンツの強調を表すために使われる。 em要素は、要素のコンテンツの強調を表す。 コンテンツの特定部分が持つ強調のレベルは、祖先のem要素の数によって与えられる。 強調の設置は、文の意味を変更する。このように要素は、コンテンツの不…
クラウドストレージの Dropbox はサイトで自由にコンテンツを表示できる直リンクのURLをあらゆるファイル形式で取得することができる。 Dropboxの共有リンクのURL 直リンクをURLを取得するには共有リンクが有効になってなくてはならない。 Ringtone｜ Dropbox ファイルのメニューの「リンクをコピー」から共有リンクを取得できる。 DropBoxの共有リンクのURLの例 https://www.dropbox.com/s/gmgraajvzjninyg/Ringtone-Original%2014.ogg?dl=0 ドメインの「www.dropbox.com」から共有リンクのコードとファイル名が半角スラッシュ（/）に区切られて続いて最後にパラメーターの「?dl=0」が付く。 アクセスするとDropboxのファイルのプレビューになる。 パラメーターの「d…
サイトで他のページを表示するiframeタグはYouTubeの埋め込み動画などで良く使われるけれども画像のimgタグと異なり、コンテンツの縦横比をレスポンシブで維持することができない。なのでデバイスの画面幅に一杯で表示するようにすると訪問者の異なるデバイスの画面幅によってコンテンツの縦横比が変わってしまうのが厄介だった。 以前からCSSのaspect-ratio要素がiframeの縦横比を一発で指定する方法として出ていて理想的だったけれども対応するブラウザが少なかった。しかし最近になって漸く主要なブラウザの多くが対応するようになった（ Can I Use ）からついに自分のブログでも取り入れることに決めた。 aspect-ratioのマークアップ 10 modern layouts in 1 line of CSS｜Google Chrome Develop…
サイトがGoogle検索に表示されない原因は大きく分けて二つある。 一つはインデックスされず、Googleにサイト内容が把握されてない。もう一つはランキングが低く、インデックスされたページがあってもサイト評価が低くて検索結果の順位を落とされるか消されている。 ランキングの向上に関しては余りはっきりしたことはいい難いし、Google検索のサイト評価がどのように行われるかはGoogleの関係者も分からないくらい複雑怪奇な面がある。個人的に 公式の検索エンジン最適化（SEO）スターターガイドが最も信頼できる と思う。ランキングの方向性（何が良くて何が悪いか）がGoogle検索の視点から示されているからたとえランキングが更新されても付いて行けるようなサイト運営が可能になるに違いない。 本稿ではインデックスの向上を考える。ランキングと違って決められたことをやれば大丈夫…
サイトの無限スクロールのプログラムのアイデアは大きく二つの部分に分けられる。一つは要素判定で、今のページが画面のどこまで来たら次のページを表示するように動作するかを決める。もう一つは生成処理で、次のページをAjax通信でサーバーから読み込んで今のページに実際に追加する。JavaScriptのプログラムで前者に正しく画面と要素の交差を監視できて最適な Intersection Observer API 、後者にAjax通信の時間差の難点も克服できて便利な Fetch API を使って無限スクロールを作成する方法を取り上げる。 無限スクロールのプログラムの基本的な流れ Brown grasses under white clouds at daytime by Glenn Carstens-Peters / Unsplash 通常、同じデザインのページがページネーシ…
HTMLの iframe タグのコンテンツは画像比がデバイスの画面幅に レスポンシブ で統一できない。およそスマホで画面の横幅一杯に表示したりすると縦幅が変わらないためにコンテンツの画像比が変わってしまうのが厄介なんだ。YouTubeやドライブなど、Webサービスの埋め込みコードにはiframeタグが良く使われるけれども画面の横幅一杯に広がらないように注意して記載しないとレスポンシブで画像比が崩れる。 以前、何とかならないかと悩んで YouTube動画をレスポンシブで正確に表示する方法 を見付けた。CSSのpaddingやpositionを使ってiframeタグのコンテンツの画像比を整えることができると分かって助かった。親ボックスに内側の余白を特定の高さとして確保しながら子の埋め込みを重ね合わせるように移動させると上手く行く。 しかし近年はもう一つの方法が可能で、…
ブログの記事／追加ページの本文の右下に フローティングの戻るボタン を付けた。 当初、方法は分かったけれども画面のスクロールからアドセンスのサイト広告に重なるとポリシー違反の恐れがあるので、用心してやらなかったんだ。 ところが記事／追加ページの本文のところだけとかアドセンスのサイト広告を避けられるブログの一定の範囲内に表示すれば大丈夫だと気付いてCSSのpositionのstickyを使って試したら上手く行った。 stickyは画面のスクロールに応じてコンテンツを固定できる Pineapple floating in water by Pineapple Supply Co. / Pexels CSSのpositionで同じような値にfixedがある。どんな場合でも画面にコンテンツを固定する。使うと、常時、フローティングで表示されるデザインになる。 stickyは…
ボタンで複数の画像を切り替える方法 をやってみたら二枚目以降の画像の読み込みが遅くて参った。何とかならないかと調べてみたらHTMLの「rel="preload"」を使うと助かると分かった。ファイル毎のブラウザの先読みを可能にするからJavaScriptで後から必要な画像などが直ぐに表示できるようになるんだ。 二枚目へ進む 二枚目の画像にpreloadを指定していて非表示でもサイトの閲覧と同時にブラウザに読み込まれるためにJavaScriptの切り替えボタンから待ち時間なしに表示される。 preloadに対応する十二のファイル audio：音楽 video：動画 track：字幕 script：JavaScript stylesheet：CSS font：フォント image：画像 fetch crossorigin：XHR／fetch worker：Wo…
サイトのボタンはHTMLのinputやbuttonとJavaScriptのonclickを組み合わせて実装できる。後者のプログラムが前者を押して発動するようになる。JavaScriptのonclickはイベントハンドラと呼ばれてHTMLのinputやbuttonの開始タグに他の属性と同じように記載すれば機能する。 onclick自体はHTMLの様々な要素に使えるから例えば画像のimgに組み込んだり、inputやbutton以外のデザインのボタンもspanなどにCSSを付けて作成できるだろう。 HTMLとJavaScriptでボタンを作成する 押すと画像が二枚目に切り替わる。 サンプルのソースコード HTML <img id="change-images" src="一枚目の画像URL" data-second-im…
何度も落とされてもう無理だと思いながら アドセンスに合格した 瞬間にはガッツポーズを止められなかった。嬉しさの余り、悲しみを余儀なくされた数だけか、何度も繰り返して飛び上がるように部屋を駆け回ってしまうのも造作なかった。どうしても承認されないわけには行かない気持ちが非常に強かったためだろう。 改めて アドセンス に合格できた理由を考える A woman surrounded by many soap bubbles by Alejandro Alvarez / Unsplash 大前提なのはAdSenseヘルプの コンテンツポリシー に違反しないサイト作成だけど、しかし殆ど適合しても承認されず、最も厳しいと感じるのが不合格の通知の承認されませんでしたというメールの「不十分なコンテンツ」なんだ。落とされる度に目にするし、具体的な指示がなくて、一体、何がどうなっているの…
僕がサイト運営を始めたのは2002年の 詩のホームページ で、大体、五年後くらいにGoogle検索からのアクセスアップを考えるようになったかも知れない。すると十年を過ぎてついに漸く初めて達成されたけれども Search Console でブログの些細な日常の七百件以上の全ての記事がGoogle検索にインデックスされてパーフェクトなのが確認された。ページ数が増えると部分的に抜け落ちて難しくなってしまう。押し並べて百以上か、サイトの管理人として頑張ってもいつも全てのページのインデックスは無理だったのに サイトアドレスを独自ドメインに切り替えた 途端に一ヵ月ちょっとであっさり夢が一つ叶ってしまった。 サイトマップ インデックス｜Search Console｜ Google Google検索へのインデックス はサイトが検索結果に表示されるための第一条件なんだ。サイト内容がペー…
ホームページやブログの検索エンジンでのサイト評価を上げてアクセスアップを図るためには キーワードを入れてタイトルを付けるのが大切 だけれどもどのくらいの文字数が良いのかも考えておきたくなる。 Googleが提起するBloggerのSEO対策への助言を参考にする タイトルは半角 60 文字（全角 30 文字）前後にする（短い簡潔なタイトルは読みやすく、末尾の切り詰めも防ぎます）。 検索エンジンでブログを見つけてもらいやすくする｜ Blogger ヘルプ ｜Blogger 信憑性が高いと思う。BloggerヘルプのSEO対策への助言で、最大手の検索エンジンの Google が提供していて世界で最も利用者の多いブログサービスの一つなのが真実味を著しく与える。検索結果やブログのアクセスの何れも正しくビッグデータに裏打ちされたサイトの検索エンジンからのアクセスアップの並外れた専…
Bloggerブログで一日千人以上のアクセスを得ているブロガーを何人か見付けて来た。最高では一日数万人くらいまで達成しているので、もしかしたらもっと人気のブロガーもいなくはなさそうだ。 一日十万人近くのアクセスを得る のは不可能ではないと想像してしまう。 僕も頑張れば同じBloggerブログの些細な日常でアクセスアップはきっと大丈夫だと本当に励みになる。そして訪問者が一日千人という羨ましい気持ちからは何が良くて盛り上がるのかを見習いたくもなるよ。 専門性とオリジナリティーが高いと人気だ Two Maltese puppies in the basket by haidi2002 / Pixabay 個人的に耳が痛いし、雑記ブログとは対極的な運営だけど、一つのテーマに特化したBloggerブログが概して一日千人以上のアクセスを得ている越ているようだ。 長文で事細か…
十月下旬で今年も後二ヵ月しかない。辛いのはブログのアクセスが予定通りに伸びるかどうか。年内に一日数百人を達成したい。 Black and white woman by felixheidrich91 / Pixabay 今月に入ってからやっと訪問者が一日百人を越え続けている。Googleでの表示回数が千回を確実に越えていて クリック数が百回を偶に越えている という状況だ。 ブログを開設して十ヵ月で一日百人のアクセスだから平均すれば一ヵ月に十人ずつ増えているわけで、 サイト広告で生活費を稼ぐには一日何千何万のアクセスが必要 なのに何年もかかるのでは伸び率が悪過ぎて死んでしまうんだ――。 人気ブロガーの イケダハヤト や まなしば にはなれないのか。あちこち宣伝して回りながら人々の注目を集めるのは大変で、やっても上手く行くかどうかは本当に難しいし、結局は検索エンジンの検索結果…
昨日からブログのアクセスが急増している。二日連続だから、可成、面白い。上向きがさらに続いて行ってもはや落ちないのではないか。 一日百五十人に近くて Google から一日百人を初めて達成しているのが考え通りの結果だからとても嬉しい。 四ヵ月くらい横這いで苦しんでいただけにブロガーの夜明けみたいだ。 考えてもGoogleから一日百人の訪問者を得るのは難しくないはずだったから呪われているとしかいいようがなかったけれども振り返ってみるとサイト年齢が一年以下では細かいところで嫌われるせいだったんだろう。 何が良かったのかを今此処で認識しておくと将来的にきっともっと助かる。 サイト年齢が上がるとそれだけでブログのGoogleでのサイト評価が上がるはずならば細かいところで取り零しても気付かないかも知れない。 一日千人で頭打ちを被ってしまったらサイト広告で生活費を稼いでもギリギ…