HTMLのsvgタグを使うとサイトに描画できる。色も塗れるし、線や丸や四角や三角や弧を繋げて簡単なアイコンから非常に複雑な絵まで作成できる。マークアップは座標系の数値を入力して行われる。 SVGはScalable Vect Graphics（スケーラブルベクターグラフィックス）の略語で、画像データを格納するファイル形式の一つなんだ。たとえ拡大縮小しても他の 一般的なjpgやpngやgifの画像 のように画質が変わらない特徴を持っている。サイトではアイコンに使われる場合が多い。画像のサイズが小さくても劣化しないし、輪郭も崩れないから見映えに相当に優れる。 サイトにSVGファイルの画像を表示するにはimgタグで <img src="画像URL"> とマークアップするけど、しかしもう一つの方法としてsvgタグでも可能なんだ。 画像データ…
ブログの記事／追加ページの本文の右下に フローティングの戻るボタン を付けた。 当初、方法は分かったけれども画面のスクロールからアドセンスのサイト広告に重なるとポリシー違反の恐れがあるので、用心してやらなかったんだ。 ところが記事／追加ページの本文のところだけとかアドセンスのサイト広告を避けられるブログの一定の範囲内に表示すれば大丈夫だと気付いてCSSのpositionのstickyを使って試したら上手く行った。 stickyは画面のスクロールに応じてコンテンツを固定できる Pineapple floating in water by Pineapple Supply Co. [ CC0 ], via Pexels CSSのpositionで同じような値に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 検索…
ボタンで複数の画像を切り替える方法 をやってみたら二枚目以降の画像の読み込みが遅くて参った。何とかならないかと調べてみたらHTMLの「rel="preload"」を使うと助かると分かった。ファイル毎のブラウザの先読みを可能にするからJavaScriptで後から必要な画像などが直ぐに表示できるようになるんだ。 二枚目へ進む 二枚目の画像にpreloadを指定していて非表示でもサイトの閲覧と同時にブラウザに読み込まれるためにJavaScriptの切り替えボタンから待ち時間なしに表示される。 preloadに対応する十二のファイル audio：音楽 video：動画 track：字幕 script：JavaScript stylesheet：CSS font：フォント image：画像 fetch crossorigin：XHR／fetch worker：W…
サイトのボタンは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-sec…
HTMLのマークアップをJavaScriptのプログラミングで書き換える、またはサイトのソースコードを置き換えるには innerHTML が良く使われる。 Element.innerHTML プロパティは、要素の子孫を記述する HTML 構文を設定または取得します。 element.innerHTML via MDN innerHTMLはElementインターフェースのDOMString（文字列）型のプロパティで、サイト上の要素内容のマークアップを表す。 JavaScriptでは他にも似たようなプロパティの innerText や textContent があって――どちらもNodeインターフェースのDOMString型に含まれる――プレーンテキスト（HTMLなどのマークアップ言語を含まない）を設定取得できる。双方にはCSSで非表示のコンテンツを知覚するかしないなどの…
僕がBloggerのテンプレートで最も不可解だと感じるのは記事の日付に記事ページへのリンクが付いている。およそ日付にリンクを付けるならば年別や月別などのアーカイブページへ向けなくてはピンと来ないだろう。 日付のリンクは目立たないし、殆ど誰も使わないようだから放っておいたけど――文字色などのデザインがリンクとは気付かないくらい他と変わらない――ただしSEO対策からすると検索エンジンが見ているのは間違いないので、アクセスアップのためにサイト評価を上げるべくは記事ページへのリンクを記事タイトルに付けて日付からはアーカイブページへ変更するのが望ましいと考える。 リンク名のアンカーテキストとリンク先のサイト内容が合ってないのは不正行為と判断される危険性を免れない。あからさまに無関係なリンクを貼れば使った訪問者から騙したともはや嫌われ兼ねないわけで、SEO対…
Bloggerの投稿の日付の時刻のフォーマットはデフォルトで七種類が用意されているけれどもHTML編集のカスタマイズで年月日と曜日を並び替えて他のスタイルでも表示できる。 Powdery snowfield by cocoparisienne [ CC0 ], via Pixabay 目次 公開日の年月日と曜日を並び替えるソースコード タイムゾーンなしの公開日の時刻のフォーマット 更新日の年月日と曜日を並び替えるソースコード 旧テーマの更新日のJavaScriptでのカスタマイズ タイムゾーンなしの更新日の時刻のフォーマット 新テーマのテンプレートへの記載の仕方 公開日の時刻のフォーマットの場合 更新日の時刻のフォーマットの場合 旧テーマのテンプレートへの記載の仕方 公開日の時刻のフォーマットの場合 更新日の時刻のフォーマットの場合 公開日の年月日と曜日を並び替えるソースコード …