Imaginary theme

Imaginaryの記事／追加ページの本文の画面の左下に表示される概要ボタンは本文に見出し、HTMLのh1かh2かh3の見出しタグがあった場合にそれを取り込んだ目次を自動生成して表示します。 本稿ではボップアップの目次と本文への自動生成の目次の追加とポップアップのコンテンツのカスタマイズについて紹介します。 カスタマイズは全てBloggerの管理画面の「テーマ」のカスタマイズの右横のメニューボタン（▼）のHTMLを編集かバックアップと元に戻すからテンプレートのソースコードを書き換えます。 追記：Imaginaryのポップアップの目次は2023年4月3日のバージョンから搭載していますので、それ以前のバージョンを使っている場合はポップアップの目次を表示できるバージョンに取り替えて下さい。 ポップアップの目次のソースコード ポップアップの目次のソースコードについて説明します。 最後のscriptタグのSu…

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…

Imaginaryの通常の背景画像はおよそブログのヘッダーのみに表示されるように高さが指定されています。 背景画像の高さはBloggerの管理画面のテーマのカスタマイズの詳細設定の背景から一定の範囲内で調節することができます。 ブログの背景全体を覆い尽くすデザイン もう一つの背景画像の表示の仕方としてデバイスの全画面を対象にする、いい換えるとブログの背景全体を覆い尽くす方法について紹介します。 Imaginaryのソースコードを書き換える Bloggerの管理画面のテーマのメニュー（カスタマイズの右横のボタンから開く）の「HTMLを編集」、または「バックアップ」と「元に戻す」でテンプレートのXMLファイルを書き換えるかのどちらかで行います。 Imaginaryのソースコードのskin内のCSSを編集します。 書き換え前のCSS .bg-image-container {width:min(100vw, …

Bloggerでの背景のヘッダー画像の付け方 Imaginaryの背景のヘッダー画像はBloggerの管理画面のテーマのカスタマイズ（テーマデザイナー）の背景の背景画像の「背景を変更」からBloggerの既存のものを選択するか使用中のデバイスに保存してあるものをアップロードして付けられます。 テーマデザイナー｜Blogger 使用可能な画像URLが分かる場合はBloggerの管理画面のテーマのHTML編集かバックアップと元に戻すによるオフラインのファイル編集からブログのテンプレートのソースコードに追加することもてきます。 <Variable name="body.background" description="Background"       color="$(blog.header.color)"       type=&q…

Blank wall with dark band above grey pavement by Maarten Deckers on Unsplash Imaginaryについて意見や感想が載せられた記事を紹介する。 テーマをずっと気になっていた「Imaginary」にしてみた。まず1ヶ月くらい使ってみます。アドセンスの自動広告前提であれば、ほぼデフォルトで行けるけど、、日付は直したくなる。あと無限スクロールは賛否がわかれる、、デザインはすっきりアカデミックな印象。サイドバーにあまり視線が奪われない感じ テーマをずっと気になっていた「Imaginary」にしてみた｜ minato-セツナワールド シンプルな構成で、表示が速い。 ブログパーツ配置も容易です。 Bloggerでブログを開設して、GoogleAdSense承認まで到達した方に適合します。 標準で自動広告が作動する仕様となっています。 【blo…

Bloggerはサイト広告の アドセンス を管理画面の「収益」から設定して――ライセンスがなければブログを申請して審査に合格したかぎり――「レイアウト」のウィジェットから選択して直ぐに使える。 テンプレートは公式テーマならば間違いなくそうだし、Imaginaryも同じようにアドセンスのウィジェットが動作するけど、ただしこれは旧来の単一のデザインのサイト広告にしか当て嵌まらないんだ。 追記：2021年にBloggerの仕様が更新されて「収益」で自動広告を選択すると何もしなくても自動広告に対応するようになった。どのように表示するかをアドセンスの管理画面で設定するだけで良い。テンプレートは何もしないと旧来のコードが出てしまう状態だったので、Imaginaryとしてはそれを修正するように更新した。すなわち「収益」で自動広告を選択した場合には自動広告のコードだけがテンプレートのソースコードに出て無駄なコー…

ブログの表示速度が遅いとブログの利便性が下がり、訪問者に嫌われるとアクセスアップにも不利になります。Imaginaryは表示速度に拘泥り、ブログのソースコード（HTML、CSS、JavaScript、独自タグ）の最適化を随所に盛り込みました。結果、 PageSpeed Insights という表示速度の計測サイトによると最高の百点を獲得できることが分かりました。 スコア｜PageSpeed Insights｜Google Developers Imaginaryのサンプルブログのトップページをテストしました。スクリーンショットの百点はモバイル／スマホ版です。Bloggerブログの場合はURLの末尾に「?m=1」が付いた方へリダイレクトされます。デバイスの通信速度の影響か、現在、PageSpeed Insightsでのモバイルの点数は比較的に下がり易い傾向にあります。結果は割愛しますが、リダイレク…

A woman running down a sunny mountain road by Sue Zeng on Unsplash 記事ページのヘッダー 著者名、公開日（設定の一つ目は旧式で無効です）の機能が使えます。 記事タイトルに記事ページのブックマークリンクが付きます。 Bloggerのユーザープロフィール（Bloggerの「設定」のユーザ設定から編集）があれば著者名にリンクが付いてアイコンがあれば著者名の前に表示されます。 投稿の公開日には公開日の年月のアーカイブのリンクが付きます。 記事ページの本文 文章のデザインのサンプルを示します。 本文 本文 本文 見出しのh1 見出しのh2 見出しのh3 見出しのh4（本文と同じ文字サイズ） 見出しのh5 見出しのh6 引用文 引用文 引用文 リンク名／アンカーテキスト リスト リスト リスト 記事ページのフッター 投稿をメールするリンク、ラベル、リアクション、投稿の下に投稿者のリン…

A woman stands on the beach quietly by Sue Zeng on Unsplash ブログのトップページと後続のページ、アーカイブ（日付毎）、ラベル、ブログ内の検索結果などのインデックスページに投稿された記事の抜粋のスニペットが表示されます。 記事のタイトルは全て、投稿画像は一枚目が横長のサムネイル――その他にYouTubeの埋め込み動画がある場合もサムネイルの対象になります――記事の本文は先頭から百四十文字までがスニペットに取り込まれます。 フッターの左端のアーカイブは投稿の公開日の年月のアーカイブへのリンク、右端の続きを読むはスニペットの記事ページへのリンクになっています。 ブログの記事／追加ページではヘッダーのリンクリストは省略されますが、インデックスページでは表示されます。 Bloggerの管理画面で設定された記事数を越えると自動的に次のインデックスペー…

全部で七つのセクションに大別されます。 ヘッダー ページリスト (先頭) Search (Top)／検索（先頭） ページの本文 サイドバー Page Sub／ページの補足 フッター Bloggerのレイアウトから編集できますが、5と6だけがウィジェットの入れ替えが可能です。 インデックスページの最初のスニペットと記事／追加ページの本文の上にフローティングバーが付いています。 スマホやタブレットなどの小画面のデバイスではフローティングバーの左端の三本線のハンバーガーメニューでサイドバーを開き、サイドバーの右上のバツ印でサイドバーを閉じます。 ブログの幅以上の大画面のパソコンなどのデバイスではサイドバーはブログの右端に最初から開いて表示されます。 モバイルのフローティングバーの左端のハンバーガーメニューの右隣の虫眼鏡がSearch (Top)のセクションのブログ内検索を開閉するボタンです。 右端の三つはパソコンでF…