新しいデザイン
ちなみに以下がこれまでのデザインです。
古いデザイン
比較すれば一目瞭然、ずいぶんとスッキリしたデザインになりました。
見た目だけでなく、レスポンシブといって、これまでPCとモバイルで別々になっていたURLが統一され、表示スピードも劇的に改善しました。
１．Bloggerについて
BloggerはGoogleが提供する無料ブログサービスですが、アメブロやlivedoorブログ、FC2、はてなブログなど他の無料サービスに比べると知名度も利用度も今一つです。
多くのユーザーは世界中で圧倒的なシェアを誇るWordpressを利用していますが、Wordpressは有料サービスです。ブログシステムが無料で配布され、自分でサーバーにインストールするタイプと、ブログをレンタルするタイプがあります。
一方、Bloggerには他のサービスにはない、強制広告が一切つかないという絶大なメリットがあります。さらに、広告収入を狙うためのGoogleアドセンスを無料で導入できる唯一のブログサービスです。
そんなBloggerですが、選択できるテーマがどれも今一つで、特にモバイル向けのページの見た目や使い勝手や良くなかったのが最大の難点でした。
つまり、Bloggerで作ったブログはデスクトップで見るのとスマホで見るのとで、URLが変わるという不都合な仕様になっているのです。
PC向け：「http://blog.masayukikawate.com/」
モバイル向け：「http://blog.masayukikawate.com/?m=1」
同じ記事なのに２つのURLがあるというのは、SEO的にはあまり宜しくない状態です。
「モニオの部屋」も、デフォルトのテーマに「ブログカードの導入」や「関連記事の追加」などカスタマイズして、使い勝手を向上させていたのですが、さすがに限界に達していた感があります。
２．Prime ZELOとは
Prime ZELOは、ヒロさんという開発者が作った有料のテーマです。シンプルなレスポンシブ配置と、読み込みが早い（爆速）のが特徴です。
2018年9月に誕生したテーマで、開発者ヒロさんのサイトで3,000円で販売されています。
以下は導入における備忘録と注意点です。
３．事前準備
Prime ZELOはダウンロード販売なので、まずはサイトで支払い手続きを済ませて『Prime_ZELO.xml』と『Reset.xml』の２つのxmlファイルをダウンロードします。
そのあとの手順は、作者のサイト「【Orange ZELO】導入チュートリアル・ウィジットの設定」に詳しく載っています（OrangeをPrimeを読み替えます）。
手順に進む前に念のために事前に現在のブログのバックアップを取っておくことが望ましいです。
ブログのバックアップは、テンプレートと記事の両方のバックアップが必要です（写真や動画は含まれません）。
テンプレートのバックアップは、Bloggerの管理画面から『テーマ』へ移動し、右上の『バックアップ/復元』を選択します。
テンプレートのバックアップ
記事のバックアップは、Bloggerの管理画面から『設定』＞『その他』へ移動し、右上の『コンテンツのバックアップ』を選択します。
コンテンツのバックアップ
さらに慎重に導入を進めたい場合は、テストサイトを作って、まずそこで試してみるのが良いと思いますが、私はテストサイトは作らずに一気に導入しました。
４．ウィジッドの設定（投稿日の表示）
『Prime_ZELO.xml』のアップロードが完了したら、Prime ZELOのテーマがブログに新しく適用されるので、次はウィジッドの設定を行います。
『メインページの投稿数』はデフォルトで６となっています。
メインページの投稿数
ブログのデザインに合わせて調整することができます。
ここで問題が発生。
なぜか、トップページで２つの記事しか表示されません。数字をいろいろ操作しても減ることはあっても２つから増やせないのです。
記事が２つしか表示されない
結論から書くと、『追記の区切りを挿入』を記事に挿入していなかったため、1ページあたり1MB以上のコンテンツを読み込めないというBloggerの仕様に引っ掛かっているのが原因とわかりました。
追記の区切りを挿入
私の記事は長いものが多く、写真や動画も豊富に貼り付けているものが多いので、ブログ記事２つ分で1MBに達してそれ以上表示できなかったというわけです。
この問題は、作者のヒロさんも「トップページの記事数が減る場合の原因と対策【Blogger】」で記事にしています。
少々面倒でしたが、過去のすべての記事に、『追記の区切りを挿入』を入れて解決しました。
次は投稿日の表示です。
投稿日を表示するためには、Bloggerの管理画面から、『レイアウト』を選んで、『メイン』の『ブログの投稿』の設定画面（鉛筆のアイコンをクリック）から、『投稿ページのオプション』の上から3番目（赤の囲み部分）を選択します。
投稿日の設定
ここで注意ですが、『投稿ページのオプション』の上から1番目にも日付が表示されています。ここにマウスを合わせると「この機能は現在のテーマには適用できません」と表示されますが、これは気にせず無視してください。設定するのはあくまで上から3番目のオプションです。
オプションのポップアップ画面を下にスクロールすると、『アイテムの並べ替え』というセクションがあり、各項目を並び替えることができるので、「日付」と「タグ」の項目はタイトルの下に移動します。
また、デフォルトで表示される『注目の記事』と『人気の記事』はオフにしました。
５．ラベルの表示
次にラベル（タグ）の表示です。
作者のページ「TOPの記事にラベルを表示する方法」にラベル追加の手順の説明があります。
HTMLへのコード追加と、CSS追加の両方が必要です。やや手間がかかりますが、問題なく表示されるようになりました。
６．ナビメニューのカスタマイズ
デフォルトのナビメニューでは、Homeしかないので、メニューを追加します。
『トップナビ』の『ナビメニュー』から、設定画面で、『外部リンクを追加』をクリックして、適宜URLを追加します。
ナビメニューの追加
メニューのカラーやフォントなどは、Bloggerの管理画面から『テーマ』へ移動し『カスタマイズ』を選ぶといろいろとカスタマイズができます。
ヘッダーのカスタマイズ
デフォルトの青色はやや薄く、背景の白抜きの文字が目立たないので、私は濃い青に変更しています。
ナビメニューには、『お問い合わせ』を追加すると便利です。ちなみにパーマリンクの関係から『Contact』と英語表記するのが正しいようです。
お問い合わせフォームの作成は、「Bloggerにgoogleフォームでお問い合わせページを設置する」の記事を参考にしました。
Googleフォームというツール（無料）を使います。
７．文字間の変更
デフォルトの文字間がやや広すぎる感じなので、「Blogger用テーマ「ZELO」を導入した感想＆カスタマイズ」の記事を参考に、文字間を若干狭くして調整しました。具体的には、HTMLのコードのなかで、[Ctrl]+[F]を押して「letter-spacing」で検索をかけると2か所見つかります。最初のものがPC版、2番目のがモバイル版です。
どちらもletter-spacing を 1.5pxから0.5px に変更しました。
８．関連記事、ブログカードなど
最後の仕上げとして、以前のHTMLに埋め込まれていた必要なコードを付加します。私の場合は、・記事の最後に関連記事を掲載するコード（ウィジッド追加）
・アナリティクスのイベント測定用のコード
以上で、Prime ZELOのテーマへの移行は完了です。
9．改善された点
デザインがシンプルになり、読み込み速度も大幅にアップしたことと、何と言ってもPCとモバイルで同じURLに統一されたレスポンシブデザインになったのは大きな進歩です。
また、ナビメニューに「トライアスロン」「ロードバイク」など主要なラベルを配置できるようになったのも大きいです。
それ以外にも、見出しタグに合わせて目次が自動的に生成されるようになったのは、読みやすさという点では大きな改善点です。
目次が自動生成
10．困ったこと
逆に、困った点としては、ホーム画面での投稿数が2つしか表示されないという問題でしたが、これは何とかクリア。
投稿日も初めはウィジッドの設定を勘違いして、なかなか表示されなかったのですが、（実は開発者の方に質問して教えていただき）こちらも無事クリアしました。
しかし、以前使っていたMilliardのブログカードが、なぜか、画像が表示されない状況となってしまいました。致命的ではないのですが、ちょっと見た目が悪いので何とかしたいと思っています。
（追記：独自ドメインに変更をかけた後にチェックしたところ、なぜかブログカードの画面非表示の問題は解決されていました、なぜだろう。。。）
アーカイブのウィジッド設定で、カスケード表示やブログタイトル表示をオンにしても、なぜか、カスケード表示もタイトル表示もされないという問題があります。
アーカイブは正直アクセスも少ないので、これはそのまま放置でも良いかと思っています。
以上、Prime ZELOを導入したブログのデザインについてでした。
正直、これだけの豊富な機能を備えているのであれば、3,000円は十分に元が取れるのではと思います。
実際、Prime ZELOを導入して以来、その効果はSEOにてきめんに現れました。
以下はSearch Consoleの検索パフォーマンスの推移ですが、Prime ZELOを導入したのが4月13日でしたが、検索数が急激にアップしているのがわかります。
Search Consoleのデータ
Prime ZELOは大変おススメのテーマです。Bloggerでテーマ変更をお考えの方は是非検討してみてください。
コメント