Blogger用日本語対応テーマ「ZELO」登場!

Blogger

当ブログで何度も言及したBlogger用日本語対応テーマ(テンプレート)である「Vaster2」の登場によって、日本に於けるBloggerユーザーの数が目に見えて増えてきた事は、実に喜ばしい流れです。

参照

Blogger用レスポンシブ対応日本語テンプレート「Vaster2」の導入とカスタマイズ
https://professionalblogger.net/2016/10/blogger-template-vaster2/



Bloggerユーザーにおすすめの厳選テンプレート3選
https://professionalblogger.net/2017/04/good-template-for-blogger/

しかし…

これはまぁ、仕方のない事ではありますが、日本のBloggerユーザー達が「我も!」とVaster2を導入した結果、どこを覗いても大差のない没個性的なサイトが増えた事も事実です。

「本命は本命として必用ではあるけれど、やはり選択肢としての対抗馬も必要だ…」

そう思っていた矢先、まさに降って湧いたかの如く現れた日本語対応テンプレート「ZELO」は、更なるBloggerユーザーの増加と個性化に大きく貢献してくれるでしょう。

 

Blogger - ZELO

・公式サンプル→https://manabinolog.blogspot.com/
・ダウンロード→https://drive.google.com/open?id=17mqazOpXqSyKQ23WvNB510ex-bupHca7
(注)ダウンロード時にはGoogleアカウントでログインしている必要があります。

ZELOの特徴

・見やすい日本語の注釈文とテンプレートデザイナー

さて、このZELOの最大の特徴は、Vaster2で大いに重宝されたソースリスト内の日本語による注釈文(説明、注意書き)を踏襲しているのはもちろんの事、Blogger独自の機能である「テンプレートデザイナー」に対しても、日本語での説明を徹底させた事です。

日本語の注釈文1
ソースリスト内の注釈文
日本語の注釈文2
テンブレートデザイナー使用時

・緻密に計算された「ハミ出さない」デバイス別表示幅

海外製のテンプレートである「Simplify 2」を紹介した時にも言及しましたが、つい去年ぐらいまで、Blogger用のサードパーティー(第三者)製テンプレートといえば、PC表示時にはキレイに収まっているものの、スマートフォン表示にした途端に画像がハミ出したり、文字が重なったりする事が珍しくありませんでした。

開発や再現環境の違いによるものなのか、はたまた、単なる「手抜き」なのかは分かりませんが、一日の訪問者の半数以上がスマートフォンから閲覧しているという現実を鑑みた時、スマートフォン表示時の「みっともなさ」が招くイメージダウンは致命的です。

その点、このZELOは画像、外部スクリプト(TwitterやFacebook投稿の埋め込み等)、ソーシャルボタン群、等々…あらゆるコンテンツに「ハミ出し」が認められません。

ソースリストを見ていても、製作者である「ひろ氏」が「ハミ出しの撲滅」に最も心血を注いで開発したであろう事が推し量れます。

ZELOの注意点

Vaster2の対抗馬として今後の普及が大いに期待されるZELOですが、現時点でいくつかのSEO上の不備が確認できます。

画面表示には一切関係ありませんが、構造化マークアップの記述が抜けている部分が何ヶ所かに見受けられるので、直ちに検索順位で不利になるわけではないとしても、長期的には似たような内容のカテゴリーを扱っているライバルサイトに競り負ける可能性は否定できませんので、気になる方は別途、構造化マークアップの記述を突き詰めて下さい。

構造化データのエラー
構造化データの不備

ワタクシの方でも、テンプレートやCSSの調整用に使っている別ブログでZELOのカスタムや調整を行っていきますので、適用される方は参考にして下さい。

参考 構造化データ テストツール

ZELOのカスタマイズ

それでは【2018/07/15】現在、ワタクシがテンプレートテスト用ブログにZELOを適用した上で施したカスタムを列記していきますので、採り入れる方は必ずバックアップを取ってから自己責任で実施して下さい。

テストブログ
https://daily-consideration.blogspot.com/

外部CSSのインライン化

ZELOはソースリストの冒頭で外部CSSを読み込むという、Blogger用テーマにしては珍しい仕様になっています。

normalize-min-css1
normalize.min.css

当初、ワタクシはこれを、いわゆる「CSSリセット」の類いだと思い込んでいたので、「特に必用ないのでは…」と削除しようとしたのですが、制作者直々に「CSSリセットではなく、ブラウザ間の表示差異を少なくするためのもの」とのご指摘を頂きました。

では、必要だという事ですね(^д^;)ゞテヘッ

ただし、外部から呼び込む形のままですと、PageSpeed Insightsで計測した時に「レンダリングの妨げになる」として減点されますので、これをインライン化(内部記述化)したいと思います。

手順
先に画像で示したソースリストの8行目、

<link href='https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css' rel='stylesheet'/>

の記述を削除した上で「normalize.min.css」の中身をそのままコピー&ペーストして置き換え、<style>タグで囲います(7行目は注釈文なので残しておいても可)。

normalize-min-css2
normalize.min.cssの中身

normalize-min-css3

↑中身をコピー&ペーストした上で<style type=’text/css’>~</style>で囲う。

これで、PageSpeed Insightsで計測した際の減点を免れます。

サムネイル(アイキャッチ)画像のサイズ変更

現在のワードプレス用のテーマであれば、記事内に貼られている画像とは別に、OGP(og:image)用の画像や各エントリーカード用のアイキャッチ画像をそれぞれ別個に指定できるものが多く、実際、当ブログでも別個に指定している場合が多いですが、残念ながらBloggerにはそこまでの機能はありません。

他の多くのブログサービスと同様に、記事内の「最初に貼られている画像」を抽出、縮尺して各エントリーカードにアイキャッチとして表示する方式が採られていますが、テーマを変更した時などに、ちょっと困る事があります。

最近では、多くの素材サイトが頒布している画像のサイズを「640×480」、または「640×427」に設定している場合が多いですが、これは主に、WordPress等で最も一般的に利用されている画像のサイズが、その前後に納まっているからです。

テーマによって違う、サムネイル画像の「タテヨコ比」

ところが、ここで先述の困った事が起きてしまいます。

多くの素材サイトで「640×480」(4:3)、または「640×427」(1:0.667)の比率で画像を提供しているにも係わらず、記事内から抽出した画像をサムネイル化して各エントリーカードに表示する際に「別の比率」で縮尺・表示するテーマは意外に多く、その結果、折角の(?)若い女性の画像が上から押し潰したようにペシャンコになったり、「ムンクの叫び」のようにヒョロリと縦に伸びたりしてしまい、なんとも残念な気持ちになってしまうことが多々あります。

もちろん、記事内に画像を貼る前に、そのテーマで設定しているサムネイル画像の縦横比に合わせて元画像をトリミングしておけば済む話なのですが、画像によっては…

「とても美しい風景写真なので、絶対にトリミングしたくない」
「人物の集合写真なので、トリミングすると端に写っている人が切れてしまう」

等々、どうしても元画像をトリミングしないでそのまま使いたいケースがあります。

ZELOのサムネイル画像の比率は…

前置きが長くなってしまいましたが、ZELOのサムネイル画像のサイズと比率は…

ZELO - サムネイルサイズ
PC閲覧時のサムネイルサイズ
に、200×188!?

「1:0.94」ですか…これは何を基準にした比率なんでしょうか…

もちろん、サムネイルのサイズというものは必ずしも画像の「見栄え」を基準にして決められるものではなく、記事タイトルやスニペット(抜粋文)との配置バランス等も鑑みて相対的に決められる場合も多いでしょうから、これはこれで「他の何かを優先した結果」なのだとは思います。

それに、サムネイルのサイズや比率を後から変更したとしても、それが直ちにSEOや離脱率に影響を及ぼすワケではありませんので、まぁ、この辺りはお好みという事で。

では、とりあえず、PC閲覧時のサムネイルサイズを「200×150」(4:3)に変更し、それによって生じる記事タイトルやスニペットとの位置関係のズレも調整してみましょう。

変更前
ZELO - サムネイル


変更後
ZELO - サムネイル変更後

手順1
1080行付近の
/* ———- Responsive 768px(タブレット) */
という記述を探し、その配下(1117行付近)に記述されている
.thumb img
というクラスを探す。

変更前

.thumb img {
width: 200px;
height: 188px;
padding-right: 16px;
}

変更後

.thumb img {
width: 200px;
height: 150px;
margin: 0 20px 0 0;
}

 

手順2
同じ配下(1141行付近)に記述されている
.article-list-title
というクラスを探す。

変更前

.article-list-title {
height: 188px;
}

変更後

.article-list-title {
height: 150px;
}

これで、640×480サイズの元画像から抽出したサムネイル画像が、同じ比率で表示されるようになりました。

各エントリーカードの記事タイトルの装飾

さて、上記のカスタムでサムネイル画像のサイズは良い感じに収まりましたが、まだまだ、シンプル過ぎますので、各記事タイトル(h2)を当ブログと同じデザインに装飾したいと思います。

h2タイトル
この青い部分です。

変更前

.article-list-title h2 {
word-break : break-all !important;
color: $(top.h2.color);
font-size: 16px;
line-height: 1.2;
}

@media (min-width: 768px)
.article-list-title h2 {
color: #444444;
font-size: 24px;
}

変更後

.article-list-title h2 {
position: relative;
word-break : break-all !important;
margin: 0 0 10px 0;
padding: 10px 15px;
color: $(top.h2.color);
font-size: 16px;
line-height: 1.2;
background-color: #a0d8ef;
border-top: solid 1px #0076a3;
border-bottom: solid 1px #0076a3;
}

↓あくまでも「min-width: 768px」の配下の中から「.article-list-title h2」を探すという意味ですので、これをそのままコピペすると括弧が一対足りなくなって無効になりますので、ご注意!
@media (min-width: 768px)
.article-list-title h2 {
color: #444444;
font-size: 20px;
}

追加
記事タイトルが長い(概ね20文字以上)場合、スマートフォンで縦向き表示した際に日付やラベルなどのメタデータがエントリーカードからハミ出して切れる場合があるので、その分、フォントサイズと余白(padding)を小さくして納まり切るように調整します。

@media ( max-width: 420px) {
.article-list-title h2 {
margin: 0;
font-size: 14px;
font-weight: 400;
padding: 5px 5px;
}
}

ZELO - h2タイトル_PC
PC表示
ZELO - h2タイトル_Mob
モバイル表示

はい、この通り、うるさくならない程度に記事タイトルが強調できました。

広告