Bloggerの公式テーマからContempoをブログに新しく採用した

今年の三月にBloggerに公式テーマ／テンプレートが新しく四つ追加されていた。ContempoとSohoとEmporioとNotableという。それぞれに基本色が五つずつ用意されていて全部で二十種類になる。従来のテーマでは様々な難点を抱えていたし、細かいところだけれども改善されているのではないかと嬉しい予感がして直ぐに使ってみたくなった。追記：2019年5月から自作のBlogger用のオリジナルテーマのImaginaryを使うようになった。 Bloggerの2017年の公式テーマ:ContempoとSohoとEmporioとNotable（各五色ずつの二十種類）

Bloggerの2017年の公式テーマ:ContempoとSohoとEmporioとNotable（各五色ずつの二十種類）

テーマ｜ Blogger

ただしBloggerのテーマを取り替えるのは僕には難儀だった。というのはパソコンを使ってないせいで、HTMLのコピーが保存できなかった。スマホ／タブレットの長押しで反映するのは張り付けだけだからコピーはパソコンではできないのではないか。取り替えた後に止めたくて元に戻せなくなるのは辛いし、もしも可能でも自分で追加したソースコードを記載し直すのは厄介だと避けたかった。Bloggerではウェブのカスタマイズのテーマにバックアップ／復元のスイッチが付いているから本当は一発でテーマを取り替えられるし、簡単なはずなのにスマホ／タブレットで機能しなかったのも大きかった。従来のシンプルテーマで画像や動画や文章やレスポンシブと幾つも変更して相当に気に入っていたので、新しいテーマは使わなくても構わないと確かめもしないまま、試しもしないでいた。ところが数ヵ月が過ぎて他のカスタマイズの少ないBloggerのブログを使えば後から元に戻すとしても手間がかからないし、新しいテーマを確かめるのは容易いと感じた。僕は些細な日常以外にホームページの更新記録としてBloggerブログを三つ持っていてカスタマイズも殆どやってないので、2017年の新しい公式テーマはどんな感じかを初めて試した。するといきなり取り替える直前にバックアップするかどうかの画面が表示されて驚いた。今までにはない親切設計ではないか。HTMLをコピーせずに気持ちばかり急いて失敗をやらかしてしまう人が減りそうだ。事前に注意を促された。有り難い。僕としてはスマホ／タブレットではどうせ駄目だろうとスキップしかけたけど、しけし表示が改めて追加されたからもしかして機能も変わったとバックアップのスイッチを押したらできたので、嬉しかった。Bloggerはスマホ／タブレットでもバックアップ／復元が可能になったからHTML編集は取り込んだXMLファイルを手持ちのエディターアプリから行ってアップロードしても大丈夫だ。ウェブだとBloggerのHTML編集は動作が遅いし、カーソルも合わなくて四苦八苦していたからスマホ／タブレットでは物凄く便利になった。

Bloggerの2017年の公式テーマ
ブラウザでの表示速度も速い
新しいテーマのデザインについて
Contempoはオーソドックスだ
Sohoはフレッシュだ
Emporioはアクティブだ
Notableはセンシティブだ
Contempoテーマの日本語に合わせたデザイン
Contempoの日本語のデザインサンプル
Contempoの引用タグのデザインサンプル

Bloggerの2017年の公式テーマ新しく追加された四つの何れも素晴らしい。従来のテーマの様々な難点をしっかり克服しているという印象を抱いた。僕は好きだと直ぐに認めた。

デバイス間の仕様が統一された

大きな画像が全くはみ出さない

構造化データのエラーが消えた

HTML5のセクショニングが良い

role要素で障害者の閲覧に向く

ブログの機能が本当に見違えるし、素晴らしいとしか呼べない。AMP（検索エンジンからの高速表示）に対応してないくらいで、総合的に相当に気に入ってしまう。デバイス間の仕様の改善ウィジェットのカスタマイズがパソコン／タブレットのウェブバージョンとスマホのモバイルバージョンで同じになって両方とも一挙に設定できる。大きな画像の改善パソコン／タブレットのウェブバージョンでテンプレートよりも大きな画像を載せても枠内に収まるからデザインに優れて高画質も得られ易い。構造化データの改善Googleの構造化データテストツールでチェックするとエラーはなくて項目はBlogPostingから関連した記事のタイトルや著者などの一般的な内容が入っている。Googleなどの検索エンジンにサイト内容が伝わり易くてアクセスアップに繋がりそうだ。HTML5のセクショニングの改善タグでいうとmain要素とarticle要素とsection要素が追加されてブログの中心に記事があるとGoogleなどの検索エンジンにサイト内容が伝わり易くてアクセスアップに繋がりそうだ。role要素の追加ブログのHTMLの諸々にrole要素が見付かった。障害者の閲覧に補足として反映するといわれる。一人でも多くの訪問者に分かって貰えるブログができるのは有り難い。ブラウザでの表示速度も速いBloggerの発表で、公式ブログでのShare your unique style with new Blogger themes（新しいBloggerテーマで個性を共有して下さい）によると表示速度も上がったといわれている。本当ならば嬉しいかぎりだし、訪問者と検索エンジンの両方に好まれるはずだ、GoogleのPageSpeed Insightsで実際にどのくらいかをチェックしてみた。 Bloggerブログの些細な日常のPageSpeed Insightsでのモバイルの七十得点

Bloggerブログの些細な日常のPageSpeed Insightsでのモバイルの七十得点

ウェブパフォーマンス｜PageSpeed Insights｜Google Developers

モバイルで七十点で、パソコンで八十二点だ。表示速度の評価はNeeds Work（努力が必要）と出ているけれども決して悪くはないのではないか。ソースコードが長大でデザインや操作性に優れた大手のブログサービスとしては頑張っている数字のはずだ。僕のホームページはソースコードはとても短いけど、それでやっと八十五点以上で合格もするわけなので、Bloggerのテンプレートはオリジナルで長大なソースコードを持っているから低くても七十点ならば表示速度は速いと納得できる。新しいテーマのデザインについてブログに新しいテーマを使うかどうかは機能だけでは悲しい。デザインが欠かせない。というか、デザインが第一だろう。ブログが崩れて表示されるのでは気持ち悪くてやっていらないし、誰も来なくても仕様がないのではないか。只、思いはブログのテーマを取り替えるかぎり、充実した機能こそ切欠になった。率直にいうとデザインは乗り気しない部分が目立つ。Bloggerのテンプレートは日本語の文字サイズに合ってないという事情が変わってなくてデザインそのものもブログよりはソーシャルメディアに似て来てしまっている。文章をしっかり載せたり、記事を分厚く纏めたりするスタイルではないのではないか。喜ぶ人もいるかも知れないけど、とにかく乗り気しない部分はカスタマイズでどこまで対応できるかにかかっている。僕が一等に好きなのはブログの最上段の検索とメニューのフローティングバーだ。スマホ／タブレットでの操作性が格段に進歩したと喜ぶ。画面が小さいほどに閲覧中の移動距離が長くなるから、常時、フローティングバーが出ているのは便利だ。サイトに自分で導入するのは大変だし、デザインを気に入って付けるとなると本当に手が出なくて僕はやりたくてもやってなかった。なので新しいテーマのフローティングバーは待望のアイテムとも過言ではなかった。デザインが気に入って動作がスムーズだから申し分ないと思う。追加された四種類のテーマの特徴ブログなのにソーシャルメディアに近くてフローティングバーを導入できるのが四つの新しいテーマに共通している。もう一つ挙げるとHTMLの引用タグが非常に強調される。文字サイズが大きくなったり、位置が中寄せになったりするんだ。デザインはやはりソーシャルメディアではないか。著作権からいうと自作に他の誰かの作品を引用する場合には本文よりも目立たせるのは違法性を免れない。ソーシャルメディアの共有では非常に強調するのは当たり前で、商用ではないサイトならば余程と法律的に咎められる危険性は少ないかも知れないとはいえ、Bloggerの新しいテーマでブログを注意深くやるためには引用タグを使わないとかカスタマイズで変えておくなんて仕方も求められてしまう。四種類なので、どれにするか、僕としてはデザインをブログに引き寄せるためにカスタマイズしなくてはならないから調べてみた。Contempoはオーソドックスだ ContempoテーマのBloggerブログのパソコンとスマホのサンプル

Share your unique style with new Blogger themes｜Official Blogger Blog｜Blogger

テーマのコンセプトのContempoは「最新式」という。全体的に纏まっていて文章と画像のバランスが良い。ブログとしてオールラウンドに使うのが易しい。従来のテーマとの親近性か高くて取り替える違和感も少ない。モバイルバージョンのトップページは注目記事のウィジェットが先頭に付いた以外はデフォルトで記事へのサムネイルと抜粋によってリンクを表示するレイアウトは全く同じなんだ。Simple is best（簡潔が最良だ）の思いに重なるところが素晴らしいし、飽きれず、長く気に入るかも知れない。Bloggerのサンプルを見るとシュールに仕上がっている。落ち着いた印象を与える。ブログが今此処ではないどこかを示すような感覚が「最新式」に通じるのではないか。心が開放されるデザインだ。Sohoはフレッシュだ SohoテーマのBloggerブログのパソコンとスマホのサンプル

Share your unique style with new Blogger themes｜Official Blogger Blog｜Blogger

テーマのコンセプトのSohoは「ソーホー」という。スモールオフィス／ホームオフィスの英語の短縮形で、小規模の通信機器による職場らしい。社員がアイデアを発案するというイメージと結び付くとするとブロガーが記事を発信する気持ちに焦点が当たっている。ヘッダーに写真が大きく載せられたり、トップページでも記事の画像は全て縮小されず、しかもはっきり示されるからポートフォリオ（画集）に匹敵する。如何にも写真向きのブログだと思わせるし、絵でも良いわけで、画像こそ美しく際立つ。Bloggerのサンプルを見るとアーティスティックに仕上がっている。お洒落な印象を与える。見た目から創造力を刺激するブログなのが「Soho」に通じるのではないか。心が浮き立つようなデザインだ。Emporioはアクティブだ EmporioテーマのBloggerブログのパソコンとスマホのサンプル

Share your unique style with new Blogger themes｜Official Blogger Blog｜Blogger

テーマのコンセプトは「商業都市」という。Emporioはイタリア語らしい。オールラウンドで、文章でも画像でもバランスは良いけど、少しだけ画像寄りになっている。トップページでも画像が全て縮小されない。とはいえ、タイトルの文章も目に入り易い。記事ページでは画像が付いているとタイトル周りの背景にもぼかしで大きく映し出されるのがユニークだ。記事の特徴が一目瞭然なのが面白い。Bloggerのサンプルを見るとコレクティブに仕上がっている。記事の寄せ集めみたいな感じで、写真ならばアルバムだけれども宝箱の印象を与える。幾つも様々な記事が載っているブログの賑やかさが「商業都市」に通じるのではないか。心が微笑み出すデザインだ。Notableはセンシティブだ NotableテーマのBloggerブログのパソコンとスマホのサンプル

Share your unique style with new Blogger themes｜Official Blogger Blog｜Blogger

テーマのコンセプトは「注目すべき」という。日々の感覚が重視されているのか。ブログらしいブログができそうだけど、デザインは余白を大きめに取られるから生活の息抜きのイメージがある。記事ページのタイトルが下寄りなのは珍しいと驚いた。本当に余白が大きくて世の中の慌ただしい喧騒を離れてほっとするみたいだ。特徴的なのは記事ページで、文章だけならば本文の冒頭が強調表示されたり、画像を付けるとテンプレートの両端まで広がるスタイルだ。生活の息抜きならば使い心地の自由度も高い。Bloggerのサンプルを見るとポエティックに仕上がっている。トップページの先頭のコーヒーカップの写真が心地良さを象徴するように好ましい印象を与える、安らぎを大切にするブロガーにとって「Notable」に通じるのではないか。心が澄み渡るデザインだ。僕はどれも良いと迷って最終的にはContempoがやはり取り替えるには違和感が少なくて最も気に入った。従来のシンプルテーマに良く似ている。本当にまだもっと使いたいくらい納得しているかぎりはイメージを大きく変えるのは厳しかった。Contempoテーマの日本語に合わせたデザインBloggerのテーマが日本語に合ってなくてContempoは見るからに文章の右端の隙間が大きくてバランスが崩れていた。二日くらい悩みながら途中で駄目で止めるしかないと思ったけれどもBloggerの新しいテーマは機能が素晴らしいからどうしても使いたいとやり直したら、結構、上手く行ってくれたようだ。Contempoの日本語のデザインサンプル

ページのテキストのフォント：14.95px
投稿タイトルの色：#101010
投稿のテキストのフォント：14.95px
投稿のテキストの色：#101010

デバイス共通のCSS

h2,h3,h4,p,ol,ul,.post-body dl {margin-top:1.3em;margin-bottom:1.3em;}
.sticky {background:rgba(255,255,255,0.1);}
.sticky .Header h1, .sticky .Header h1 a, .sticky .Header h1 a:hover, .sticky .Header h1 a:visited{
color:#757575;}
.sticky .Header h1 {margin-bottom:0;padding-bottom:0;}
.FeaturePost, .post-body h3 {color:#101010;}}

パソコン／横向きタブレット用の追加CSS

@media screen and (min-width:768px) {
.page {letter-spacing:0.055px;}
.post-body h2 {font-size:147.2%;line-height:1.5;}
.post-body h3 {font-size:104.8%;line-height:1.5;}}

縦向きタブレットとスマホの共通の追加CSS

@media screen and (max-width:767px) {
#header p {line-height:1.6;}
.post-title, .FeaturedPost .post-title a, .PopularPosts .post-title a {line-height:1.45;}}

縦向きタブレット用の追加CSS

@media screen and (max-width:767px) and (min-width:481px) {
.page {letter-spacing:0.0003vw;}
.post-body h2 {font-size:122.6%;line-height:1.5;}
.post-body h3 {font-size:108.5%;line-height:1.5;}}

スマホ用の追加CSS

@media screen and (max-width:480px) {
.post-title a {font-size:101.5%;}
.post-body h2 {font-size:122.1%;line-height:1.5;}
.post-body h3 {font-size:109.9%;line-height:1.5;}
.post-body, .FeaturedPost, .popular-posts-snippet {font-size:calc(99.7 % + 0.0022vw);}}

※Contempoテーマのバージョン1.3.0（HTML編集のソーコードの冒頭のhtmlタグに含まれる「templateVersion」で確認できる）を想定している。
※Contempoは本文の文字サイズを15px以下にするとベージリスト（先頭）ガジェットのスマホでもっと見る…が出なくなるから必要ならば修正すると良い。
※CSSの指定先については他のSohoとEmporioとNontableのテンプレートでも共通しているから参考にできる。デバイス共通で、デバイス共通では記事で使用する主要なHTMLタグ、見出し、リスト、定義などの上下の余白を均一的に指定している。最上段のフローティングバーのデザインも変更している。背景色を「.sticky」から「background」で透過しながら使っている。文字色を変えると最上段のフローティングバーのブログ名も同じに変わる。元に戻すために「.sticky .Header h1, .sticky .Header h1 a, .sticky .Header h1 a:hover, .sticky .Header h1 a:visited」から文字色とリンク色とクリック色とクリック済み色を同じに指定し直している。フローティングバーはContempoテーマにかぎってだけれども登録ガジェットを使わない場合にブログ名の下の余白が大きくなり過ぎてしまうので、「.sticky .Header h1」から調整した。他に注目の投稿の文字色と記事中の見出しタグのh3がページのテキストのままなので、「#FeaturedPost1」と「.post-body h3」の「color」で投稿の文字色などに合わせている。そしてデバイス毎の画面幅に文章を揃えるのは本当に難しくて完璧ではないけれどもメディアクエリの「@meda screen」によって四つに分けながら調整している。ブログのメインカラムの横幅／Post feed width（カスタマイズの上級者向けの投稿から編集可能）はデフォルトの922px（当初のバージョン1.0.1は「954px」だった）のままなので、それ以上のデバイスのパソコンと横向きタブレットは固定で文章デザインを付けておいても崩れない。パソコンと横向きタブレットは「.post」のクラスで記事ページの文字間を「letter-spacing」で伸ばして本文の両端を合わせた。そして見出しタグのh2とh3の文字サイズを「font-size」で大きくして行間を「line-height」で広げている。Contempoはデザインそのものが少しずれていてあちこちに隙間がバラけている感じがするから他のところで文章が合わなくても余り気にならない。むしろ砕けた格好良さを活かすというデザインが取れると面白いと僕は思う。縦向きタブレットとスマホはカラム一杯に達しない画面幅で訪問者のデバイスによって微妙に異なる。できるかぎり、合わせるために画面幅に可変で増減する単位の「vw」や文字サイズの「calc」を使っている。加えて記事中に使う見出しのh2とh3は文字サイズが少し大きくてそのままでは画面の両端に合わないので、デバイス毎に「font-size」で調節している。他にも行間も狭過ぎるので、「line-height」で広げている。一部の機種（SonyのXperiaなど）の日本語はヘッダーのメッセージと記事のタイトルと注目の投稿と人気の投稿のタイトルの行間がくっ付いてしまったり、ちょっと狭いので、それぞれ、「#header p」と「.post-title」と「.FeaturedPost .post-title a」と「.PopularPosts .post-title a」から調整している。横向きタブレットはパソコンのデザインに影響するので、何もしていない。文字サイズが小さくなるからさほど気にならないとは思う。スマホ用のCSSが最も大変で、文字サイズを変えるためにブログ全体を対象としても反映しないので、個別に指定しなくてはならない。記事の本文とトップページの先頭の注目の投稿と通常の記事の抜粋と記事ページの下段の人気の投稿でバランスが崩れてバラバラになるのは避けたい。四つ以外は何もしてなくて文字サイズを大きく変えるわけではないので、ブログ全体のバランスは崩れなくて大丈夫だと感じている。以前のテンプレートではCSSでブログ全体から纏めて文字サイズを調節する割合を変えられたのに新しいテンプレートではできない。記事の本文とトップページの通常の記事の抜粋は「.post-body」のクラスで、トップページの先頭の注目の投稿は「.FeaturedPost」のクラスで、記事のページの下段の人気の投稿は「.popular-posts-snippet」のクラスで、文字サイズがスマホの画面幅によって同じ割合で増減するように調節している。それぞれのタイトルはトップページの記事の抜粋だけずれが大きめで、右端の余りを減らすために「.post-title a」から変更している。記事の本文と指定先が殆ど同じなので、区別するのが難しい。記事の抜粋はリンクのaタグが付いているのが違うから最初から何もしなければリンクのaタグまで指定すると大丈夫だ。ただし記事の本文のタイトルに「.post-title」からデザインを付けると記事の抜粋のタイトルにも影響するから注意しなくてはならない。もしもはっきり区別するならばHTML編集でどちらかにクラスやidを新しく付けるとか見出しタグを変更するなんて仕方で指定先を切り離さなくてはならない。トップページの注目の投稿と記事ページの人気の投稿のタイトルも変更してないけど、もしも変更する場合はそれぞれに「.FeaturedPost .post-title a」と「.PopularPosts .post-title a」がCSSの指定先になる。文章の日本語のデザインは納得できた。記事の本文しか文章の両端を合わせてない。気になる他の三つもやるとすると難しいのは記事の本文とトップページの通常の記事の抜粋のクラスが「.post-body」で被っていて同時に変わるところなので、どちらか、または両方のウィジェットに自分でクラスを付けて切り離さなくてはならないと思う。CSS以外にもBloggerではHTML編集からVariableタグで出力されるデータを書き換える方法もあるけど、ウィジェット毎に文章のデザインを改めるならばスマホだけではなくてパソコンやタブレットも含めてやはり全てを指定し直さなくてはならないだろう。とはいえ、記事の本文でなければ幾らかずれていても気にならないかも知れないし、Contempoでは特に必要ないと感じるので、やらずに済ませて喜んでいる。Contempoの引用タグのデザインサンプル引用タグも非常に強調されるのを修正しておきたい。記事の本文と文章のデザインを揃えるけれどもBloggerのテーマのカスタマイズの上級者向けの「投稿」から引用文のフォントと色を記事の本文と同じに合わせて設定することができる。

@media screen and (max-width:480px) {
blockquote {margin:auto 0;line-height:1.6;font-size:calc(99.7% + 0.0022vw);}}

スマホ向けの引用タグはカスタマイズのCSSで初期値の左右の余白が必要ないのと行間が狭いので、記事の本文と合わせるために「margin」と「line-height」（当初のバージョン1.0.1は「1.5」だった）と「font-size」（文字サイズはスマホ向けの記事の本文のCSSにblockquoteを追加しても同じだ）で変更した。引用タグのデザインは中寄せの位置取りだけを残して他は全て記事の本文と同じにしながら納得できた。SonyのXperiaなどは文字サイズがHTML編集からしか変えられないようで、CSSの引用タグのblockquoteから「font-size:x-large;」を削除しなくてはならないからもう少し手間がかかる。Contempoテーマで日本語のデザインが記事の本文の両端と引用タグのデザインも気に入って仕上げられたので、ブログが気持ち良くやって行けそうだと期待を込めながらテンプレートとして新しく採用した。CSSの目当てのクラスを幾つも探するのは大変だったにせよ、望んだ結果を得られたかぎりは達成感を味わうばかりだ。