些細な日常
Bloggerに非常に素晴らしい機能が追加された。投稿のWebP画像の提供が管理画面の設定から簡単に使えるようになった。画像ありの記事の表示速度の高速化に繋がって快適さが増す。 設定｜ Blogger 僕は自分のプログラムで、以前から 投稿のWebP画像の提供を自動化 していた。Bloggerの公式のものが完璧ならば余計なプログラムは外したいと思って調べた。すると欠点があることが分かって取り替えることは止めた。記事の表示速度を遅くするという逆効果を与えるものなので、できるかぎり、避けて使うようにした方が良いと思う。 関連ページ Bloggerの投稿画像の遅延読み込みの設定の利点と欠点 BloggerのWebP画像の提供の設定 Bloggerの管理画面の設定の投稿に「WebP画像の提供」のスイッチが付いている。 WebP を使用して投稿の画像を提供します 設定｜Blogger 記事／追加ページの画像ファイルが軽量…
Bloggerに非常に素晴らしい機能が追加された。投稿画像の遅延読み込みが管理画面の設定から簡単に使えるようになった。画像ありの記事の表示速度の高速化に繋がって快適さが増す。 設定｜ Blogger 僕は自分のプログラムで、以前から 投稿画像の遅延読み込みの自動化 を行っていた。Bloggerの公式のものが完璧ならば余計なプログラムは外したいと思って調べた。すると少し欠点があることが分かって取り替えることは止めた。酷くて必ず避けなくてはならないようなものではないけれども使う場合は気に留めた方が良いと思う。 関連ページ Bloggerの投稿のWebP画像の提供の設定の利点と欠点 Bloggerの画像の遅延読み込みの設定 Bloggerの管理画面の設定の投稿に「画像の遅延読み込み」のスイッチが付いている。 ユーザーがページを下にスクロールするタイミングに合わせて、画像を個々に読み込みます 設定｜Blogger 記事…
一般サイト向けの目次の自動生成のJavaScriptプログラムを公開してBloggerブログでも使えるので、どうすれば実装できるかを説明する。 JavaScriptでコンテンツの目次を自動生成して表示するプログラム どのような目次なのかやデザインや機能のカスタマイズについては一般サイト向けの記事を参考にして欲しい。 僕が提供するBlogger用のImaginaryテーマは サンプルブログの自動生成の目次のカスタマイズの記事 に専用のソースコードと実装方法を紹介している。 目次の自動生成のプログラムのソースコード ブログのテンプレートか投稿にscriptで、プログラムのソースコードを記載して使う。 /* Copyright: Nagahito Yuki 2023 | https://www.nagahitoyuki.com/2023/03/implement-a-javascript-program-t…
Bloggerブログはトップページに表示するスニペットの数は管理画面のメニューから決めることができる。 レイアウト ブログの投稿 メインページに表示する投稿数 設定 投稿 メインペーに掲載する投稿数の上限 ※メインページはブログのトップページ。 二ヵ所から決めることができてどちらも同じで、片方を変更するともう片方が自動的に揃うようになっている。 しかしブログのトップページに実際に表示されるスニペットの数が決めたよりも減ってしまうことがあり、正常に動作せず、不具合が生じたような結果になると分かっているから予め注意して決めなくてはならない。 トップページのスニペットの数が減る二つの原因 元の記事の画像数が非常に多い場合 元の記事の文字数が非常に多い場合 Bloggerブログのトップページに表示するスニペットが取られる元の記事の合計の画像数か文字数が一定の分量を越えるとその時点で実際にスニペットを表示する動作が止まるた…
Bloggerの投稿のURLはドメインと投稿の年と月とファイル名が半角スラッシュ（/）で区切られたものになる。 例えばドメインが「example.blogspot.com」、投稿の年が「2022」、月が「4」、ファイル名が「blog」ならば投稿のURLは（https://）「example.blogspot.com/2022/04/blog」（.html）になる。 投稿の月は一桁の場合のみ先に「0」が追加されて二桁に変更される。 ファイル名の生成 Bloggerの投稿のURLのファイル名は何もしないと投稿のタイトルの半角英数字が使われて半角英字の大文字は小文字に変更されて半角ハイフン（-）があれば使われて半角スペース（ ）があれば半角ハイフンに置き換えられる。 タイトルに半角英数字がない場合は自動的に「blog-post」、同日に既に他の投稿があれば末尾に半角アンダーバー（_）と半角数字が追加され…
Bloggerの 2017年の新テーマ から導入されているメニューや検索や共有などのSVGアイコンは全てのBloggerブログに追加されたSVGファイルから取得されている。 ブログアドレス/responsive/sprite_v1_6.css.svg Bloggerの無料版の「blogspot.com」のサブドメインからでもカスタムドメインの有料版の独自ドメインからでもトップページのアドレスの末尾に「responsive/sprite_v1_6.css.svg」を付けるとSVGアイコンが用意されている。データだけなので、アクセスしても何も表示されないけれどもソースコードを調べたり、ダウンロードしてファイルを開けばSVGアイコンのデータが分かる。色んなものが含まれていて何れも公式のものとして全てのBloggerブログで利用できる。 ブログでどのように表示するかは二つの方法があってBloggerの独自…
Bloggerの 2017年の新テーマ から導入されているメニューや検索や共有などのSVGアイコンは全てのBloggerブログに追加されたSVGファイルから取得されている。 ブログアドレス/responsive/sprite_v1_6.css.svg Bloggerの無料版の「blogspot.com」のサブドメインからでもカスタムドメインの有料版の独自ドメインからでもトップページのアドレスの末尾に「responsive/sprite_v1_6.css.svg」を付けるとSVGアイコンが用意されている。データだけなので、アクセスしても何も表示されないけれどもソースコードを調べたり、ダウンロードしてファイルを開けばSVGアイコンのデータが分かる。色んなものが含まれていて何れも公式のものとして全てのBloggerブログで利用できる。 ブログでどのように表示するかは二つの方法があってBloggerの独自…
以前、 CSSのグリッドレイアウトによる画像の横並びの方法 を載せたけれどもBloggerの管理画面が2020年9月に刷新されて投稿画像の出方も少し変わったので、新しい方法を中心に載せ直したい。 目次 テンプレートによるコーディングの違い 2020年9月以降に投稿された画像の横並び 投稿画像の横並びのソースコードの書き方 二つの投稿画像の横並びのソースコードのサンプル サンプルで指定したグリッドレイアウトの説明 メインカラムに横並びの画像を収めるには 画像をメインカラムに収めるソースコードのサンプル 2020年9月以前に投稿された画像の横並び テンプレートによるコーディングの違い Bloggerの公式テーマを想定して投稿画像の横並びの方法を紹介するけれどもテンプレートのレイアウトヴァージョンによって変わるから注意しなくてはならない。 レイアウトヴァージョン３の公式テーマ Contempo／コンテンポ Soho／ソーホー …
Bloggerのウェブの記事／追加ページの投稿（編集）のHTMLモードはページのHTMLを扱える機能だ。HTMLとはHyperText Markup Language（ハイパーテキストマークアップランゲージ：超越文書記述言語）の頭文字四つで、ブログなどのウェブサイトをブラウザに表示するために使われるものなんだ。ブログの記事の投稿でも使ってページをどのように構成するかを個別にカスタマイズできるようにするのがHTMLモードの最大の特徴になる。 追記：2020年9月から投稿画面が変わり、投稿モードはメニューの左端の項目で「HTMLビュー」と「作成ビュー」と呼ばれて区別されるようになった。 投稿のHTMLモードの入力画面｜ Blogger 通常の作成モードはプレーンテキストで入力可能で、何でも書き込んだまま、ブログに表示される。さらに入力画面にコンテンツやデザインのスイッチも色々と付いていて便利だけど、…