些細な日常

htmlのsvgタグを使うとサイトに描画できる。色も塗れるし、線や丸や四角や三角や弧を繋げて簡単なアイコンから非常に複雑な絵まで作成できる。マークアップは座標系の数値を入力して行われる。 svgはScalable Vect Graphics（スケーラブルベクターグラフィックス）の略語で、画像データを格納するファイル形式の一つなんだ。たとえ拡大縮小しても他の一般的なjpgやpngやgifの画像のように画質が変わらない特徴を持っている。サイトではアイコンに使われる場合が多い。画像のサイズが小さくても劣化しないし、輪郭も崩れないから見映えに相当に優れる。 サイトにsvgファイルの画像を表示するにはimgタグで<img src="画像URL">とマークアップするけど、しかしもう一つの方法としてsvgタグでも可能なんだ。 画像データを、直接、マークアップする。sv…

ブログの記事／追加ページの本文の右下にフローティングの戻るボタンを付けた。 当初、方法は分かったけれども画面のスクロールからアドセンスのサイト広告に重なるとポリシー違反の恐れがあるので、用心してやらなかったんだ。 ところが記事／追加ページの本文のところだけとかアドセンスのサイト広告を避けられるブログの一定の範囲内に表示すれば大丈夫だと気付いてcssのpositionのstickyを使って試したら上手く行った。Pineapple floating in water by Pineapple Supply Co. [CC0], via Pexels stickyは画面のスクロールに応じてコンテンツを固定できる cssのpositionで同じような値にfixedがある。どんな場合でも画面にコンテンツを固定する。使うと、常時、フローティングで表示されるデザインになる。 stickyはfixed…

構造化データにkeywordsを追加してSEO（検索エンジン最適化）対策に効果的かどうかは定かではない。 かつてmetaタグのkeywordsにサイト内容と無関係なキーワードを記載したサイトによって検索結果が混乱したという経緯からGoogleなどの主要な検索エンジンはサイトのmetaタグのkeywordsを完全に読み込まなくなってしまっているんだ。 SEO対策でサイト内容の他にキーワードを検索エンジンに伝えるように取り計らっても仕様がないかも知れないけれども何かの役に立たないともかぎらないから構造化データのkeywordsを使ってみたいと感じる。 metaタグのkeywordsは間違いなく無理だし、使ってもSEO効果は皆無にせよ、構造化データのkeywordsは同じではない。ひょっとしたらGoogleなどの主要な検索エンジンがサイト内容に読み込むか、またはサイト評価に多少とも加味する可…

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableは記事毎にJSON-LDの構造化データが付いていてGoogleなどの検索エンジンがサイト内容を通常よりも認識し易くなっている。 ブログのテンプレートのソースコードからマークアップを確認してみるとpublisher（公開主）がBloggerになっていてさらに画像なしの場合の画像にBloggerのロゴが記載されるのもちょっと気がかりなんだ。 Bloggerを使っているから間違いではないにせよ、ブログ自体には一致してないわけで、どちらもブログ自体に合わせてカスタマイズしたいと感じてしまう。A man who began doing parkour cartwheel on the grass by farioff [CC0], via Pixabay 検索エンジンからのアクセスアップのSEO（検…

ボタンで複数の画像を切り替える方法をやってみたら二枚目以降の画像の読み込みが遅くて参った。何とかならないかと調べてみたらhtmlの「rel="preload"」を使うと助かると分かった。ファイル毎のブラウザの先読みを可能にするからJavaScriptで後から必要な画像などが直ぐに表示できるようになるんだ。二枚目へ進む 二枚目の画像にpreloadを指定していて非表示でもサイトの閲覧と同時にブラウザに読み込まれるためにJavaScriptの切り替えボタンから待ち時間なしに表示される。 preloadに対応する十二のファイルaudio：音楽video：動画track：字幕script：JavaScriptstylesheet：cssfont：フォントimage：画像fetch crossorigin：XHR／fetchworker：Worker／SharedWorkerem…

サイトのボタンは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-image="二枚目の…

htmlのマークアップをJavaScriptのプログラミングで書き換える、またはサイトのソースコードを置き換えるにはinnerHTMLが良く使われる。 Element.innerHTML プロパティは、要素の子孫を記述する HTML 構文を設定または取得します。 element.innerHTML via MDN innerHTMLはElementインターフェースのDOMString（文字列）型のプロパティで、サイト上の要素内容のマークアップを表す。 JavaScriptでは他にも似たようなプロパティのinnerTextやtextContentがあって――どちらもNodeインターフェースのDOMString型に含まれる――プレーンテキスト（htmlタグなどのマークアップ言語を含まない）を設定取得できる。双方にはcssで非表示のコンテンツを知覚するかしないなどの細かい違いがあるけれども機…

僕がBloggerのテンプレートで最も不可解だと感じるのは記事の日付に記事ページへのリンクが付いている。およそ日付にリンクを付けるならば年別や月別などのアーカイブページへ向けなくてはピンと来ないだろう。 日付のリンクは目立たないし、殆ど誰も使わないようだから放っておいたけど――文字色などのデザインがリンクとは気付かないくらい他と変わらない――ただしSEO対策からすると検索エンジンが見ているのは間違いないので、アクセスアップのためにサイト評価を上げるべくは記事ページへのリンクを記事タイトルに付けて日付からはアーカイブページへ変更するのが望ましいと考える。 リンク名のアンカーテキストとリンク先のサイト内容が合ってないのは不正行為と判断される危険性を免れない。あからさまに無関係なリンクを貼れば使った訪問者から騙したともはや嫌われ兼ねないわけで、SEO対策でも検索エンジンでのサイト評価を下げる…

Dateクラスのコンストラクタ関数を使うとDateインスタンスを素早く生成できる。An Owl on a tree branch by Lepale [CC0], via Pixabay 四つの構文と使用可能なオブジェクト DateオブジェクトはUTC／協定世界時の1970年1月1日0時0分0秒（UNIXエポック）から始まるミリ秒までの時刻値を基準として持っている。new Date() 無名コンストラクタ：現在のシステム内の日付と時刻new Date(value) value：UNIX時刻（UNIXエポックからの経過秒）new Date("dateString") dateString：IETF準拠のRFC2822の日時指定とISO8601の拡張形式
ブラウザや書式によって誤差が生じ得るnew Date(year, monthIndex, day, hours, mi…

Bloggerの投稿の日付の時刻のフォーマットはデフォルトで七種類が用意されているけれどもhtml編集のカスタマイズで年月日と曜日を並び替えて他のスタイルでも表示できる。Powdery snowfield by cocoparisienne [CC0], via Pixabay目次公開日の年月日と曜日を並び替えるソースコードタイムゾーンなしの公開日の時刻のフォーマット更新日の年月日と曜日を並び替えるソースコード旧テーマの更新日のJavaScriptでのカスタマイズタイムゾーンなしの更新日の時刻のフォーマット新テーマのテンプレートへの記載の仕方公開日の時刻のフォーマットの場合更新日の時刻のフォーマットの場合旧テーマのテンプレートへの記載の仕方公開日の時刻のフォーマットの場合更新日の時刻のフォーマットの場合公開日の年月日と曜日を並び替えるソースコード<data:post.date.ye…