共有ボタンのTwitterからXへの変更について
Imaginaryのフローティングバーの右端の共有ボタンのTwitterをXに変更しました。2024年6月12日に行いましたが、アイコンの微調整のために翌日の13日のアップデートから十分に使えるようになりました。 TwitterがXに変わったのが2023年7月24日で、一年近く経ちます。又、元に戻るのではないかと様子を…
ポップアップと本文に目次を追加するカスタマイズ
Imaginaryの記事／追加ページの本文の画面の左下に表示される概要ボタンは本文に見出し、HTMLのh1かh2かh3の見出しタグがあった場合にそれを取り込んだ目次を自動生成して表示します。 本稿ではボップアップの目次と本文への自動生成の目次の追加とポップアップのコンテンツのカスタマイズについて紹介します。 カスタマイズ…
インデックスページのスニペットの本文の削除と項目の並び替えのカスタマイズ
Imaginaryのインデックスページ：トップとアーカイブとラベルとブログ内検索では記事のスニペットが表示されますが、初期値では記事のタイトルと画像と抜粋と二つのリンク（アーカイブと続きを読む）が表示されます。 テンプレートのデザインのカスタマイズとしてスニペットの本文の削除と項目の並び替えについて紹介します。 スニペッ…
読み込みボタン／無限スクロールの手動化のカスタマイズ
Imaginaryのインデックスページ、つまりトップページとアーカイブページとラベルページとブログ内の検索結果ページではスクロールが画面下に達すると次のページを自動的に読む込むという無限スクロールが搭載されています。 本稿では画面スクロールによる動作を停止して読み込みボタンで無限スクロールを手動的に行うように変更するカ…
パンくずリストの構造化データにラベルを追加する
Imagimaryの記事／追加ページにはパンくずリストの構造化データが付いています。 構造化データは検索エンジンからのアクセスを想定してサイト作成を行うSEO（Search Engine Optimization／検索エンジン最適化）対策の一環で、パンくずリストは一つのページのサイト全体での位置付けを明らかにします。 G…
投稿の日付表示を日本語の順番に変える方法
Imaginaryの記事ページでは記事タイトルの下に投稿の公開日、本文の下に更新日が表示されます。 日付をどのように表示するかというフォーマット（形式）はBloggerの管理画面のタイムスタンプの形式で変えることができます、 設定｜ Blogger 公開日と更新日の両方とも共通のフォーマットで、表示されます。 Bloggerが…
フォント変更のためのVariableタグの一覧表
Bloggerブログのフォント（字体）はカスタマイズで変更することができます。 Bloggerブログでフォントを変更する方法 管理画面のテーマのカスタマイズのテーマデザイナーのフォントで用意された一部の英数字以外はCSSを書き換える必要があり、その場合、Imaginaryのテンプレートに的確に反映させるためにはソースコー…
記事／追加ページの画像の遅延読み込みや軽量化による高速化のカスタマイズ
ブログに画像や動画を掲載すると容量が大きくてページの表示速度が下がります。閲覧するのに時間が訪問者を減るかも知れないので、なるべくページの表示速度を高めた方が良いと思います。 初回画面が三秒以内に表示されれば遅くて嫌になることは少ないといわれます。 魅力的な画像や動画を掲載しても不利益を被らないために記事／追加ページの高…
ブログの背景画像を全画面で表示する方法
Imaginaryの通常の背景画像はおよそブログのヘッダーのみに表示されるように高さが指定されています。 背景画像の高さはBloggerの管理画面のテーマのカスタマイズの詳細設定の背景から一定の範囲内で調節することができます。 ブログの背景全体を覆い尽くすデザイン もう一つの背景画像の表示の仕方としてデバイスの全画面を対象…
ブログの背景のヘッダー画像の付け方とサイズについて
Bloggerでの背景のヘッダー画像の付け方 Imaginaryの背景のヘッダー画像はBloggerの管理画面のテーマのカスタマイズ（テーマデザイナー）の背景の背景画像の「背景を変更」からBloggerの既存のものを選択するか使用中のデバイスに保存してあるものをアップロードして付けられます。 テーマデザイナー｜ Blogg…
皆のImaginaryへの気持ちはどうなのか
Blank wall with dark band above grey pavement by Maarten Deckers on Unsplash Imaginaryについて意見や感想が載せられた記事を紹介する。 テーマをずっと気になっていた「Imaginary」にしてみた。まず1ヶ月くらい使ってみます。アドセンス…
アドセンスの自動広告に対応済み
Bloggerはサイト広告の アドセンス を管理画面の「収益」から設定して――ライセンスがなければブログを申請して審査に合格したかぎり――「レイアウト」のウィジェットから選択して直ぐに使える。 テンプレートは公式テーマならば間違いなくそうだし、Imaginaryも同じようにアドセンスのウィジェットが動作するけど、ただしこれ…
ImaginaryのBloggerブログへの付け替え方
BloggerブログにテンプレートのImaginaryを使う、すなわち既存のテンプレートから新たに付け替える方法には手順が二つある。 ImaginaryのXMLファイルをデバイスに取得する Bloggerの管理画面からテンプレートを更新する Bloggerでテンプレートを更新する方法はBloggerの公式テーマ以外の全ての…
PageSpeed Insightsの速度計測で百点
ブログの表示速度が遅いとブログの利便性が下がり、訪問者に嫌われるとアクセスアップにも不利になります。Imaginaryは表示速度に拘泥り、ブログのソースコード（HTML、CSS、JavaScript、独自タグ）の最適化を随所に盛り込みました。結果、 PageSpeed Insights という表示速度の計測サイトによると…
ブログの記事／追加ページのデザイン
記事ページのヘッダー 著者名、公開日（設定の一つ目は旧式で無効です）の機能が使えます。 記事タイトルに記事ページのブックマークリンクが付きます。 Bloggerのユーザープロフィール（Bloggerの「設定」のユーザ設定から編集）があれば著者名にリンクが付いてアイコンがあれば著者名の前に表示されます。 投稿の公開日には公開日…
ブログのインデックスページのデザイン
ブログのトップページと後続のページ、アーカイブ（日付毎）、ラベル、ブログ内の検索結果などのインデックスページに投稿された記事の抜粋のスニペットが表示されます。 記事のタイトルは全て、投稿画像は一枚目が横長のサムネイル――その他にYouTubeの埋め込み動画がある場合もサムネイルの対象になります――記事の本文は先頭から百…
ブログの全般的なデザイン
全部で七つのセクションに大別されます。 ヘッダー ページリスト (先頭) Search (Top)／検索（先頭） ページの本文 サイドバー Page Sub／ページの補足 フッター Bloggerのレイアウトから編集できますが、5と6だけがウィジェットの入れ替えが可能です。 インデックスページの最初のスニペットと記事／追加ページの本…
