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

これらの詳細を順番に説明していきます。

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

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

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

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

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

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

上記のコードのPrime ZELOのテンプレート内に貼る場所を探すのに苦戦しましたが下記のすぐ上に貼ったらうまく動作しました。

テスト環境ではPCではうまく表示できるのに、スマホではうまく表示できずに諦めていましたが、本番環境ではスマホでも問題なく表示されています。（なんなんでしょう・・・）

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

https://turaturablog.blogspot.com/2018/06/blogger_22.html

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

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

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以外のブラウザではサイドバーの固定・追従ができるようになりました。

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

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

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ここまで*****/
/*--------------------------------------*/

次も単純な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/ 

次は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/>

本番環境への適用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

やっておいた方がいいと思うチェックとしては下記があります。

• 各種ブラウザでの表示チェック
• 各種デバイスでのチェック

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

• Chrome
• Safari
• Firefox
• IE
• Edge