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

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に対応されたら基本的に必要なくなるけど、しかしアナリティクスのソ…

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の記事/追加ページの投稿画像にWebPのrwを自動的に付けるプログラム

イメージ

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

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

イメージ

以前、取り上げた 画像の遅延読み込みのloading-lazy をBloggerの記事/追加ページの投稿画像に自動的に付けるJavaScriptプログラムを開発したので、無料で提供する。 画像のある記事/追加ページの本文を全てJavaScriptで止めてから書き出すことになるので、その分だけ表示速度が遅れる。そしてHTMLだけの場合と比べてGoogle検索などの読み取りが全く劣らないとはかぎらない。年々、向上して今では殆ど差がないといわれるから大丈夫かも知れないけれども念のために注意しておきたい。デザインは変わらず、表示速度が速くなる分は有利(画面外の画像が多いほどに遅延読み込みの効果が大きい)だとしてもGoogle検索などからサイト評価が上がって訪問者が増えるかどうかは分からないので、ブログのアクセスアップに SEO(検索エンジン最適化)対策を考える場合 …

Bloggerの管理画面のレイアウトのカスタマイズについて

イメージ

BloggerのテンプレートのCSSでbodyのセレクターに#layoutを使用すると管理画面のレイアウトに表示されるガジェットのデザインをカスタマイズして付けることができる。 目次 body#layout:管理画面のレイアウトへの指定 背景色のサンプルのソースコード CSSのカスタマイズに適した領域 ガジェットのデザインのためのセレクター 公式テーマのガジェットの主なセレクター ガジェットの位置取りを変えるためのヒント 公式テーマのセクションの親ボックスの主なセレクター 位置取りのサンプルのソースコード レイアウト用のCSSをブログから除外する方法 body#layout:管理画面のレイアウトへの指定 BloggerのテンプレートのCSSは管理画面のテーマのカスタマイズのの詳細設定の「CSSを追加」やメニュー(▼)の「HTML編集」か「元に戻す」(テンプレートのXMLフ…

BloggerのTwitterカードの手早い表示方法

イメージ

Twitter にサイトのURLを投稿した場合にタイトルや説明文や画像などが自動的に追加される Twitterカード はサイトの設定が必要で、以前、 一般的な方法 と Blogger用の方法 を取り上げたんだ。 Bloggerについては公式テーマならば初期値のOPG設定( Facebook でのURL投稿のカード表示)と結び付けるのがTwitterカードを表示するための簡単な仕方なんだけれども最近はブログのソースコードに一行を追加するだけでも大丈夫に変わったから改めて取り上げておきたい。 以前は画像なしのページがエラーで止まってしまうために一行を追加するだけという手早い表示方法は可能でもちょっと使い辛かったんだ。 BloggerのTwitterカードの一行追加の手順 ブログのソースコードの編集 Twitterカードの実装の検証 ブログのソースコードの編集 テーマ|Blogger B…

BloggerブログでYouTube動画の埋め込みをレスポンシブに表示するCSSコーディング

イメージ

YouTube 動画の埋め込みコードにはHTMLのiframeタグが使われていてデバイスの画面毎にレスポンシブ対応でデザインを揃えるのが難しい。特にモバイルのスマホやタブレットで画面の横幅一杯に表示する場合に埋め込み動画の縦幅を一定の割合で維持できず、画像比が崩れる。写真などに使われるimgタグのようにコンテンツの画像比がiframeタグでは固定されないんだ。 デザインのCSS のコーディングで解決できて僕としては CSS関数のcalc()を使って iframeタグの画像比を計算して表示するのがスムーズだとブログの些細な日常でも取り入れている。 Bloggerブログでどうやるか、何よりもデバイスの画面毎のデザインの振り分けが必要だけど、しかしBloggerでのYouTube動画の埋め込みは只単にYouTubeから得られる埋め込みコードを一般的に使うだけではなく…

BloggerブログでIntersection Observerの画像の遅延読み込みをかけるカスタマイズ

イメージ

サイトの表示速度を上げるために画面に入らなくてまだ表示される必要のない画像を画面に入って表示される段階で初めてブラウザに読み込ませるという画像の遅延読み込みの方法がある。 個人的に訪問者だけではなくて検索エンジンにも画像が把握できて検索結果へのサイト評価のSEO対策(検索できる最適化)にも有効と考えられるGooglも推奨する JavaScriptのIntersection Observerを使ったサイト作成 を気に入ってブログに実装している。 追記:サイトの画像の遅延読み込みは HTMLのloading属性で簡単に行える ようになった。JavaScriptのIntersection observerも同じように使えるけど、サイトのプログラムで望み通りに動作させる以外の目的ではHTMLよりもコードを増やしてしまうので、むしろ画像以外のコンテンツの遅延読み込み…