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