Bloggerの新・日本語対応テーマ【ZELO】作成しました【特徴紹介】


ZELOは、Bloggerの新しいテーマです。

これまで日本では、はてなブログやWordPressのブログが主流でした。

しかし、BloggerはGoogleというトップ企業のサービスであり、それらを超える機能を持ちながら、日本ではあまり有名ではありません。

機能をみれば、Bloggerはどのブログサービスよりも優れています。

無料、写真の容量制限がない、デフォルトで広告が入っていない、自由にカスタマイズできる、サーバーいらずetc...

この他にも、挙げきれないほどたくさんのメリットがあります。

Bloggerが日本で有名でない理由として、情報が少ないことや、良いテーマがないことが挙げられます。

Bloggerでは公式のテーマや、非公式の海外テーマが主に使われています。

しかし、それらはモバイルに対応していなかったり、日本向けのレイアウトじゃなかったり、そもそも英語なのでわかりにくいという問題があります。

そこで初心者にもわかりやすく、ハイエンドユーザーも満足できる、日本生まれのテーマが求められていました。

もっともっとBloggerのことを知ってもらいたい。

そして、Bloggerをゼロから熱意を持って盛り上げていきたい。

このような想いから数字の0(ゼロ)と、イタリア語で熱意を意味するZELO(ゼーロ)をかけて、Bloggerテーマ「ZELO」は誕生しました。

ZELOの主な特徴を紹介します。

ZELOシリーズの最新版「Orange ZELO」はこちら。

>>Blogger最強テーマ【OrangeZELO】の機能・特徴を紹介します

使用上の注意・ダウンロードはこちら。

>>ZELO使用上の注意・ダウンロード - Movelog

サンプルはこちら。

>>「ZELO」サンプル

*追記2020/5/3  新しい無料テーマ「veta」、「dark-veta」を開発しました。

Bloggerとブログの概念をふっとばす無料テーマ「veta」制作しました - Movelog

ZELOの特徴

・レスポンシブデザイン

ZELOは完全なレスポンシブデザインです。

上部固定のヘッダーナビもレスポンシブ対応で、スマホ表示の場合はメニューが折りたたまれます。

PCでこのページをご覧になっている場合、ブラウザを伸び縮みしてみてください。

どのサイズでも、綺麗に配置されていると思います。

さらに、フッターメニューはPC画面でのみ表示され、スマホにしたときにサイドバーと重なりません。

もちろん、文字の大きさや行間などの細かいところも変えています。

・カスタマイズが自由自在

ZELOはもちろん、完成されたテーマです。

そのままお使いいただいても、十分に使用できます。

しかし、Blogger本来の特徴である自由度の高さを生かすために、独自にアレンジすることも可能です。


Bloggerの編集画面→テーマ→カスタマイズからテーマデザイナーを使用することで、かんたんに各項目の配色を変更できます。

また、上部固定ヘッダーもお好みで検索ボックスを外すことができ、その場合はここからヘッダーメニューの幅を変えることでうまく表示することができます。

詳しくはこちらをご覧ください。

配色以外にも、ZELOではカスタマイズ・アレンジのパターンを増やしていく予定です。

・ページ読み込みの高速化

ZELOでは余計な外部プラグインを読み込んでいないため、ページの読み込み速度が一般的なBloggerテーマに比べて速くなっています。

例えば、スマホ表示にしたときに現れるMENUバー。

これは本来、Jqueryという外部プラグインを読み込んで実装するのが一般的ですが、ZELOではjqueryを使わずに実装しています。

また、Schema.orgの仕様に従い、htmlのマークアップもしてあります。

Schema.orgのマークアップにより、検索エンジンがブログの情報を正確に読み取ることができ、SEO的に期待ができます。

写真はこの公式サイトの検索結果ですが、schemaマークアップによりパンくずリストが表示されていることがわかります(赤丸部分)。


ページの読み込み速度、schema.orgのマークアップは今後さらに評価されるかもしれません。

・簡単に呼び出せるフキダシ機能

ZELOには標準でフキダシ機能がついています。

こんな感じ!

この機能はxmlファイル内の指定の場所を少し変えていただくだけで、記事を書くときに簡単に呼び出すことができます。

フキダシ機能について、詳しくはこちら。

>>ZELOのフキダシ機能を使う方法 - Movelog

・見出し、引用デザインなど

見出しや引用のデザインを見やすく、レスポンシブ対応に設定しています。

この記事の「ZELOの特徴」という項目では見出し(h2)、その子要素の各項目では小見出し(h3)を用いています。

見出しや引用、リストのデザインについてはこちらのサンプルをご覧ください。

>>ZELOサンプル

・最適なアドセンス配置

htmlファイルの特定の位置にアドセンスコードを貼り付けるだけで、最初の見出し(h2)の前と記事の下にアドセンスが挿入されます。

これも本来は、外部プラグインを読み込んで行う方法がBloggerでは一般的ですが、ZELOはそれを使わずに実現しています。

また、サイドバーにもhtmlガジェットにアドセンスコードを貼り付けるだけで、アドセンスを表示することができます。

ZELOのアドセンス配置について、詳しくはこちらをご覧ください。


・SNS共有の最適化

SNS共有時に表示する文章や画像、タイトルなどを適切に表示できるようあらかじめ設定してあります。

さらに、各記事の下部に6種類のSNS共有ボタンを設置しています。

Twitter、Facebook、google+などの主要なSNSはもちろん、日本でメジャーなはてぶ、LINE、そしてページリーダーのPocketを用意しました。

デフォルトではご覧のデザインですが、これもいくつかパターンを増やしていく予定です。

このほかにもSEO対策、サムネなど細かい部分にもこだわって作り、色々な機能があります。

随時紹介していくので、ぜひご活用ください。

ZELOシリーズの最新版「Orange ZELO」はこちら。

>>Blogger最強テーマ【OrangeZELO】の機能・特徴を紹介します

使用上の注意・ダウンロードはこちら。

>>ZELO使用上の注意・ダウンロード - Movelog

*追記2020/5/3  新しい無料テーマ「veta」、「dark-veta」を開発しました。

Bloggerとブログの概念をふっとばす無料テーマ「veta」制作しました - Movelog
B! LINE