スキップしてメイン コンテンツに移動
ラベル(マークアップ)が付いた投稿を表示しています すべて表示

HTML Living Standardでのfigure要素やblockquote要素などの付帯情報のマークアップ

イメージ

HTMLの標準仕様が2021年1月29日にW3CのHTML5からWHATWGのHTML Living Standardに変更された。 HTML Living StandardとHTMLの歴史 その流れで、結構、大きな違いというか、個人的にやっていたfigureタグやblockquoteタグへのfooterタグのマークアップが通用しなくなったので、どうすれば良いかを纏めておきたい。 ブラウザがHTML5からHTML Living Standardへ完全に移行するわけではないから従来のままのマークアップでもサイトの表示や構成に直ちに不都合が生じるわけではない。 HTMLの標準仕様がWHATWGのHTML Living Standardになったからこれからは合わせてやって行くべきだけど、しかし以前の対応しないマークアップもなるべくならば合わせてやり直した方が良い…

HTMLのemとstrongとiとbの使い分けについて

イメージ

サイト作成でHTMLのemとstrongはHTML5/Living Standardで強調と重要性の違いがあるもののどちらも使い方が似ていて分かり辛い。そして初期のデザインが斜体と太字なのがそれぞれにiとbと同じなので、見た目からどちらを使っても良いのかと混乱してしまう。 em/強調タグとは何か strong/重要性タグとは何か i/斜体タグとは何か b/太字タグとは何か 紛らわしい四つのタグの意味をしっかり捉えて的確に使い分けができるようにしたい。 em/強調タグとは何か HTMLのemタグのemはemphasis/強調の冒頭の二文字で、コンテンツの強調を表すために使われる。 em要素は、要素のコンテンツの強調を表す。 コンテンツの特定部分が持つ強調のレベルは、祖先のem要素の数によって与えられる。 強調の設置は、文の意味を変更する。このように要素は、コンテンツの不…

Bloggerブログのトップページのスニペットの数が減ってしまったらどうするか

イメージ

Bloggerブログはトップページに表示するスニペットの数は管理画面のメニューから決めることができる。 レイアウト ブログの投稿 メインページに表示する投稿数 設定 投稿 メインペーに掲載する投稿数の上限 ※メインページはブログのトップページ。 二ヵ所から決めることができてどちらも同じで、片方を変更するともう片方が自動的に揃うようになっている。 しかしブログのトップページに実際に表示されるスニペットの数が決めたよりも減ってしまうことがあり、正常に動作せず、不具合が生じたような結果になると分かっているから予め注意して決めなくてはならない。 トップページのスニペットの数が減る二つの原因 元の記事の画像数が非常に多い場合 元の記事の文字数が非常に多い場合 Bloggerブログのトップページに表示するスニペットが取られる元の記事の合計の画像数か文字数が一定の分量を越えるとその時点で…

JavaScriptのクイズの選択ボタンのプログラム

イメージ

ブログの知識と教養と雑学の記事( 前半 ・ 後半 )で使用したクイズ形式の選択ボタンのJavaScriptによるプログラムを提供する。HTML編集が可能で、scriptタグが反映するサイトならば同じような選択ボタンのコンテンツを作成して使用できる。 選択ボタンの基本的なプログラム サンプルのソースコード 日本の首都はどこか。 北海道 東京都 福岡県 リセット ※どれかを押すと正解が緑に、誤解が赤に変わって表示される。 HTML <p>日本の首都はどこか。</p> <ol class="selection"> <li>北海道</li> <li class="correct">東京都</li> <li>福岡県</li> </o…

Bloggerでアナリティクスのソースコードをブログに記載する方法

イメージ

Bloggerは管理画面の「Google アナリティクス プロパティ ID」からアナリティクスで設定済みのIDだけ入力すれば対応するテンプレートでアナリティクスを使うことができる。 便利だけど、ところが来年の7月1日からアナリティクスの従来のUAで始まるIDのユニバーサルアナリティクスのデータが止まってしまうので、次のGで始まるIDのGoogleアナリティクス4/GA4を新しく登録しなくてはならない。 参考サイト ユニバーサル アナリティクスのサポートは終了します Bloggerの管理画面の「Google アナリティクス プロパティ ID」から登録できなくて暫く様子を見ても変わらないので、カスタマイズでアナリティクスのソースコードをブログに記載する方法について取り上げることにする。 後からGA4に対応されたら基本的に必要なくなるけど、しかしアナリティクスのソ…

CSSのグリッドレイアウトのfrと%の違い

イメージ

display:gridでセルの配置を決めるgrid-template-columns(列)やgrid-template-rows(行)の値のfrと%はどちらもグリッドレイアウトの全体の中の割合(占有率)を示すから同じではないかと思うけれども少し違っていて使い方を誤るとデザインが崩れる場合もあるから注意しなくてはならない。 グリッドレイアウトのfrの単位の特徴 トラックを分け合って隙間を全体に収める。 二つのトラックを半文字分の隙間で均等に分ける セル(横幅:トラック合わせ) セル(横幅:トラック合わせ) HTML <div class="grid-layout"> <div class="cell pink">セル(横幅:トラック合わせ)</div> <div class=&qu…

画像のimgタグのsrcset属性によるレスポンシブ配信

イメージ

サイトの画像をデバイス毎に振り分けてレスポンシブに表示するにはimgタグにsrcset属性でそれぞれの画像URLを設定するのが簡単だ。 Person sitting on top of gray rock overlooking mountain during daytime by Denys Nevozhai on Unsplash 目次 imgタグのsrcset属性のマークアップ 画像を画面幅で切り替える場合 画像を解像度で切り替える場合 srcset属性の画像のレスポンシブ配信の内容 画像は画面幅と解像度を加味して表示される 画面幅で画像を確実に振り分ける方法 srcset属性の幅記述子の省略は画像選択に影響し得る sizes属性のレスポンシブ配信の役割 imgタグのsrcset属性のマークアップ imgタグはそのままで、srcset属性を特定の仕方で値を付けて追加…

サイトの画像を高解像度ディスプレイに対応させてパフォーマンスを上げる

イメージ

ブログをサイトのパフォーマンスをチェックする Measure page quality にかけたらBest PracticesのUser ExperienceのServes images with low resolutionの警告が出たから何なのかと調べて修正した。 Serves images with low resolutionとは何か Best Practices|Measure page quality 画像を低解像度で配信しているのが良くない。 画像の原寸法は表示サイズと画像を最大に明瞭化するピクセル比へ成形されなくてはならない。 原文 Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image cla…

Bloggerブログでフォントを変更する方法

イメージ

Bloggerでのフォントの変更はテーマデザイナーかテンプレートのソースコードの編集で行う。何れも管理画面のテーマに入り、前者はカスタマイズ、後者はメニュー(▼)のHTMLを編集かバックアップと元に戻すで可能だ。 目次 ガジェットのフォントの変更 英数字のフォントのカスタマイズ CSSによるフォントの変更 ソースコードの指定先について Variableタグから変更する Webフォントを導入する ガジェットのフォントの変更 テーマデザイナー|Blogger Bloggerのテーマデザイナーの詳細設定でブログのガジェットのフォントを変えることができる。 テンプレートによって項目の種類や数は変わる。 公式テーマのContempoで変更可能なフォント ページのテキスト(個別に指定されない全て) ブログタイトル(ヘッダー) タブのテキスト(項目のみ) 投稿 投稿タイトルのフォント 投稿タイトル…

BloggerのHTML編集でエラーを起こさないための注意点

イメージ

Bloggerは非常に古いWebサービスのせいか、ブログのテンプレートのファイルがXMLだから独自タグによる基本構造を踏まえてHTMLで編集可能な場所を選んでも普通のマークアップではエラーになってサーバーに保存できなくなるかも知れない。 Woman climbing a ladder by Vinicius Altava / CC0 カスタマイズでhead内に WebフォントのGoogle Fonts をlinkタグで読み込む場合を例として起こり易いエラーと修正法を掲載する。 XMLファイルでありがちな三つのエラー HTML要素の終了タグがない HTML要素の属性の値がない 一部の予約語が含まれている BloggerでGoogle Fontsのlinkタグを使う場合は管理画面のHTML編集かバックアップと元に戻すでテンプレートのソースコードのhead内などに記載する…

Bloggerのウィジェット用JavaScriptを止めて影響を受ける機能を必要なときに使う方法

イメージ

Bloggerは 世界で最も利用者が多いと共に非常に古いブログサービス で、常に改良されるけれども機能的に無駄な部分が残されていて今最も悲しいのがウィジェット用JavaScriptの外部ファイルとソースコードなんだ。 それ自体が重いどころか多くの機能が一つになっていてそうした標準のプログラムが必要なウィジェットなどを使ってなくても全てのブログにサーバーから自動的に記載されている。 ブログの表示速度などのパフォーマンスを考えると止めるのが最善ながら幾つかの重要な機能が使えなくなるのが悩ましい。しかし後から読み込む方法が全くないわけではない。初回画面を遅らせないことはブログのパフォーマンスでは最も重要だと思う。 ウィジェット用JavaScriptの影響を受ける機能を使わなければ止めて構わないけれども必要な場合でも最初に止めておいて一部の機能で必要なときだけ読み込…

TwitterとInstagramとYouTubeの埋め込みを少しでも速く表示させる方法

イメージ

TwitterとInstagramとYouTubeには他のサイトにコンテンツを埋め込んで表示する機能があってとても便利だけれども他のサイトからすると外部ファイルやサイトを読み込まなくてはならないから表示するのに普通よりも時間がかかってしまう。 通常ではさほど気にならないかも知れないにせよ、サイトによってファイルの読み込みやコンテンツの表示の仕方からで非常に遅れることもないわけではない。 サイトで外部ファイルを優先的に読み込む方法として HTMLのリソースヒントの一つとしてpreload(先読み)のソースコードがある ので、TwitterとInstagramとYouTubeの埋め込みを少しでも表示したい場合に使える。 目次 Twitterの埋め込みコードを先読みする Twitterの埋め込みコードの外部ファイル Twitter用の二種類の先読みのソースコード Inst…

BloggerのVariableタグのstringの内容と公式テーマの変数名

イメージ

Bloggerの独自タグのVariableのstringのtypeについてどのように使われるかの内容と公式テーマのソースコードでurlの内容の定義と呼び出しに用いられる変数名を取り上げる。 Variableタグの五つの基本項目 name/変数名(半角の英数字とピリオドのみ) description/説明(指定なし) type/種別(決められたもの) default/初期値(type毎に指定あり) value/現在値(type毎に指定あり) stringのtypeではvalue以外が省略できない必須項目となっている。 stringのマークアップ例 <Variable name="widget.title.text.transform" description="Widget Title Text Transform" ty…

iframeの縦横比を一発でレスポンシブに指定できるaspect-ratio

イメージ

サイトで他のページを表示するiframeタグはYouTubeの埋め込み動画などで良く使われるけれども画像のimgタグと異なり、コンテンツの縦横比をレスポンシブで維持することができない。なのでデバイスの画面幅に一杯で表示するようにすると訪問者の異なるデバイスの画面幅によってコンテンツの縦横比が変わってしまうのが厄介だった。 以前からCSSのaspect-ratio要素がiframeの縦横比を一発で指定する方法として出ていて理想的だったけれども対応するブラウザが少なかった。しかし最近になって漸く主要なブラウザの多くが対応するようになった( Can I Use )からついに自分のブログでも取り入れることに決めた。 aspect-ratioのマークアップ 10 modern layouts in 1 line of CSS|Google Chrome Develop…

BloggerのVariableタグのlengthの内容と公式テーマの変数名

イメージ

Bloggerの独自タグのVariableのlengthのtypeについてどのように使われるかの内容と公式テーマのソースコードでlengthの内容の定義と呼び出しに用いられる変数名を取り上げる。 Variableタグの五つの基本項目 name/変数名(半角の英数字とピリオドのみ) description/説明(指定なし) type/種別(決められたもの) default/初期値(type毎に指定あり) value/現在値(type毎に指定あり) lengthのvalue以外が省略できない必須項目となっている。 lengthのマークアップ例 <Variable name="body.background.height" description="Background height" type="length&qu…