スキップしてメイン コンテンツに移動

Imaginary theme

2019の投稿を表示しています

すべて表示

PageSpeed Insightsの速度計測で百点

イメージ イメージ

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

ブログの記事/追加ページのデザイン

イメージ イメージ

記事ページのヘッダー 著者名、公開日(設定の一つ目は旧式で無効です)の機能が使えます。 記事タイトルに記事ページのブックマークリンクが付きます。 Bloggerのユーザープロフィール(Bloggerの「設定」のユーザ設定から編集)があれば著者名にリンクが付いてアイコンがあれば著者名の前に表示されます。 投稿の公開日には公開日の年月のアーカイブのリンクが付きます。 記事ページの本文 文章のデザインのサンプルを示します。 本文 本文 本文 見出しのh1 見出しのh2 見出しのh3 見出しのh4(本文と同じ文字サイズ) 見出しのh5 見出しのh6 引用文 引用文 引用文 リンク名/アンカーテキスト リスト リスト リスト 記事ページのフッター 投稿をメールするリンク、ラベル、リアクション、投稿の下に投稿者のリンクを表示、コメント(件数表示は反映しません)、そしてBloggerの「収益」がオンの場合には投稿の間に広告を表示するの機能が使えます…

ブログのインデックスページのデザイン

イメージ イメージ

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

ブログの全般的なデザイン

イメージ イメージ

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