２０１７年５月２日

Googleから、モバイル端末に優しくないサイトと指摘されて久しいのですが、とりあえずブログからモバイル対応にしようと、最初にWordpressを使っている「きまっし金沢の雑記帖」から始めました。
いろいろとデザイン（themes)を変えて試していると、突然動作しなくなり、ブログも見れないし、管理画面にも入れなくなりました。
半年以上、バックアップを取ってなくて、目の前が真っ暗になりました。
「きまっし金沢の雑記帖」は自分の忘備録として使っていて、ややこしい事は全部「きまっし金沢の雑記帖」に掲載しているのです。「きまっし金沢の雑記帖」が無くなると本当に何もできなくなるので途方にくれました。
可能な限りバックアップをとって、いろんな対処をして頑張ったのですが、半日間ストップしたままでした。

ふと思いついて、themesの最近インストールしたものを全て削除して、今まで使っていたthemesをインストールしたら、復帰しました。慌てて、すべてのデータをバックアップしました。
「きまっし金沢の雑記帖」は随分改造して使っていたので、今まで使っていたthemesの改造前のものをインストールして、極端な改造はやめて、色などのカスタマイズだけにして、なんとかモバイル対応にすることができました。

次はMovableTypeのブログのモバイル対応に着手しました。
こちらのほうは、すんなり移行できました。でも「交通事故被害におけるの賠償請求」だけは移行できません。なんでだろう。

２０１７年５月３日

「交通事故被害におけるの賠償請求」は記事のエクスポートして、FFFTPで全部バックアップをとって、ネット上のデータを全部削除して、新規作成しなおしました。エクスポートした記事をインポートして、記事を公開したら正常に動作しました。

やっぱり細かい点が気になりだして、いくつか改造しました。
満足というほどでもないですが、最低限我慢できる程度のブログになりました。

念のため、スマートフォンで動作を試してみたのですが、スクロールすると、やたらエラー表示されます。
スマートフォンでヤフオクとかでスクロールしても正常に表示されるので、ページ自体に問題があるのか、サーバーが悪いかどちらかです。
サーバーは２年前から少し高いプラン（１年５１４２円）に変更したのですが、掲示板とかブログとかの処理が遅いのは気になっているんです。

２０１７年５月４日

Googleでモバイルフレンドリーテストというのをやっていて、Wordpressの「きまっし金沢の雑記帖」とMovableTypeの「石川の食 美味しいもの食べたい」をテストしました。

MovableTypeの「石川の食 美味しいもの食べたい」は「このページはモバイルフレンドリーです」と評価されましたが、Wordpressの「きまっし金沢の雑記帖」はテキストが小さすぎて読めません、ビューポイントが設定されていません、クリック可能な要素同士が近すぎます　との指摘で、「このページはモバイルフレンドリーではありません」　との評価でした。

「このページはモバイルフレンドリーです」と評価された「石川の食 美味しいもの食べたい」ですがスマートフォンでアクセスするとスクロール時にエラー表示されるし、何回か繰り返すとページ自体が表示されなくなりエラー表示されます。
何か、根本的な対処が必要なようです。

ひょっとしたらと思って、各ページごとのアクセス数とアクセスカウンターに使っているCGIを削除したら正常に動作するようになりました。

しばらくしたら、また表示に不具合が出てきました。Googleの広告を外したら、正常に動作するようになりました。困りました。
Googleの広告を外して各ページごとのアクセス数とアクセスカウンターのCGIを戻したところ問題なく動作しました。諸悪の根源はGoogleの広告だったようです。みんなはどうしているんだろう？

Googleに問い合わせをしてみました。
確認のため、「石川の食 美味しいもの食べたい」だけGoogleの広告を残しておきました。

WordPressの「きまっし金沢の雑記帖」をMovableTypeに移行してみました。
移植した記事の内容について、改行が全く無い状態になっていました。コメントも移植されませんでした。
これでは使えないし、手作業で修正も面倒なので断念しました。

それでWordpressでモバイルフレンドリーなthemesを再び探す事にしました。
なんとか条件に合うthemesを見つけました。

Googleでモバイルフレンドリーテストで「このページはモバイルフレンドリーです」と評価され、なおかつなんとか満足できるブログに変更できました。

２０１７年５月９日

Googleからはなんの返事もありません。
自分で、いろいろ試行錯誤してみましたが、ブラウザをFirefoxにすると問題ないようです。

GoogleChromeモバイル版とGoogleAdsenseとの組み合わせに問題ありということのようです。

ちなみにスマートフォンはAndroid4.04でChromeは42.0.2311.111というバージョンです。ちなみにAndroid4.04ではChromeの更新はサポートされなくなったようです。Googleは冷たいです。このシビアさはマイクロソフト以上です。

２０１７年５月１０日

Googleから返事がきました。

GoogleにおいてGoogleChromeモバイル版（Chrome）での表示には問題が無かったようです。サイドエラー表示のスクリーンショットを送ってくださいということでした。

PageSpeed Insights ツールでサイトの分析ができるそうです。

試してみると、モバイル改善の余地があるとのことでした。
１.スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
２.ブラウザのキャッシュを活用する
３.画像の圧縮を強くする

１については、 JavaScript/CSS は、元々のthemesから入っていたものなので修正は難しいです。
２については、静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカル ディスクから以前にダウンロードしたリソースを読み込むようになるとの事です。
有効期日や最大経過時間を設定するというのは判らないので、勉強しようと思います。
３については、画像は20KB程度まで圧縮して使っているので、これから２０％程度圧縮するのは現実的ではないので断念しました。

スクリーンショットを送っておきました。

２０１７年５月１１日

Googleから返事がきました。
やっぱり原因はChrome のバージョンだということのようです。 そのバージョンは約二年ほど前のものなのでアップデートして下さいということでした。Android4.04では、これ以外のバージョンのChromeは使えないんです。

２０１７年６月１６日

Googleの「ページ単位」の広告を導入してみました。
Googleからモバイル端末専用で、高い収益が期待されると AdSense が判断した場合のみページに広告が表示されるというものです。
ブログでは、モバイル端末だと、GoogleAdsenseの広告をかなりスクロールしないと広告が表示されないようになっていたので、ちょうど良いと思い導入しました。

広告コードはスタイルシートを入れるヘッダーの部分（/head の上部）に挿入しないといけないのですが、実際にどう作業するのか悩みました。
Movabletypeでは、デザインのHTMLヘッダーに広告コードを挿入しました。
Wordpressでは、テーマ（wp-content—–themes—使っているテーマ）のheader.phpの下に挿入しました。

２０１８年８月１６日

今までサイドテーブルにGoogleAdsenseの広告を入れていたのですが、それではモバイル環境では目に入ることが無いという事で、記事の下に広告が出るようにしました。

Movabletypeへのは、テンプレートモジュールの作成でGoogleコード用のモジュール（例えばgoogleという名前のモジュール）を新設して、GoogleAdsenseのコードを埋め込み、テンプレートのメインページとアーカイブテンプレートのカテゴリ別記事リストの<$mt:Include module=”記事の概要”$>の下に<$mt:Include module=”google”$>を挿入すると記事の下に広告を埋め込みました。
https://movabletype.net/support/setting/googleads-analytics.html

WordPressへのGoogleAdsenseの広告の設定は、Ad Inserterというプラグインを利用しました。

２０１９年６月３０日

Movabletypeのブログは@Style Bootstarp Theme for Movable Type 1.0というテーマを改造して使っているのですが、サイドバーの最新の投稿一覧がメインページだけしか表示されないのが不満でした。できればカテゴリー別表示の時には、そのカテゴリー内の最新の投稿一覧が表示して欲しいのです。
ネットで調べると、Movabletypeの最新の投稿一覧は、カテゴリー別表示の時には、そのカテゴリー内の最新の投稿一覧が表示されるのがデフォルトのようです。
それで、改造する事にしました。
デザイン—-ウィジェット—-サイドバーウィジェットセットの最近の記事の

<mt:If name=”main_index”>
<mt:If tag=”BlogEntryCount”>
<mt:Entries lastn=”20″>
<mt:EntriesHeader>
<div class=”sidebar-module”>
<h4>最近の記事</h4>
<ol class=”list-unstyled”>
</mt:EntriesHeader>
<li><a href=”<$mt:EntryPermalink$>”><$mt:EntryTitle$></a></li>
<mt:EntriesFooter>
</ol>
</div>
</mt:EntriesFooter>
</mt:Entries>
</mt:If>
</mt:If>

を

<mt:If tag=”BlogEntryCount”>
<mt:Entries lastn=”20″>
<mt:EntriesHeader>
<div class=”sidebar-module”>
<h4>最近の記事</h4>
<ol class=”list-unstyled”>
</mt:EntriesHeader>
<li><a href=”<$mt:EntryPermalink$>”><$mt:EntryTitle$></a></li>
<mt:EntriesFooter>
</ol>
</div>
</mt:EntriesFooter>
</mt:Entries>
</mt:If>

に変更しました。