些細な日常
一般サイト向けの目次の自動生成のJavaScriptプログラムを公開してBloggerブログでも使えるので、どうすれば実装できるかを説明する。 JavaScriptでコンテンツの目次を自動生成して表示するプログラム どのような目次なのかやデザインや機能のカスタマイズについては一般サイト向けの記事を参考にして欲しい。 僕が提供するBlogger用のImaginaryテーマは サンプルブログの自動生成の目次のカスタマイズの記事 に専用のソースコードと実装方法を紹介している。 目次の自動生成のプログラムのソースコード ブログのテンプレートか投稿にscriptで、プログラムのソースコードを記載して使う。 /* Copyright: Nagahito Yuki 2023 | https://www.nagahitoyuki.com/2023/03/implement-a-…
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の 2017年の新テーマ から導入されているメニューや検索や共有などのSVGアイコンは全てのBloggerブログに追加されたSVGファイルから取得されている。 ブログアドレス/responsive/sprite_v1_6.css.svg Bloggerの無料版の「blogspot.com」のサブドメインからでもカスタムドメインの有料版の独自ドメインからでもトップページのアドレスの末尾に「responsive/sprite_v1_6.css.svg」を付けるとSVGアイコンが用意されている。データだけなので、アクセスしても何も表示されないけれどもソースコードを調べたり、ダウンロードしてファイルを開けばSVGアイコンのデータが分かる。色んなものが含まれていて何れも公式のものとして全てのBloggerブログで利用できる。 ブログでどのように表示するか…
以前、 CSSのグリッドレイアウトによる画像の横並びの方法 を載せたけれどもBloggerの管理画面が2020年9月に刷新されて投稿画像の出方も少し変わったので、新しい方法を中心に載せ直したい。 目次 テンプレートによるコーディングの違い 2020年9月以降に投稿された画像の横並び 投稿画像の横並びのソースコードの書き方 二つの投稿画像の横並びのソースコードのサンプル サンプルで指定したグリッドレイアウトの説明 メインカラムに横並びの画像を収めるには 画像をメインカラムに収めるソースコードのサンプル 2020年9月以前に投稿された画像の横並び テンプレートによるコーディングの違い Bloggerの公式テーマを想定して投稿画像の横並びの方法を紹介するけれどもテンプレートのレイアウトヴァージョンによって変わるから注意しなくてはならない。 レイアウトヴァージョン３の公式テーマ Con…
Bloggerのウェブの記事／追加ページの投稿（編集）のHTMLモードはページのHTMLを扱える機能だ。HTMLとはHyperText Markup Language（ハイパーテキストマークアップランゲージ：超越文書記述言語）の頭文字四つで、ブログなどのウェブサイトをブラウザに表示するために使われるものなんだ。ブログの記事の投稿でも使ってページをどのように構成するかを個別にカスタマイズできるようにするのがHTMLモードの最大の特徴になる。 追記：2020年9月から投稿画面が変わり、投稿モードはメニューの左端の項目で「HTMLビュー」と「作成ビュー」と呼ばれて区別されるようになった。 投稿のHTMLモードの入力画面｜ Blogger 通常の作成モードはプレーンテキストで入力可能で、何でも書き込んだまま、ブログに表示される。さらに入力画面にコンテンツやデザイン…