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

今年の三月にBloggerに公式テーマ/テンプレートが新しく四つ追加されていた。ContempoとSohoとEmporioとNotableという。それぞれに基本色が五つずつ用意されていて全部で二十種類になる。従来のテーマでは様々な難点を抱えていたし、細かいところだけれども改善されているのではないかと嬉しい予感がして直ぐに使ってみたくなった。


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

ただしBloggerのテーマを取り替えるのは僕には難儀だった。というのはパソコンを使ってないせいで、htmlのコピーが保存できなかつた。スマホ/タブレットの長押しで反映するのは張り付けただけだからコピーはパソコンできないのではないか。取り替えた後に止めたくて元に戻せなくなるのは辛いし、もしも可能でも自分で追加したソースコードを記載し直すのは厄介だと避けたかった。Bloggerではウェブのカスタマイズのテーマにバックアップ/復元のスイッチが付いているから本当は一発でテーマを取り替えられるし、簡単なはずなのにスマホ/タブレットで機能しなかったのも大きかった。


従来のシンプルテーマで画像動画文章レスポンシブと幾つも変更して相当に気に入っていたので、新しいテーマは使わなくても構わないと確かめもしないまま、試しもしないでいた。


ところが数ヵ月が過ぎて他のカスタマイズの少ないBloggerのブログを使えば後から元に戻すとしても手間がかからないし、新しいテーマを確かめるのは容易いと感じた。


僕は些細な日常以外にホームページの更新記録としてBloggerブログを三つ持っていてカスタマイズも殆どやってないので、2017年の新しい公式テーマはどんな感じかを初めて試した。


するといきなり取り替える直前にバックアップするかどうかの画面が表示されて驚いた。今までにはない親切設計ではないか。htmlをコピーせずに気持ちばかり急いて失敗をやらかしてしまう人が減りそうだ。事前に注意を促された。有り難い。僕としてはスマホ/タブレットではどうせ駄目だろうとスキップしかけたけど、しけし表示が改めて追加されたからもしかして機能も変わったとバックアップのスイッチを押したらできたので、嬉しかった。


Bloggerはスマホ/タブレットでもバックアップ/復元が可能になったからhtml編集は取り込んだxmlファイルを手持ちのエディターアプリから行ってアップロードしても大丈夫だ。ウェブだとBloggerのhtml編集は動作が遅いし、カーソルも合わなくて四苦八苦していたからスマホ/タブレットでは物凄く便利になった。



Bloggerの2017年の公式テーマ


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


  • デバイス間の仕様が統一された
  • 大きな画像が全くはみ出さない
  • 構造化データのエラーが消えた
  • html5のセクショニングが良い
  • role要素で障害者の閲覧に向く

ブログの機能が本当に見違えるし、素晴らしいとしか呼べない。AMP(検索エンジンからの高速表示)に対応してないくらいで、総合的に相当に気に入ってしまう。


デバイス間の仕様の改善


ウィジェットのカスタマイズがパソコン/タブレットのウェブバージョンとスマホのモバイルバージョンで同じになって両方とも一挙に設定できる。


大きな画像の改善


パソコン/タブレットのウェブバージョンでテンプレートよりも大きな画像を載せても枠内に収まるからデザインに優れて高画質も得られ易い。


ブラウザのInternet Explorerのバージョン11の一部でははみ出して表示されるようで、改善するにはテンプレートのcssを編集しなくてはならない(Emporioテーマでの修正法:他の三つのテーマでも同じだ)。


構造化データの改善


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でのモバイルの七十得点
ウェブパフォーマンス via PageSpeed Insights

モバイルで七十点で、パソコンで八十二点だ。表示速度の評価はNeeds Work(努力が必要)と出ているけれども決して悪くはないのではないか。ソースコードが長大でデザインや操作性に優れた大手のブログサービスとしては頑張っている数字のはずだ。僕のホームページはソースコードはとても短いけど、それでやっと八十五点以上で合格もするわけなので、Bloggerのテンプレートはオリジナルで長大なソースコードを持っているから低くても七十点ならば表示速度は速いと納得できる。


新しいテーマのデザインについて


ブログに新しいテーマを使うかどうかは機能だけでは悲しい。デザインが欠かせない。というか、デザインが第一だろう。ブログが崩れて表示されるのでは気持ち悪くてやっていらないし、誰も来なくても仕様がないのではないか。


只、思いはブログのテーマを取り替えるかぎり、充実した機能こそ切欠になった。


率直にいうとデザインは乗り気しない部分が目立つ。Bloggerのテンプレートは日本語の文字サイズに合ってないという事情が変わってなくてデザインそのものもブログよりはソーシャルメディアに似て来てしまっている。文章をしっかり載せたり、記事を分厚く纏めたりするスタイルではないのではないか。喜ぶ人もいるかも知れないけど、とにかく乗り気しない部分はカスタマイズでどこまで対応できるかにかかっている。


僕が一等に好きなのはブログの最上段の検索とメニューのフローティングバーだ。スマホ/タブレットでの操作性が格段に進歩したと喜ぶ。画面が小さいほどに閲覧中の移動距離が長くなるから、常時、フローティングバーが出ているのは便利だ。


サイトに自分で導入するのは大変だし、デザインを気に入って付けるとなると本当に手が出なくて僕はやりたくてもやってなかった。なので新しいテーマのフローティングバーは待望のアイテムとも過言ではなかった。デザインが気に入って動作がスムーズだから申し分ないと思う。


追加された四種類のテーマの特徴


ブログなのにソーシャルメディアに近くてフローティングバーを導入できるのが四つの新しいテーマに共通している。


もう一つ挙げるとhtmlの引用タグが非常に強調される。文字サイズが大きくなったり、位置が中寄せになったりするんだ。デザインはやはりソーシャルメディアではないか。著作権からいうと自作に他の誰かの作品を引用する場合には本文よりも目立たせるのは違法性を免れない。ソーシャルメディアの共有では非常に強調するのは当たり前で、商用ではないサイトならば余程と法律的に咎められる危険性は少ないかも知れないとはいえ、Bloggerの新しいテーマでブログを注意深くやるためには引用タグを使わないとかカスタマイズで変えておくなんて仕方も求められてしまう。


四種類なので、どれにするか、僕としてはデザインをブログに引き寄せるためにカスタマイズしなくてはならないから調べてみた。


Contempoはオーソドックスだ


ContempoテーマのBloggerブログのパソコンとスマホのサンプル
Share your unique style with new Blogger themes via Official Blogger Blog

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


Bloggerのサンプルを見るとシュールに仕上がっている。落ち着いた印象を与える。ブログが今此処ではないどこかを示すような感覚が「最新式」に通じるのではないか。心が開放されるデザインだ。


Sohoはフレッシュだ


SohoテーマのBloggerブログのパソコンとスマホのサンプル
Share your unique style with new Blogger themes via Official Blogger Blog

テーマのコンセプトのSohoは「ソーホー」という。スモールオフィス/ホームオフィスの英語の短縮形で、小規模の通信機器による職場らしい。社員がアイデアを発案するというイメージと結び付くとするとブロガーが記事を発信する気持ちに焦点が当たっている。ヘッダーに写真が大きく載せられたり、トップページでも記事の画像は全て縮小されず、しかもはっきり示されるからポートフォリオ(画集)に匹敵する。如何にも写真向きのブログだと思わせるし、絵でも良いわけで、画像こそ美しく際立つ。


Bloggerのサンプルを見るとアーティスティックに仕上がっている。お洒落な印象を与える。見た目から創造力を刺激するブログなのが「Soho」に通じるのではないか。心が浮き立つようなデザインだ。


Emporioはアクティブだ


EmporioテーマのBloggerブログのパソコンとスマホのサンプル
Share your unique style with new Blogger themes via Official Blogger Blog

テーマのコンセプトは「商業都市」という。Emporioはイタリア語らしい。オールラウンドで、文章でも画像でもバランスは良いけど、少しだけ画像寄りになっている。トップページでも画像が全て縮小されない。とはいえ、タイトルの文章も目に入り易い。記事ページでは画像が付いているとタイトル周りの背景にもぼかしで大きく映し出されるのがユニークだ。記事の特徴が一目瞭然なのが面白い。


Bloggerのサンプルを見るとコレクティブに仕上がっている。記事の寄せ集めみたいな感じで、写真ならばアルバムだけれども宝箱の印象を与える。幾つも様々な記事が載っているブログの賑やかさが「商業都市」に通じるのではないか。心が微笑み出すデザインだ。


Notableはセンシティブだ


NotableテーマのBloggerブログのパソコンとスマホのサンプル
Share your unique style with new Blogger themes via Official Blogger Blog

テーマのコンセプトは「注目すべき」という。日々の感覚が重視されているのか。ブログらしいブログができそうだけど、デザインは余白を大きめに取られるから生活の息抜きのイメージがある。記事ページのタイトルが下寄りなのは珍しいと驚いた。本当に余白が大きくて世の中の慌ただしい喧騒を離れてほっとするみたいだ。特徴的なのは記事ページで、文章だけならば本文の冒頭が強調表示されたり、画像を付けるとテンプレートの両端まで広がるスタイルだ。生活の息抜きならば使い心地の自由度も高い。


Bloggerのサンプルを見るとポエティックに仕上がっている。トップページの先頭のコーヒーカップの写真が心地良さを象徴するように好ましい印象を与える、安らぎを大切にするブロガーにとって「Notable」に通じるのではないか。心が澄み渡るデザインだ。


僕はどれも良いと迷って最終的にはContempoがやはり取り替えるには違和感が少なくて最も気に入った。従来のシンプルテーマに良く似ている。本当にまだもっと使いたいくらい納得しているかぎりはイメージを大きく変えるのは厳しかった。


Contempoテーマの日本語に合わせたデザイン


Bloggerのテーマが日本語に合ってなくてContempoは見るからに文章の右端の隙間が大きくてバランスが崩れていた。


二日くらい悩みながら途中で駄目で止めるしかないと思ったけれどもBloggerの新しいテーマは機能が素晴らしいからどうしても使いたいとやり直したら、結構、上手く行ってくれたようだ。


Contempoの日本語のデザインサンプル


ページのテキスト:14.95px
投稿のテキストのフォント:14.95px
投稿のテキストの色:#212121

デバイス共通のcss


h2, h3, h4 {margin:0;}

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


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

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


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

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


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

スマホ用の追加css


@media screen and (max-width:480px) {
.sticky .Header h1 {margin-bottom:0;padding-bottom:0;}
.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.8% + 0.0027vw);}}

※Contempoテーマのバージョン1.3.0(html編集のソーコードの冒頭のhtmlタグに含まれる「templateVersion」で確認できる)を想定している。
※Contempoは本文の文字サイズを15px以下にするとベージリスト(先頭)ガジェットのスマホでもっと見る…が出なくなるから必要ならば修正すると良い。
※cssの指定先については他のSohoとEmporioとNontableのテンプレートでも共通しているから参考にできる。


デバイス共通では記事に使う見出しタグに上下の余白が付いてしまうから「margin」で消している。僕は記事ではh2とh3とh4しか使わないんだ。記事のタイトルがh2(元々のh3の見出しタグをカスタマイズした)なので、最大のh1を本文に使うのは文章構成が崩れるし、反対にh5やh6と余りに小さ過ぎるのは本文には特に必要ないと思う。


そしてデバイス毎の画面幅に文章を揃えるのは本当に難しくて完璧ではないけれどもメディアクエリの「@meda screen」によって四つに分けながら調整している。


ブログのメインカラムの横幅/Post feed width(カスタマイズの上級者向けの投稿から編集可能)はデフォルトの922px(当初のバージョン1.0.1は「954px」だった)のままなので、それ以上のデバイスのパソコンと横向きタブレットは固定で文章デザインを付けておいても崩れない。


ブログ全体に「.post」のクラスで記事ページで行間を「letter-spacing」で伸ばして本文の両端だけ合わせている。


Contempoはデザインそのものが少しずれていてあちこちに隙間がバラけている感じがするから他のところで文章が合わなくても余り気にならない。むしろ砕けた格好良さを活かすというデザインが取れると面白いと僕は思う。


見出しタグは記事で使うと上下の余白が付いてしまうから多用するh2とh3とh4の分だけ「margin」で消している。


ただし一部の機種(SonyのXperiaなど)の日本語はヘッダーのメッセージや注目の投稿のタイトルの行間が食っ付いてしまうので、それぞれ、「#header」と「.FeaturedPost .post-title a」から調整している。横向きタブレットはパソコンのデザインに影響するので、何もしていない。文字サイズが小さくなるからさほど気にならないとは思う。


縦向きタブレットとスマホはカラム一杯に達しない画面幅で訪問者のデバイスによって微妙に異なる。できるかぎり、合わせるために画面幅に可変で増減する単位の「vw」や文字サイズの「calc」を使っている。


Bloggerの新しいテンプレートは何れも行間は良いと思うし、基本的に何もしないけど、縦向きのタブレットとスマホで記事ページのタイトルが非常に狭いので、「.post-title」のクラスから「line-height」で広げている。


トップページの通常の記事の抜粋のタイトルの行間も同時に変わるから余り広げ過ぎるとバランスが崩れるのを注意しなくては行けなかった。


加えて記事中に使う見出しのh2とh3は文字サイズが少し大きくてそのままでは画面の両端に合わないので、デバイス毎に「font-size」の「calc」で調節している。そして行間も狭過ぎるので、「line-height」で広げている。


スマホ用の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テーマにかぎって登録ガジェットを使わないとスマホのフローティングバーのブログ名の下の余白が大き過ぎるので、「.sticky .Header h1」から調整した。


Contempoの引用タグのデザインサンプル


引用タグも非常に強調されるのを修正しておきたい。


記事の本文と文章のデザインを揃えるけれどもBloggerのテーマのカスタマイズの上級者向けの「投稿」から引用文のフォントと色を記事の本文と同じに合わせて設定することができる。


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

スマホ向けの引用タグはカスタマイズのcssで上下の余白が広くて初期値の左右の余白も必要ないのと行間が狭いので、記事の本文と合わせるために「margin」と「line-height」(当初のバージョン1.0.1は「1.5」だった)と「font-size」(文字サイズはスマホ向けの記事の本文のcssにblockquoteを追加しても同じだ)で変更した。


引用タグのデザインは中寄せの位置取りだけを残して他は全て記事の本文と同じにしながら納得できた。


SonyのXperiaなどは文字サイズがhtml編集からしか変えられないようで、cssの引用タグのblockquoteから「font-size:x-large;」を削除しなくてはならないからもう少し手間がかかる。


Contempoテーマで日本語のデザインが記事の本文の両端と引用タグのデザインも気に入って仕上げられたので、ブログが気持ち良くやって行けそうだと期待を込めながらテンプレートとして新しく採用した。


cssの目当てのクラスを幾つも探するのは大変だったにせよ、望んだ結果を得られたかぎりは達成感を味わうばかりだ。

コメント

些細な日常の人気の投稿

MOTOROLAのMoto G5 Plusを使い出してのスマホレビュー

Imgurで画像URLと埋め込みコードを取得する方法

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策