Imaginary theme
Imaginaryのインデックスページ：トップとアーカイブとラベルとブログ内検索では記事のスニペットが表示されますが、初期値では記事のタイトルと画像と抜粋と二つのリンク（アーカイブと続きを読む）が表示されます。 テンプレートのデザインのカスタマイズとしてスニペットの本文の削除と項目の並び替えについて紹介します。 スニペットの本文の削除 スニペットの項目の並び替え どちらもBloggerの管理画面のテーマの▼メニューの「HTMLを編集」か「バックアップ」と「復元」でテンプレートのソースコードを書き換えます。 スニペットの本文の削除 記事からタイトルと画像だけを取り込んで抜粋を表示しないようにする方法です。 データを読み込まないようにする Blog1のidのwidget内のpostBodySnippetのidのincludable内のsummaryのclassのpタグがインデックスページでスニペットの本文を…
Imaginaryのインデックスページ、つまりトップページとアーカイブページとラベルページとブログ内の検索結果ページではスクロールが画面下に達すると次のページを自動的に読む込むという無限スクロールが搭載されています。 本稿では画面スクロールによる動作を停止して読み込みボタンで無限スクロールを手動的に行うように変更するカスタマイズの方法を紹介します。 見た目は通常のリンクと同じですが、ボタンを押すと次のページへ移動するのではなく、次のページを読み込んで同じページで表示します。 カスタマイズはテンプレートのソースコードを編集しますので、Bloggerの管理画面のテーマのHTMLを編集かバックアップと元に戻すで、行って下さい。 読み込みボタン／無限スクロールの手動化へのの四つの手順 読み込みボタンを設置する フッターを表示する モバイルのサイドバーを下段に表示する デスクトップのサイドバーを外した後に下段に表…
Imagimaryの記事／追加ページにはパンくずリストの構造化データが付いています。 構造化データは検索エンジンからのアクセスを想定してサイト作成を行うSEO（Search Engine Optimization／検索エンジン最適化）対策の一環で、パンくずリストは一つのページのサイト全体での位置付けを明らかにします。 Google 検索では、検索結果内のウェブページからの情報を分類する際に、ページの本文内のパンくずリスト マークアップを使用します。 パンくずリスト｜ Google 検索セントラル Google検索ではパンくずリストのリンクがリッチリザルトとして検索結果に表示されることがあります。 例＿書籍 › SF › 受賞作 Google検索に「受賞作」というページが表示され場合、それが属する一つ前の「SF」というカテゴリーとさらに一つ前の「書籍」というカテゴリーのリンクも一緒に表示されて「受賞作」…
Imaginaryの記事ページでは記事タイトルの下に投稿の公開日、本文の下に更新日が表示されます。 日付をどのように表示するかというフォーマット（形式）はBloggerの管理画面のタイムスタンプの形式で変えることができます、 設定｜ Blogger 公開日と更新日の両方とも共通のフォーマットで、表示されます。 BloggerがアメリカのWebサービスということで、日付のフォーマットが全て英語の順番（月日年か日月年）になってますので、日本語の順番（年月日）に変更するカスタマイズの方法を載せておきます。 Imaginaryの投稿の日付のカスタマイズはBloggerの管理画面のテーマのHTMLを編集かバックアップと元に戻すによってテンプレートのソースコードを書き換えることになります。 記事タイトルの下の公開日のカスタマイズ 例として「2022年5月10日 (火)」のように表示する場合を挙げます。 書き変え前のソ…
ブログに画像や動画を掲載すると容量が大きくてページの表示速度が下がります。閲覧するのに時間が訪問者を減るかも知れないので、なるべくページの表示速度を高めた方が良いと思います。 初回画面が三秒以内に表示されれば遅くて嫌になることは少ないといわれます。 魅力的な画像や動画を掲載しても不利益を被らないために記事／追加ページの高速化として投稿画像や動画の遅延読み込みや軽量化などのカスタマイズを紹介します。 Imaginaryに高速化のプログラムを取り付ける Man tying his shoes by Alexander Redl / Unsplash 投稿画像や動画の遅延読み込みや軽量化などの高速化に関して有利だと考えられる様々な機能を一つに纏めたプログラムを使います。 普通よりも使い辛くなる部分がありますので、予め留意して取り付けるようにして下さい。 記事本文をJavaScriptを使って出します。Goo…