ラベル(HTML)が付いた投稿を表示しています すべて表示

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

イメージ

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

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

イメージ

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

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で変更可能なフォント ページのテキスト(個別に指定されない全て) ブログタイトル(ヘッダー) タブのテキスト(項目のみ) 投稿 投稿タイトルのフォント 投稿タイトル…

Google Fontsの外部ファイルを少しでも速く表示させる方法

イメージ

Google Fonts で日本語のWebフォント( Japanese )が幾つも無料で提供されていて現在は正式版として相当に使い易くなっている。 Google Fontsの日本語フォント 種類が非常に多くて五十二件(2022年2月時点)から二十件のみ掲載する。 Noto Sans Japanese ( 適用 ) Noto Serif Japanese ( 適用 ) Shizuru ( 適用 ) M PLUS Rounded 1c ( 適用 ) Zen Kaku Gothic Antique ( 適用 ) Sawarabi Mincho ( 適用 ) Kosugi Maru ( 適用 ) Kaisei Decol ( 適用 ) Shippori Mincho ( 適用 ) Delta Gothic One ( 適用 ) Reggae One ( 適用 ) Kiwi Maru ( 適用 ) Murecho ( 適用 ) Yusei Magic ( 適用 ) Yuji Sy…

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の影響を受ける機能を使わなければ止めて構わないけれども必要な場合でも最初に止めておいて一部の機能で必要なときだけ読み込…

JavaScriptの正規表現でURLなどの文字列の間の文字列を検出/取得する方法

イメージ

正規表現で文字列の間、一つの部分から他の部分までを指定するには両端を任意で決めて中間をパターンで記載する。 何でも良ければ「.*」(どんな文字でもなければなくてあればあるだけ続く:文字の0以上の繰り返しという指定)が一般的に使える。 例えばサイトや画像などのURLで半角スラッシュ(/)の間を指定するには「/.*/」のように記載する。 参考サイト 正規表現パターンの記述 JavaScriptで使う場合は文字列の半角スラッシュはエスケープしなくてはならないので、正規表現リテラル(/文字列/)ならば半角バックスラッシュを前に一つ追加して「 \/.*\/ 」、それを正規表現オブジェクト(RegExp()コンストラクター)に渡すならば半角バックスラッシュを前に二つ追加して「 \\/.*\\/ 」と書き換えることになる。 Istanbul by Ben_Kerckx / CC0 目…

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

イメージ

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

Bloggerの記事/追加ページの投稿画像にWebPのrwを自動的に付けるプログラム

イメージ

Bloggerで取得した画像URLに 画像パラメーターのrwを追加する と画像データを軽量化したWebP画像に変換することができる。特にjpg/jpeg画像の場合に効果が大きいようだけれどもブログの画像の表示速度を高めることに繋がる。 記事/追加ページの投稿画像に画像パラメーターのrwを自動的に付けるプログラムを開発したので、無料で提供する。 JavaScriptで記事の本文の全ての表示を止めてから投稿画像に画像パラメーターを自動的に付けて出すことになる。便利だけど、その分、投稿画像を含めた記事の本文の全ての表示速度は遅れる、ほんの僅かだとしても投稿時に画像パラメーターを手動で付けておくよりも決して速くならないことに注意して欲しい。 そしてHTMLだけで記事の本文の全てを表示しないことはGoogle検索などの読み込みを劣らせるかも知れないので、 SEO(検索エ…