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

皆のImaginaryへの気持ちはどうなのか

イメージ

Blank wall with dark band above grey pavement by Maarten Deckers on Unsplash Imaginaryについて意見や感想が載せられた記事を紹介する。 シンプルな構成で、表示が速い。 ブログパーツ配置も容易です。 Bloggerでブログを開設して、GoogleAdSense承認まで到達した方に適合します。 標準で自動広告が作動する仕様となっています。 【blogger】新しいデザインテンプレート『Imaginary theme』を導入してみました| 【Blogger】日本人向けテーマ・実践と紹介ブログ 「Imaginary」は「些細な日常」の結城永人さんがリリースしたテンプレートで、縦1列のリキッドデザインと縦2列のグリッドデザイの2種類が提供されてます。 PageSpeed Insightsの速度計測では、PCでは100ポイントをた…

アドセンスの自動広告に対応済み

イメージ

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

PageSpeed Insightsの速度計測で百点

イメージ

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

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

イメージ

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の管理画面で設定された記事数を越えると自動的に次のインデックスペー…

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

イメージ

A woman holding a child walking the pathway by Sue Zeng on Unsplash 全部で八つのセクションに大別されます。 ヘッダー ページリスト (先頭) Search (Top)/検索(先頭) 広告 ページの本文 Page Sub/ページの補足 フッター サイドバー (上) サイドバー (下) Bloggerのレイアウトから編集できますが、6と8と9だけがウィジェットの入れ替えが可能です。 広告セクションはBloggerの「収益」がオンのときに使えますが、メインのカラム:ブログの本文やスニペットの右横のアドセンス広告です。スマホなどの小さな画面のデバイスでは表示されません。 全ページの本文か最初のスニペットの上にフローティングバーが付いています。 左端の三本線のハンバーガーメニューでサイドバーを開き、サイドバーの右上のバツ印でサイドバーを閉じます。 ブログの幅以…