爆速?!BloggerのテンプレートのPrime ZELOへの移行とカスタマイズ記録





最近はブログの表示スピードが遅いのが悩みでした。

またBloggerは無料で多機能な反面、日本語環境の場合選べるテンプレートが少ないのが弱点でしたが、「Prime ZELO」という爆速のテンプレートが誕生したのでテンプレートを入れ替えてみました。


まだまだ公開したばかりなのでその効果のほどはしばらく様子を見る必要がありますが、この記事では、同じくBloggerユーザーで、ページの速度が気になっている方・Prime ZELOを使おうと思っている方のために、実際に私が実施したカスタマイズや移行に際して苦労した点を紹介したいと思います。


爆速?!BloggerのテンプレートのPrime ZELOに変更しました


前から気になっていたページの読み込み速度ですが、Bloggerユーザーの間でPrime ZELOが話題になっていたので、ページ速度アップのために変更してみました。

Prime ZELOについて

これまではVaster2という、日本人Bloggerユーザーの間では有名なテンプレートを使っていました。

Bloggerは日本ではマイナーなブログサービスでネット上の情報は少ないですが、Vaster2に関しては、それなりに情報を見つけることができたので、Web初心者の私でもなんとかカスタマイズできていました。

しかし、ページの表示速度が遅く、現在はページのコンテンツ表示速度が検索順位にも大きく影響を及ぼしてくるということだったので、なんとか高速化を図りたいと思っていました。

できる限りの事はやってきましたが、限界が見えてきたとき、2018年に誕生した「ZELOシリーズ」の最新版「Prime ZELO」が爆速だと評判だったので試して見ることにしました。

作者の方のブログはこちらです。
【Prime ZELO】爆速のBloggerテーマの機能・特徴紹介ページ

注)Prime ZELOは有料のテンプレートです。

まずは、事前準備としてテストサイトで色々試してから本番サイトへ適用しました。

事前準備

テンプレート移行に向けて、事前準備としては下記を実施しました。
  • Prime ZELOの購入&ダウンロード
  • Bloggerでテストサイトの開設
  • テストサイトに本番と同じ環境を準備
  • Prime ZELOを適用してカスタマイズを実施
これらの詳細を順番に説明していきます。

Pimze ZELOの購入&ダウンロード

Prime ZELOは有料テンプレートです。

私が購入した時は3,000円でした。自分では絶対に作れない代物なので3,000円なら高くはないですよね。

先ほど、紹介した作者の方のページからPaymoというサイトに飛んで、お金を払うのですが、初めて使うサイトだったので恐る恐る決済してみましたが、無事ダウンロードできました。

Bloggerでテストサイトの開設

次に、テストサイトを準備します。

いきなり本番環境に適用するのはリスキーすぎるので、テストサイトで納得いくまで色々実験して見ることにしました。

Bloggerは、同じアカウントで100個まで簡単にブログを開設することができます。

すでに、いくつかテストサイトを持っていましたが、今回新たに作成しました。

似たようなタイトルにするとわけ分からなくなるので先頭に[TEST]とか付けておくと本番環境と簡単に識別できていいと思います。

テストサイトに本番と同じ環境を準備

次はテストサイトに本番環境のコンテンツをインポートします。

本番ブログのコンテンツを全て出力して新しいブログにインポートします。

コンテンツのインポート&エクスポートはBloggerの管理画面の[設定]→[その他]から行えます。


本番ブログではコンテンツバックアップボタンを押してXMLファイルをダウンロードしてください、テストサイトではそのバックアップしたXMLファイルをインポートしてください。

この時に、問題が発生しました。

新たにインポートしたテストブログのトップページなどの表示記事数が、指定している記事数より圧倒的に少ないのです。

この原因は"more"タグがインポートされてないことにありました。

Bloggerの仕様でトップページに表示できるコンテンツの容量が限られているのですが"more"タグを指定しておくと、moreタグの部分までがその記事のコンテンツ容量として判定されるようです。

私の場合は、Vaster2時代にmoreタグをアドセンスと目次の表示用に使っていたので、全ての記事に付けているのに、テストブログにインポートしたタイミングでmoreタグが無くなっていました。

その結果として、1ページに表示できる記事数が少ないという自体が発生していました。

ちなみにmoreタグはBloggerの投稿エディタの下記の赤枠部分で記事に挿入できます。


この問題は、本番環境側の記事にはmoreタグが付いている状態なので問題ないと判断して無視することにしましたが、テストサイト側でもテストの途中でサイトの見た目を確認するために、数記事だけmoreタグを追加しました。

Prime ZELOを適用してカスタマイズを実施

次は、いよいよPrime ZELOをテストサイトに適用します。

その際に、なるほどと思ったのが、Prime ZELOを購入してダウンロードする際にRest.xmlが付いており、一旦そちらを適用して、次に不要な部分を削除してからテンプレートを適用することで綺麗な形でテンプレートを適用することができます。

導入方法は下記の作者の方のページを参考にしました。

こちらのページは同じくZELOシリーズの「Orange ZELO導入ページ」ですが私が使っているPrime ZELOでも同様の手順でOKです。

【Orange ZELO】導入チュートリアル・ウィジットの設定

テスト環境が整ったらカスタマイズのテストを実施していきます。

Prime ZELOをベースに実施したカスタマイズ内容

今回、移行するにあたりPrime ZELOをカスタマイズした点は以下です。
  • 記事の最終更新日時を記事の先頭に追加
  • お問い合わせページの追加
  • Topに戻るボタンを追加
  • 自動目次の微修正(h3タグメインに)
  • サイドバーの固定
  • 会話吹き出し(以前から使っていた分のCSSで体裁を整える)
  • 横に長い表をスクロールできるようにCSSを追加
  • トップページの記事表示枠をauto設定に
  • ブログの検索結果の表示時のセパレーターを"-"から"|"に変更
青字の部分は必須で対応が必要と思っていた箇所で、上記の対応が完了すれば本番環境に適用しようと考えていました。

最終的にはここに記載している内容に関しては、一部妥協している部分はありますが一通り対応したので公開に踏み切りました。

私はWebに関してはど素人なので、完全に手探りの状態でカスタマイズを実施しているので、間違っていることも多いかと思いますので、ここに記載している内容は参考程度にお考えください。

とりあえず、あたりを付けて適当にいじっては動作を確認して、ダメなら戻すということを繰り返してます。

記事の最終更新日時を記事の先頭に表示

記事の公開日時はPrime ZELOでもデフォルトで表示ができるようになっていますが、自分が調べ物をする際に重視するのが、その記事がいつ公開又は更新されたものであるかということです。

というのも、変化の早い昨今、情報の鮮度は重要なので私のブログも過去の記事は積極的に更新するようにしています。

情報の鮮度を判断する材料の一つに「最終更新日時」があります。

一番いいのは、検索結果に表示される日付が最終更新日時であるのがベストですがそこの部分の制御は難しそうなので、せめて記事のトップに最終更新日時を表示する必要があると思っています。

今回はVaster2時代に使っていたコードをそのままコピペして利用しました。

<!-- 更新日時の表示 -->
<span class='post-timestamp'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span id='last-modified'><!-- ここに表示される --></span>
<script type='text/javascript'>
// <![CDATA[
function show_last_modified(root) {
  var published="";
  var updated="";
 for (var i = 0; i < root.feed.entry.length; i++) {
    published = root.feed.entry[i].published.$t;
    updated= root.feed.entry[i].updated.$t;
  }
  var dd_Y = updated.substring(0,4);
  var dd_M = updated.substring(5,7);
  var dd_D = updated.substring(8,10);
  var pp_Y = published.substring(0,4);
  var pp_M = published.substring(5,7);
  var pp_D = published.substring(8,10);
  if(dd_Y == pp_Y && dd_M == pp_M && dd_D == pp_D){
    //日付が同じときは出力しない
  }else{
    var updated_dd ="最終更新日:"+ dd_Y+"/"+dd_M+"/"+dd_D+"";
 document.getElementById("last-modified").innerHTML = updated_dd;
  }
}
//]]>
</script>
<script type='text/javascript'>
  var sHome=&quot;<data:blog.homepageUrl/>&quot;;
  var sURL=&quot;<data:post.url/>&quot;;
  sURL = sURL.replace(sHome, &quot;&quot;);
  sURL = &quot;/&quot; + sURL;
document.write(unescape(&quot;%3Cscript&quot;)+&quot; src=&#39;&quot;+sHome+&quot;/atom.xml?redirect=false&amp;path=&quot;+sURL+&quot;&amp;max-results=1&amp;alt=json-in-script&amp;callback=show_last_modified&#39; type=&#39;text/javascript&#39;&quot;+unescape(&quot;%3E%3C/script%3E&quot;));
</script>
</b:if>
</span>
<!-- 更新日時の表示ここまで -->
上記のコードのPrime ZELOのテンプレート内に貼る場所を探すのに苦戦しましたが下記のすぐ上に貼ったらうまく動作しました。
  <b:else/>
  <h2 class='post-title entry-title'>
テスト環境ではPCではうまく表示できるのに、スマホではうまく表示できずに諦めていましたが、本番環境ではスマホでも問題なく表示されています。(なんなんでしょう・・・)


いまは試してみたいことがあり更新日時のみ表示しています。そのせいでTopページは日付が表示されていません。(ついでに"最終更新日"というのを短くして"更新日"にしました。)


ちなみに、最終更新日の表示については下記のブログを参考にしました。

お問い合わせページの追加

以前から追加していたお問い合わせページですが、結構読者の方から問い合わせをもらって貴重な情報をもらったり、企業からの売り込みやPRのお願いがきます。

私は自分の紹介したいものしかブログに書かないというスタンスのもと、基本的にはレビューや特定製品やサービスのPRはお願いされても書かないようにしているので、企業からの問い合わせでビジネスに発展したことはありませんが、そういったありがたい問い合わせが来るのも問い合わせフォームを設置しているからこそです。

テンプレート一新に合わせて、見た目がカッコイイGoogleフォームに変更しました。



結構イイ感じにできたと思います。

リンクは上部のナビゲーションバーに「Contact」として追加しています。

こちらもPrime ZELOの作者の方のブログを参考にしました。

Topに戻るボタンの追加

次にページをスクロールダウンしていった際のトップに戻るボタンの追加についてです。

以前のテンプレートでも使っていたのでそちらを流用しようと思いましたが、同じくPrime ZELOを使っている下記の方のブログを参考にして簡単に追加できました。

自動目次の微修正(h3タグメインに)

次は記事の目次についてです。

このブログはできるだけきちんと伝えるために、細かく書くことが多く、長文になることが多いため整理するためにも目次は必須です。

Prime ZELOはデフォルトで目次が表示されるようになっていますが、h2タグを拾って目次化されるようになっています。

表示場所は最初のh2タグのすぐ上です。

このブログでは、これまでh2タグは大見出し、h3タグは小見出しとして使ってきていて、h2タグは記事中に1回か2回くらいしか使用しておらず、いわゆる章としての役割はh3タグが担っていました。

そのため、できるなら下記のようにh2タグとh3タグ、そしてh4タグも含めた組み合わせの目次にするのが目標でした。

[やりたかった目次のイメージ] ※折りたためれば最高ですが・・・
  • h2タグ
    • h3タグ
      • h4タグ
      • h4タグ
    • h3タグ
    • h3タグ
      • h4タグ
    • h3タグ
  • h2タグ
    • h3タグ
最初は以前使っていた目次をそのまま移植しようとしましたが、悪戦苦闘の末にうまくいかずに断念しました。。

代わりに、Prime ZELOの目次を少し変えて「h3タグ」のみの目次をつけることにしました。

そのままPrime ZELOのコードを最小限変更しただけなので、表示場所はh3タグの真上です。

修正はレイアウトの目次ガジェットの中の記述を変更します。


修正したのは下記の場所です。

[修正前]
var titles = kiji.getElementsByTagName("h2"); 

このh2をh3に変更するだけです。

[修正後]
var titles = kiji.getElementsByTagName("h3");  
そしてもう一つ、目次に番号を付けたかったので下記の場所を修正しました。

[修正前]
ul = document.createElement("ul"); 
[修正後]
ul = document.createElement("ol"); 
"ul"を"ol"の番号付きリストに変更しました。

本来はulという変数名もolに変えた方が良さそうですが、面倒なので最小限の修正にとどめています。

下記のような目次が出来上がりました。



目次に関しては妥協していますが、以前のものよりスッキリしてよかったのかなと思っています。

しかし、私のブログの場合、h2タグが一つの記事の中で2回出現することが多いので2番目のh2タグが表示されないのは残念なところです。

かといって、hタグの見直しは大変&SEO的にも影響が大きそうなのでしばらくはこの状態で様子見をしたいと思います。

SEO的にも影響が大きいというのは、このh2とかh3の箇所で検索結果に表示されていることが多々あるため、あまり変更するとよくないのかなと考えています。

サイドバーの固定

次はサイドバーの固定です。

一番最近施したカスタマイズで、PCブラウザで表示した際にサイドバーが特定の場所で固定されて追従してくるアレです。

以前のコードと同じ対応をしましたが、後述のIEの問題があったので、対応を考えている方は、後述の「IEでサイドバーの表示が乱れる」も併せてご参照ください。

具体的には、下記の場所を変更しています。

.post-outer-containerに /* 固定・追従コンテンツ用 */という記述がある3行追記しています。
    .post-outer-container {  /* ブログ各記事 */
    padding: 8px 24px;
    background-color: $(pc.post.color);
    -webkit-box-flex: 1; /* 固定・追従コンテンツ用 */
     -ms-flex: 1; /* 固定・追従コンテンツ用 */
    flex: 1; /* 固定・追従コンテンツ用 */
    }
もう一箇所、サイドバーの「aside」にも下記の3行を追記しています。
    aside {
    width: 310px;
    max-width: 100%;
    display: -webkit-box; /* 固定・追従コンテンツ用 */
    display: -ms-flexbox; /* 固定・追従コンテンツ用 */
    display: flex; /* 固定・追従コンテンツ用 */
    }
widthは310pxとしていますが、デフォルトは296pxでちょっと狭く感じたので少しだけ広くしています。

この対応で、IE以外のブラウザではサイドバーの固定・追従ができるようになりました。

サイドバーの固定・追従は下記のブログを参考にさせて頂きました。

[Vaster2] サイドバー(のガジェット)を固定・追従させました。[Blogger]

会話吹き出し(以前から使っていた分のCSSで体裁を整える)

次に会話の吹き出しです。

Prime ZELOはデフォルトで会話の吹き出し機能が備わっていますが、Vaster2時代に使っていた会話吹き出しの体裁を整えるために下記のCSSを追記しています。
/*--------------------------------------*/
/*****会話のCSSここから*****/
.talk-wrap{
 display: block; clear: both; margin:0 auto 3px auto; }
.talk-wrap p{
 margin:0; }
 .left-icon{
 width: 100px; height: 100px; border-radius: 50%; -webkit-border-radius: 50%; background: no-repeat; background-size: 140%; background-position: center; float:left; display:inline-block; box-shadow: 1px 1px 5px #aaa; border: 3px solid #fff; margin-bottom: 10px; }
 .talk-left{
 float:right; position: relative; background: #fff; border: 2px solid #666; padding: 3%; border-radius: 10px; width: 70%; margin-top:10px; box-shadow: 1px 1px 5px #aaa; margin-bottom: 10px; }
.talk-left:before {
 content: ""; display: inline-block; border: 10px solid transparent; border-right-color: #666; position: absolute; left: -20px; top: 25%; margin-top: -9px;}
.talk-left:after {
 content: ""; display: inline-block; border: 9px solid transparent; border-right-color: #fff; position: absolute; left: -16px; top: 25%; margin-top: -8px;}
 .right-icon{
 width: 100px; height: 100px; border-radius: 50%; -webkit-border-radius:50%; background: no-repeat; background-size: contain; background-position: center; float:right; display:inline-block; box-shadow: 1px 1px 5px #aaa; border: 3px solid #FFF; margin-bottom: 10px; }
 .talk-right{
 float:left; position: relative; background: #fff; border: 2px solid #666; padding: 3%; border-radius: 10px; width: 70%; margin-top:10px; box-shadow: 1px 1px 5px #aaa; margin-bottom:10px; }
 .talk-right:before {
 content: ""; display: inline-block; border: 10px solid transparent; border-left-color: #666; position: absolute; right: -20px; top: 25%; margin-top: -9px;}
.talk-right:after {
 content: ""; display: inline-block; border: 9px solid transparent; border-left-color: #fff; position: absolute; right: -16px; top: 25%; margin-top: -8px;}
.talk-end{
 clear:both;}
/*****レスポンシブ設定*****/
@media screen and (max-width: 480px){
 .left-icon{
 width: 80px; height: 80px; }
 .talk-left{
 width: 65%; }
 .right-icon{
 width: 80px; height: 80px; }
 .talk-right{
 width: 65%; }
 }
 @media screen and (max-width: 380px){
 .left-icon{
 width: 60px; height: 60px; }
 .talk-left{
 width: 65%; }
 .right-icon{
 width: 60px; height: 60px; }
 .talk-right{
 width: 65%; }
 }
/*****会話のCSSここまで*****/
/*--------------------------------------*/

会話の吹き出しは下記の記事を参考にさせてもらいました。
Bloggerで使える「吹き出し」で会話形式の記事を書く方法

横に長い表をスクロールできるようにCSSを追加

次も単純なCSSの追加だけですが、以前から横に長い表を挿入する際に記事の中で表をスクロールできるようにしていました。

そのスクロール機能を活かすために下記のCSSを追加しています。
.scroll{
overflow: auto; /*tableをスクロールさせる*/
white-space: nowrap; /*tableのセル内にある文字の折り返しを禁止*/
}
.scroll::-webkit-scrollbar{ /*tableにスクロールバーを追加*/
height: 5px;
}
.scroll::-webkit-scrollbar-track{ /*tableにスクロールバーを追加*/
background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb { /*tableにスクロールバーを追加*/
background: #BCBCBC ;
}
表のスクロールについては、下記の記事を参考にしています。

https://webcommu.net/phone-table-scroll/ 

トップページの記事表示枠をauto設定に

次はTopページの記事の表示枠の自動調整です。


上記の赤線部分の枠を自動調整するように修正しました。

そこを修正しないとタイトルが長い場合や、トップの記事紹介の部分にタグや日付を追加するとはみ出してしまっていました。

修正は「.top-desc」を下記の通り変更しました。

[修正前]
    .top-desc {
    display: block;
    margin-left: 300px;
    height: 196px;
    }
[修正後]
.top-desc {
display: block;
margin-left: 300px;
min-height: 196px;
height: auto !important;
height: 196px;
 }
上記の通り、heightにmin設定を加えてautoに設定しています。

こうすることで、最低196pxの高さが確保されてタイトルが短い場合でもアイキャッチ画像が枠からはみ出さなくなります。(IEではちょっとはみ出しているような・・・、とりあえず気にしないことにします。。。)

こちらは手探りで適当に対応したのであっているかどうかわかりませんが、スマホもPCページもはみ出すことはなくなりました。

ブログの検索結果の表示時のセパレーターを"-"から"|"に

そして最後は、検索結果に表示された際にPrime ZELOでは「"記事名" - "ブログタイトル"」として表示されますが、この記事名とブログタイトルの間の記号を「-」から「|」に変更しました。

というのも、Vaster2がそうだったのでそこからの変更を避けたかっただけですが、結局Vaster2時代は”|”に前後にスペースがなかったのですがPrime ZELOではスペースが入っているのに気づかずスペースは入れたままだったので変化点になってしまいました。

あまりカスタマイズした意味がなかったかもしれません。。

変更は下記を修正しました。

[修正前]
<data:blog.pageName/> - <data:blog.title/>
[修正後]
<data:blog.pageName/> | <data:blog.title/>

本番環境への適用

ここまでをテスト環境で対応してテストを実施しました。

これを本番環境に適用するわけですが、本番環境への適用はレイアウト含めてFIXしたテストサイトのテンプレートをダウンロードして、それを本番環境に適用しますが、先ほど紹介した下記の手順と同じ要領でOKです。

【Orange ZELO】導入チュートリアル・ウィジットの設定

違いは、Prime ZELOのオリジナルのテンプレートを使うのではなく、自分なりにカスタマイズして、先ほどダウンロードしたPrime ZELO(改)のテンプレートを適用します。

新しいテンプレートを適用する前に本番サイトのXMLのバックアップを取るのを忘れないでください!!

うまくいかなかった場合には、Prime ZELOを適用するのと同じように、一旦Rest.xmlでリセットしてから、以前のXMLのバックアップから元どおりに戻せます。

私は、もう一つテストサイトを作って、シミュレーションしてから本番サイトに適用したので、移行時間は30秒ほどでほぼダウンタイムなく完了しました。

といって、そのタイミングでアクセスしてくれた方は一瞬何が起こったかわからないような状態になったと思われます。

公開後に発覚したバグ・修正方法

無事に公開したわけですが、翌日にいくつかバグが発覚して修正しました。

発覚したバグは下記の通りです。
  • IEでサイドバーの表示が乱れる
  • iPadで上部に変なスペースが開いてしまいナビバーがずれて固定される
  • アクセス数が激減?!

IEでサイドバーの表示が乱れる

IE(Internet Explorer)でサイドバーが折り返しされずに表示されており、IEでページを開くと横のスクロールバーが出てしまっている状態でした。

記事自体は問題なく表示されているので読めるんですが、表示の汚いブログなんて嫌ですよね。

問題を調査した結果、「サイドバーの固定」で追加したコードが悪さをしていることがわかりました。

そのためサイドバーのスタイル設定のところに下記のコードを追記しました。

_:-ms-lang(x), aside { display:block; /*  IE対策に追加 */ }
これは、通常はサイドバーを固定するために「display: flex;」というものをスタイル設定に追記していますが、IEとEdgeの場合のみ設定をblockにして下さいという意味になります。

ちなみに、この記述がないとEdgeでもサイドバーの固定はうまく動作していましたが、この記述を追加することでEdgeでサイドバーの固定は動作しなくなりましたが、IEでの表示の問題は解消されました。

IEとEdgeでは、IEの方がまだまだユーザーは多いのでIE優先で対応します。

これで、IEでもサイドバーの固定はできないものの表示が崩れることはなくなりました。

もっとうまいやり方はありそうですが、現時点ではこの状態にしておきます。

iPadで上部に変なスペースが開いてしまいナビバーがずれて固定される

次に発覚したのは、iPadで移行後のページを開いてみるとページ上部にスペースができてしまい、ナビゲーションバーがずれているため、スクロールするとナビゲーションバーが中途半端に表示されている状態になってしまいました。

この問題は、テスト環境では発生しないので困りましたが、しばらく待っているとこの余白にアドセンスの広告が表示さられていることがわかりました。

しかもなぜかiPadとiPad miniだけ顕著に表示されてしまいます。

本番環境では、アドセンスの自動配置を設定しているんですが、この自動広告が悪さをしていたみたいです。

調べてみるとテキスト広告とディスプレイ広告」をオフにするとヘッダ部分への広告の挿入は無くなるということだったので収益への影響は大きそうですが、見た目重視で一度、テキスト広告とディスプレイ広告はオフ設定にしました。

その後、同様の減少は起こっていないので、とりあえず対策はできたと思っています。

アクセス数が激減?!

最後は、移行した次の日の夜のゴールデンタイム(このブログでは夜の11時ころ)にアナリティクスをチェックしていると、パタリとリアルタイムトラフィックがなくなりました。

以前も、アナリティクスのバグでアナリティクスが更新されないことがあったので、まあ問題ないなと思っていましたが、どうも気になります。

でも、実施に検索キーワードを入れてもきちんと検索結果には出てくるし、アクセスもできます。

なんか妙だなーと思いながら、20分くらいして気づきました。

本番環境の公開設定を限定ユーザーのみに制限してしまっていたのでした。

ちょうど、このタイミングは仕事から帰ってきて、ご飯を食べてIEの問題やiPadの表示の問題を調査して、直していたんですが、この時にテストサイトの公開設定を変更したつもりが、間違って本番サイトの設定を変更してしまっていたのです。

とりあえず、すぐに気づいたのでよかったですが、若干お手上げ状態だったのでかなり焦りました。

なので、テストサイトと本番サイトは間違えないように慎重に切り替えましょう。

反省点・テンプレート移行前チェック

今回の移行に際しての反省点です。

公開後にいくつかの問題が発覚しました。

というのも本番環境移行前にはしっかりと様々な環境でチェックしたのですが夜中に移行したこともあり、移行後のチェックを十分に行っておらず、公開後にいくつか修正が必要になってしまいました。

やっておいた方がいいと思うチェックとしては下記があります。
  • 各種ブラウザでの表示チェック
  • 各種デバイスでのチェック
それ以外にもアドセンスの自動配置が結構色々やらかしてくれてましたw

各種ブラウザでの表示チェック

今は様々なブラウザがありますが、各ブラウザごとに表示のチェックをしておくことをオススメします。本来は、バージョンも関係してくるのですがそこまでやると大変なので、とりあえずは一通り確認しておけば良いと思います。

有名なブラウザとしては下記があります。
  • Chrome
  • Safari
  • Firefox
  • IE
  • Edge
この中で一番厄介なのが昔のマイクロソフトの標準ブラウザIEです。

IEはレガシーな仕様で、IEだけ特別対応が必要なんていうことはしょっちゅうで、IEだけで使えない機能なんかもあります。

感覚的には、ChromeとIEを確認しておけば大半は大丈夫なような気がしますが、以前Firefoxだけで問題が出たこともありました。

IEを切り捨てるというのも一つの選択肢ですが、私のブログの場合アナリティクスで確認するとIEは全体の3番目(7%)のアクセスに利用さているブラウザでまだまだ使っているユーザーが多いことがわかるので軽視することもできません。

私が今回実施したカスタマイズの中でサイドバーの固定はIEでは動作しません。同じくマイクロソフトのEdgeの方は、比較的Chromeよりの動作です。

各種デバイスでのチェック

ブラウザの他に、PCやスマホ、タブレットなど画面サイズの異なるデバイスで動作確認しておく方が良いです。

というのも、Prime ZELOはレスポンシブデザインで画面サイズによって表示を切り替えるようになっており、対応を間違ってしまうとPCではうまく表示されているのに、スマホではうまく表示できていないということも十分にあり得ます。

実際に私も前述の通り、iPadの表示不具合は翌日の夜まで気づきませんでした。

そのため手元にあるデバイスで一通り確認しておいた方がいいと思います。

Prime ZELO移行にかかった日数・時間

移行しようと決めて、調査を始めてから実際に移行するまでは実施2日でした。

休日だったのでテストサイトでも試行錯誤から本番環境への適用まで合計10時間くらいは費やしたと思います。

公開後にもバグを見つけて修正するに2時間くらいは使ったので合計12時間を要したことになります。

つまり、その気になれば丸一日あればできるってことでしょうか。

Prime ZELO移行の効果

一番気になるPrime ZELOに移行した効果を紹介します。

自分のブログにアクセスした際に体感的にはかなり早くなりました。そして、結構ごちゃごちゃしていたサイトデザインがスッキリしたきにいのでよかったと思っています。

そして実際の効果を数値化するためにGoogleの「testmysite」で数値化してみます。


とあるページのパフォーマンスをテストしてみました。


以前は10秒以上でかなり遅いと判定されていたので大きな進歩です!体感的にも実感できているので、期待通りの結果になりました。

一方、最近アルゴリズムが大きく更新されたPageSpeed Insightでも試してみます。

PageSpeed Insights

こちらがモバイルの判定結果です。


散々な結果ですね、、、以前は80以上のスコアでしたがアルゴリズムが変更されて厳しくなったために、その影響をもろに受けています。

今回Prime ZELOに変更してしばらく安泰かと思っていましたが、世の中そんなに甘くなくて日々、精進が必要ということですね・・・

主な指摘は下記の2点でした。

  • オフスクリーン画像の遅延読み込 
  • 次世代フォーマットでの画像の配信

オフスクリーン画像の遅延読み込みはLazy Loadというのを導入すれば対応できるようですが画像インデックスの問題等もあるようなので奥が深そうです。。

もう少しすれば、いろんな対策がネット上にもあがってくると思いますので、しばらくはこのままいきたいと思います。

ちなみに、PCの判定結果は緩くなったようで、かなりスコアは良かったです。


まだ、テンプレートを更新して日が浅いのでなんとも言えませんが、色々いじったせいもあってか、短期的にはアクセス数はそれなりに減ってしまいました。(だいたい20%前後下がりました。)

アドセンスもブログの視認性を重視する配置に変えたせいで、大幅に収益が減少しました。アクセス数の減少も影響していますが、それ以上です。(だいたい、30%くらい下がりましたw)

例えば、プログタイトルに直下に表示していた広告を外したことで、スッキリとした見栄えになり、ページの表示速度も向上しました。

が、これらの悪影響は短期的な影響であって、今回の高速化は長期的にはプラスに働くと考えているのでもうしばらく様子をみて判断したいと思います。

そして、一難去ってまた一難ではないですが、PageSpeed Insightのモバイルスコアが異常に悪いので、改善を図っていきたいと思います。

Prime ZELOへの移行まとめ


今回はBloggerユーザにとっては新しい選択肢となったPrime ZELOへのテンプレートへ移行してみました。

体感的にはかなり軽快になったし、デザイン的にもスッキリしたので気に入っています。

一方で、素人が色々いじったのでボロが出てこないか心配ですが、今回はブログのPV数が過去最高に多かったタイミングでテンプレートの更新を実施しました。

しばらく様子見でも良かったんですが、さらなる飛躍をするためにチャレンジしてみました。

この結果どうなるか、不安ではありますが、しばらく様子をみて今後の対応を決めたいと思っています。

移行はもっと時間がかかるかと思っていましたが、今回紹介させてもらった先人の方達のおかげで比較的サクッと移行を完了することができました。

ありがとうございました。

引き続きリニューアルした「リーマンマイラーの楽しみ方」をよろしくお願いします。

コメント

  1. やまと丸さん
    今日やまと丸さんのリーマンマイラーのブログを発見しました。
    僕もBloggerでブログを書いて収益化したいと思っていたのでとても共感します。

    これから色々と拝見させていただきます。^_^

    返信削除
  2. コマンタレぶ〜様

    共感&コメントありがとうございます。
    Bloggerは無料サービスとしては非常に優れていると思います。

    また、PrimeZeloも良いテンプレートですよ。
    一方で無料のテンプレートVaster2も良いテンプレートでした。

    いずれにしてもブログで収益化はなかなか大変ですが、お互い頑張りましょう!

    返信削除
  3. やまと丸さん
    お返事ありがとうございます。^^

    返信削除
    返信
    1. コマンタレぶ〜様

      わざわざありがとうございます(^-^)

      削除
  4. SNS共有の下辺りに関連コンテンツを挿入したいのですがHTMLのどこに設置すればよいでしょうか?

    返信削除
    返信
    1. コメントありがとうございます。
      私と同じ場所であればと書かれているところに関連コンテンツのコードを貼ればOKです。

      削除
  5. リーマンマイラーさん、こんばんは。
    僕も同じくOrange Zeloを使っていて参考にさせてもらいました。
    いくつか質問があります。もしよろしければ返信いただきたいです。
    ①目次の生成ですが、リーマンマイラーさんはh3タグで作ってらっしゃいましたが、
    h2とh3両方を使う方法はないのでしょうか?あるなら教えていただきたいです。
    ②コメント欄の返信削除が入り乱れてる表示になっているのを見受けられますが僕のブログもそうなっています。直す方法はないのでしょうか?
    プログラミングも詳しくなくコードをいじったもののわからなくて途方に暮れています。もしよろしければ知恵を貸していただきたいです。不躾な質問で申し訳ありません。よろしくお願いします。

    返信削除
    返信
    1. つんまさん

      こんにちは!コメントありがとうございます。

      ①目次の生成について
      今目次は、下記の方のを利用しています。こちらでh2とh3の両方を使っています。
      https://www.sukerou.com/2018/10/blogger-table-of-contents-javascript.html

      ②コメント欄について
      私もおかしい状況に気付いていながらそのまま放置していました。。
      ということで、こちらは特に対策をしておりません。。

      以上、よろしくお願いします。

      削除
  6. 返信ありがとうございます!
    ①目次はデフォルトのでなくスケ朗さんのを使ってるのですね。わかりました。
    ②コメント欄は僕もそのままにしときます。お忙しい中返信ありがとうございました!

    返信削除

コメントを投稿