些細な日常
一般サイト向けの目次の自動生成のJavaScriptプログラムを公開してBloggerブログでも使えるので、どうすれば実装できるかを説明する。 JavaScriptでコンテンツの目次を自動生成して表示するプログラム どのような目次なのかやデザインや機能のカスタマイズについては一般サイト向けの記事を参考にして欲しい。 僕が提供するBlogger用のImaginaryテーマは サンプルブログの自動生成の目次のカスタマイズの記事 に専用のソースコードと実装方法を紹介している。 目次の自動生成のプログラムのソースコード ブログのテンプレートか投稿にscriptで、プログラムのソースコードを記載して使う。 /* Copyright: Nagahito Yuki 2023 | https://www.nagahitoyuki.com/2023/03/implement-a-…
Bloggerは管理画面の「Google アナリティクス プロパティ ID」からアナリティクスで設定済みのIDだけ入力すれば対応するテンプレートでアナリティクスを使うことができる。 便利だけど、ところが来年の7月1日からアナリティクスの従来のUAで始まるIDのユニバーサルアナリティクスのデータが止まってしまうので、次のGで始まるIDのGoogleアナリティクス4／GA4を新しく登録しなくてはならない。 参考サイト ユニバーサル アナリティクスのサポートは終了します Bloggerの管理画面の「Google アナリティクス プロパティ ID」から登録できなくて暫く様子を見ても変わらないので、カスタマイズでアナリティクスのソースコードをブログに記載する方法について取り上げることにする。 後からGA4に対応されたら基本的に必要なくなるけど、しかしアナリティクスのソ…
Bloggerでのフォントの変更はテーマデザイナーかテンプレートのソースコードの編集で行う。何れも管理画面のテーマに入り、前者はカスタマイズ、後者はメニュー（▼）のHTMLを編集かバックアップと元に戻すで可能だ。 目次 ガジェットのフォントの変更 英数字のフォントのカスタマイズ CSSによるフォントの変更 ソースコードの指定先について Variableタグから変更する Webフォントを導入する ガジェットのフォントの変更 テーマデザイナー｜ Blogger Bloggerのテーマデザイナーの詳細設定でブログのガジェットのフォントを変えることができる。 テンプレートによって項目の種類や数は変わる。 公式テーマのContempoで変更可能なフォント ページのテキスト（個別に指定されない全て） ブログタイトル（ヘッダー） タブのテキスト（項目のみ） 投稿 投稿タイトルのフォント 投稿タイトル…
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は非常に古いWebサービスのせいか、ブログのテンプレートのファイルがXMLだから独自タグによる基本構造を踏まえてHTMLで編集可能な場所を選んでも普通のマークアップではエラーになってサーバーに保存できなくなるかも知れない。 Woman climbing a ladder by Vinicius Altava / Pexels カスタマイズでhead内に WebフォントのGoogle Fonts をlinkタグで読み込む場合を例として起こり易いエラーと修正法を掲載する。 XMLファイルでありがちな三つのエラー HTML要素の終了タグがない HTML要素の属性の値がない 一部の予約語が含まれている BloggerでGoogle Fontsのlinkタグを使う場合は管理画面のHTML編集かバックアップと元に戻すでテンプレートのソースコードのhead内などに記…
TwitterとInstagramとYouTubeには他のサイトにコンテンツを埋め込んで表示する機能があってとても便利だけれども他のサイトからすると外部ファイルやサイトを読み込まなくてはならないから表示するのに普通よりも時間がかかってしまう。 通常ではさほど気にならないかも知れないにせよ、サイトによってファイルの読み込みやコンテンツの表示の仕方からで非常に遅れることもないわけではない。 サイトで外部ファイルを優先的に読み込む方法として HTMLのリソースヒントの一つとしてpreload（先読み）のソースコードがある ので、TwitterとInstagramとYouTubeの埋め込みを少しでも表示したい場合に使える。 目次 Twitterの埋め込みコードを先読みする Twitterの埋め込みコードの外部ファイル Twitter用の二種類の先読みのソースコード Inst…
Search Consoleに送信して何の問題もなく、使用できたはずの Tumblrブログのサイトマップ が突如としてエラーと除外されてしまっていた。 サイトマップ｜Search Console｜ Google 送信することは可能だけれども「検出されたURLの合計数」が０で、全く機能しない。「インデックスカバレッジを表示」は開けない。そして警告の赤いマークと共に「サイトマップ インデックスは読み取り可能ですが、エラーがあります」と表示される。原因は「誤ったネームスペース」とされて「サイトマップまたはサイトマップ インデックス ファイルのネームスペース宣言が不適切です」という内容に「sitemapindex」が挙げられる。 追記：2023年3月に確認すると元に戻っていて修正する必要はなくなった。 どうしてエラーになるのかは分からない Tumblrのサイトマップはサー…
サイトに 自由に描画できるインラインSVG は便利で、しかも画質に優れるからサイト作成ではとても役立つと感じる。 インラインSVGをホームページやブログのデザインに取り入れる際には通常のHTMLとは扱いが異なる部分があるので、混乱しないように幾つか取り上げてどのようなマークアップが特徴的に可能かを覚えておきたい。 目次 インラインSVGの特徴的なマークアップ リンクの付け方について 題名の付け方について 説明文の付け方について ランドマークの付け方について ラベルの付け方について 視覚障害者のサイトの利便性のために インラインSVGの特徴的なマークアップ 狐 狐が地面に身を丸めて眠っている Fuchs by Schmidsi / Pixabay リンクの付け方について <a href="リンク先">リンク名</a> 通常のimgタグの画像に…
Bloggerでブログのテンプレートは大きく分けて公式テーマと非公式テーマの二種類を使うことができる。動作の仕組みは全く同じで、テンプレートとして根本的に違うものではないけれどもBloggerの管理画面からブログに取り付ける方法が異なる。どう使うか、新しいテンプレートへ変更する方法をBloggerの公式テーマと非公式テーマの二種類に分けて示す。 Bloggerの管理画面で新旧の二つのヴァージョンが使用可能で、新ヴァージョンから旧ヴァージョンへは左上のメニュー（≡）の下段の「以前のBloggerに戻す」のリンク、旧ヴァージョンから新ヴァージョンへは左側のメニューの下段の「新しいBloggerを試す」のボタンを押すと切り替えられる。 公式テーマを新しく使うときの手順 ウェブでBloggerのサイトからログインして管理画面を開く。 新ヴァージョンの管理画面の場合 …
JavaScriptのプログラミングでサーバーを介したデータの受け渡し：Ajax通信を行う仕組みの一つに Fetch API がある。オブジェクトに最初からウェブの送受信の時間差の難点を克服する Promise を想定して使えるのが特徴で、旧来の XMLHttpRequest API と比べて便利に刷新された機能を有する。 しかし取得するデータが Document インターフェースに属さないのがちょっと使い辛い。 例えばfetch()メソッドでhtmlファイルのデータをtextで受け取ってもそこからHTMLを操作するのはUSVStringだから合わなくて全く不可能なのが厄介みたいな場合が出て来る。 Fetch APIはデータに特化して読み書きに純粋に注力するべく考案されているのか、少なくともhtmlファイルなどを一つのDOMツリーとして種々と操作するには却って旧来のXM…
Bloggerのウェブの記事／追加ページの投稿（編集）のHTMLモードはページのHTMLを扱える機能だ。HTMLとはHyperText Markup Language（ハイパーテキストマークアップランゲージ：超越文書記述言語）の頭文字四つで、ブログなどのウェブサイトをブラウザに表示するために使われるものなんだ。ブログの記事の投稿でも使ってページをどのように構成するかを個別にカスタマイズできるようにするのがHTMLモードの最大の特徴になる。 追記：2020年9月から投稿画面が変わり、投稿モードはメニューの左端の項目で「HTMLビュー」と「作成ビュー」と呼ばれて区別されるようになった。 投稿のHTMLモードの入力画面｜ Blogger 通常の作成モードはプレーンテキストで入力可能で、何でも書き込んだまま、ブログに表示される。さらに入力画面にコンテンツやデザイン…