ZELOはBloggerユーザーの声を聴きながら、Bloggerにはこれまでなかった機能を組み込んだテーマとして開発してきました。
その結果、完成したZELOはその機能やデザインが認められ、多くの方にご使用いただいております。
しかし、あらためて使っていくうちに、Blogger本来の機能を生かしきれていないと感じるようになりました。
なのでBlogger本来の機能を十分に引き出すテーマとして、今回の【Orange ZELO】を構想しました。
【ZELO】と違い、【Orange ZELO】はBlogger本来の機能を大きく変えるようなことはしていません。
例えば、ZELOでは番号付きのページナビを導入していましたが、Orange ZELOでは導入していません。
番号付きのページナビは確かに便利ですが、導入することにより読み込みが遅くなったり、SEOに弱くなったりします。
一方、Orange ZELOではページ回遊率をあげたりスムーズな動作を実現することで、番号付きナビなしでも最高のパフォーマンスが実現しました。
"より自然に、より効率よく"
Blogger本来の能力を引き出すことを目的として、またモダンな趣向のデザインを加えたものとして、Orange ZELOを制作しました。
Orange ZELOの様々な素晴らしい機能・特徴について、まとめたいと思います。
サンプルはこちら。
>> サンプルサイト
ダウンロードについては、こちらをご覧ください。
*爆速のBloggerテーマ【Prime ZELO】を作成しました。詳しくはこちらをご覧ください。
>>【Prime ZELO】爆速のBloggerテーマの機能・特徴紹介ページ
テーマの導入方法はこちらをご覧ください。
>>【Orange ZELO】導入チュートリアル・ウィジットの設定 - Bloggerなび
これは「Movelog」のテーマをOrange ZELOに変更した後、googleのページ読み込み速度のテストを実施した結果です。
「Movelog」は現在100記事ほど、アドセンス有、youtubeサムネ使用記事ありという状況です。
それにも関わらず、モバイルではほぼ最高スコアの99を出すことができ、PCでも時間によっては90台の高スコアを出すことができました。
ページの読み込み速度も重要な指標の一つとなる現在のSEOや、UXと呼ばれるユーザーの満足度において、大きな効果が期待できます。
また、構造化データについても次の画像の通りGoogleの構造化データテストツールを使って調べました。
結果、エラーは一切見られません。
HTMLのマークアップに関しても、Orange ZELOでは最適なものとなるよう調整しました。
例えば、TOPページではサイトのタイトルがh１タグとなり、記事ページではサイトのタイトルがspanタグ、記事ごとのタイトルがh１タグとなります。
h１タグはページの一番重要な要素を示すものです。
これを記事ページの記事タイトルに与えることで、検索エンジンがより内容を認識しやすくなります。
まだ確定ではありませんが、進捗があればこちらに追記します。
*追記(9/19)：
自動の目次機能を実装しました。詳しくはこちらの記事をご覧ください。
>>自動目次機能を追加しました！【Orange ZELO】
Orange ZELOの機能・特徴について、ご覧いただきありがとうございました。
ダウンロードについてはこちらをご覧下さい。
その結果、完成したZELOはその機能やデザインが認められ、多くの方にご使用いただいております。
しかし、あらためて使っていくうちに、Blogger本来の機能を生かしきれていないと感じるようになりました。
なのでBlogger本来の機能を十分に引き出すテーマとして、今回の【Orange ZELO】を構想しました。
【ZELO】と違い、【Orange ZELO】はBlogger本来の機能を大きく変えるようなことはしていません。
例えば、ZELOでは番号付きのページナビを導入していましたが、Orange ZELOでは導入していません。
番号付きのページナビは確かに便利ですが、導入することにより読み込みが遅くなったり、SEOに弱くなったりします。
一方、Orange ZELOではページ回遊率をあげたりスムーズな動作を実現することで、番号付きナビなしでも最高のパフォーマンスが実現しました。
"より自然に、より効率よく"
Blogger本来の能力を引き出すことを目的として、またモダンな趣向のデザインを加えたものとして、Orange ZELOを制作しました。
Orange ZELOの様々な素晴らしい機能・特徴について、まとめたいと思います。
サンプルはこちら。
>> サンプルサイト
ダウンロードについては、こちらをご覧ください。
*爆速のBloggerテーマ【Prime ZELO】を作成しました。詳しくはこちらをご覧ください。
>>【Prime ZELO】爆速のBloggerテーマの機能・特徴紹介ページ
テーマの導入方法はこちらをご覧ください。
>>【Orange ZELO】導入チュートリアル・ウィジットの設定 - Bloggerなび
快適なレスポンシブデザイン
どの端末からでも快適な操作が行えるように設計しました。
PCの場合はメイン・サイドの２カラム、1024px(iPad Proの大きさ)より小さいときはサイドバーがメインの下に入りこみます。
また、スマホなどのモバイル端末で表示される場合は、上部のメニューがハンバーガーメニューに収納され、スッキリ表示できます。
PCをお使いの方は、こちらのサンプルサイトで試しにブラウザの幅を変化させてみてください。
サンプルはこちら。
>> サンプルサイト
PCの場合はメイン・サイドの２カラム、1024px(iPad Proの大きさ)より小さいときはサイドバーがメインの下に入りこみます。
また、スマホなどのモバイル端末で表示される場合は、上部のメニューがハンバーガーメニューに収納され、スッキリ表示できます。
PCをお使いの方は、こちらのサンプルサイトで試しにブラウザの幅を変化させてみてください。
サンプルはこちら。
>> サンプルサイト
ページ読み込みの高速化
まずはこちらをご覧ください。
これは「Movelog」のテーマをOrange ZELOに変更した後、googleのページ読み込み速度のテストを実施した結果です。
「Movelog」は現在100記事ほど、アドセンス有、youtubeサムネ使用記事ありという状況です。
それにも関わらず、モバイルではほぼ最高スコアの99を出すことができ、PCでも時間によっては90台の高スコアを出すことができました。
ページの読み込み速度も重要な指標の一つとなる現在のSEOや、UXと呼ばれるユーザーの満足度において、大きな効果が期待できます。
また、構造化データについても次の画像の通りGoogleの構造化データテストツールを使って調べました。
結果、エラーは一切見られません。
HTMLのマークアップに関しても、Orange ZELOでは最適なものとなるよう調整しました。
例えば、TOPページではサイトのタイトルがh１タグとなり、記事ページではサイトのタイトルがspanタグ、記事ごとのタイトルがh１タグとなります。
h１タグはページの一番重要な要素を示すものです。
これを記事ページの記事タイトルに与えることで、検索エンジンがより内容を認識しやすくなります。
かんたんなカスタマイズ
Bloggerのテーマデザイナーを使用することで、コードを書かなくてもかんたんにデザインを変えることができます。
全体の背景、文字の色、タイトルの色などの大まかな部分はもちろん、ハンバーガーメニューアイコンなどの細かい部分まで設定できます。
また、Orange ZELOには吹き出し機能や効果的な引用デザインなどが設定されており、これらもテーマデザイナーで変更が行えます。
テーマデザイナーの使い方については、こちらの記事にまとめました。
>>【Blogger】テーマデザイナーの機能・使い方を徹底解説！
また、これらもテーマデザイナーでかんたんに色を変えることができます。
テーマデザイナーについては、一つ前の項目をご覧ください。
上部のナビバーはページをスクロールしても上部に固定されるようになっており、サイトの回遊率を大きく上げることができます。
もし固定するのが気に入らない場合、固定を解除してスクロールに合わせることもできます。詳しくはこちらをご覧ください。
また、サイトTOPの『注目の投稿ウィジット』にはまとめ記事を設定したり、最新の投稿を大きく表示するためにもお使いいただけます。
Bloggerにない関連ポスト機能を補うため、各記事の一番下には人気の投稿ウィジットを設置しました。
サイドバーは、TOPページと記事ページで別のウィジットを設定できるようになっています。
全体の背景、文字の色、タイトルの色などの大まかな部分はもちろん、ハンバーガーメニューアイコンなどの細かい部分まで設定できます。
また、Orange ZELOには吹き出し機能や効果的な引用デザインなどが設定されており、これらもテーマデザイナーで変更が行えます。
テーマデザイナーの使い方については、こちらの記事にまとめました。
>>【Blogger】テーマデザイナーの機能・使い方を徹底解説！
ライティングを加速する機能
通常Bloggerで記事を書く場合、吹き出しやボタンなどは設定されておらず、使うには自分で細かい設定が必要でした。
Orange ZELOでは吹き出し機能やボタンの設定があらかじめされており、簡単に使うことができます。
吹き出しのデザインです。
吹き出しのデザインです。
吹き出しはこんな感じ！
ボタンのデザインになります。(ボタンの設定に関する記事が開きます)
また、これらもテーマデザイナーでかんたんに色を変えることができます。
テーマデザイナーについては、一つ前の項目をご覧ください。
最適なアドセンス配置
指定の場所にアドセンスコードをコピペしていただくだけで、本文初めのh2見出し上、本文の最後にアドセンスを配置できます。
これは外部プラグインの読み込みをせずに実装したスクリプトで、ZELOにも導入していました。
Orange ZELOではさらに読み込みを早くするために、このスクリプトをテーマの最適な位置に配置しています。
また、サイドバーにもHTMLウィジットを利用することで、かんたんに設置することができます。
これは外部プラグインの読み込みをせずに実装したスクリプトで、ZELOにも導入していました。
Orange ZELOではさらに読み込みを早くするために、このスクリプトをテーマの最適な位置に配置しています。
また、サイドバーにもHTMLウィジットを利用することで、かんたんに設置することができます。
優れた機能のウィジット
Orange ZELOには、独自の優れた機能のウィジットがたくさんあります。上部のナビバーはページをスクロールしても上部に固定されるようになっており、サイトの回遊率を大きく上げることができます。
もし固定するのが気に入らない場合、固定を解除してスクロールに合わせることもできます。詳しくはこちらをご覧ください。
また、サイトTOPの『注目の投稿ウィジット』にはまとめ記事を設定したり、最新の投稿を大きく表示するためにもお使いいただけます。
Bloggerにない関連ポスト機能を補うため、各記事の一番下には人気の投稿ウィジットを設置しました。
サイドバーは、TOPページと記事ページで別のウィジットを設定できるようになっています。
最新のBloggerバージョン
残念ながら、現在日本で使われているBloggerテーマの多くは１つ前のBloggerバージョンを使用しています。
2017年に新しく4種の公式テーマが追加されたことは有名ですが、実はその際にBloggerのバージョンも変化していて、あの4種はそれに対応するものです。
詳しいことは別の記事で書きますが、最新バージョンはSEOを意識されたものであり、より効率よくBloggerを使えるようになっています。
Orange ZELOではさらにBloggerを使いやすくするため、SEOに強くするために、この最新バージョンを取り入れています。
*追記：Bloggerの最新バージョンについて、こちらの記事をご覧ください。
>>Bloggerテーマのバージョンによる違い【機能・特徴】
2017年に新しく4種の公式テーマが追加されたことは有名ですが、実はその際にBloggerのバージョンも変化していて、あの4種はそれに対応するものです。
詳しいことは別の記事で書きますが、最新バージョンはSEOを意識されたものであり、より効率よくBloggerを使えるようになっています。
Orange ZELOではさらにBloggerを使いやすくするため、SEOに強くするために、この最新バージョンを取り入れています。
*追記：Bloggerの最新バージョンについて、こちらの記事をご覧ください。
>>Bloggerテーマのバージョンによる違い【機能・特徴】
今後の予定
Orange ZELOの今後としては、目次機能を実装する予定です。まだ確定ではありませんが、進捗があればこちらに追記します。
*追記(9/19)：
自動の目次機能を実装しました。詳しくはこちらの記事をご覧ください。
>>自動目次機能を追加しました！【Orange ZELO】
Orange ZELOの機能・特徴について、ご覧いただきありがとうございました。
ダウンロードについてはこちらをご覧下さい。
コメント