今回は備忘録的な記事です。
同様の問題で悩まれている方の参考までに投稿しております。
突然スマホで設定しておいたガジェットが消えていました。
原因はあるはずなので、以下トライアンドエラーです。
6項目の作業をすると無事にスマホでガジェットが出現しました。
スマホでガジェットが消えた直前に行った作業ですが、
投稿画像の影（フチ）を消そうと、
下記部分をコメントアウト
/*.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}*/
パソコンでチェックしたところ、画像の影が消えて正常に表示
次にスマホでチェックしたところ、影は消えている様子。
さて次の記事を書こうかなとスマホページをチェックしていると、
ページ下のガジェット表示など、カスタムした部分が消えていることが判明。
テーマは「シンプル」で、HTMLをカスタムした内容は、スマホでもガジェットを表示、上記部分のコメントアウト程度です。
モバイルのテーマはカスタム設定です。
設定画面の「プレビュー」でも、ガジェットは表示していません。
ここからテーマのカスタムに慣れていない私は1泊2日の長時間作業に入ります。
l 1つめの作業工程
Windows7で作業していたのですが、テーマの設定をしようとする度に「Bad Request 400」が出ます。
ググってみるとどうやら、Cookieが影響しているみたいです。
ブラウザー（Chrome）の右上にある設定ボタンから
「設定」→「閲覧データの消去」より、Cookieを含め、表示された内容を全て削除しました。
再度、Bloggerにログインしてカスタム作業をします。
やはり「Bad Request 400」が出現、マシンを再起動しても同じ。
結果
Chromeのバージョンが最新のWindows10のノートを使うと問題なし。
Windows7でもバージョン更新してから今のところ問題ありません。
スマホのカスタムと関係ありませんが、この問題に関してはまず解決。
l 2つめの作業工程
記事内の画像の影（フチ）を消すためにコメントアウトしていた部分を元に戻します。
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
テーマの保存をしてモバイル設定のプレビューを見ます。
ガジェットは表示しないまま。スマホで確認しても同じ。
結果
上記のコメントアウトは関係ないと判断。
ただし、エラー判明までは、このままコメントアウトはしないで保存。
l 3つめの作業工程
mobile='yes'のチェック。
まず左メニューの「テーマ」から「HTMLの編集」を選択します。
「ウィジェットへ移動」をクリックし希望のウィジェットのソースを見ます。
私は、image1 , HTML1 , PopularPosts1 , BlogSearch1 , Translate1をモバイルでも表示するようにしています。
=======================
ちょっと豆知識
=======================
スマホに「人気の投稿ガジェット」を表示させたい場合
最初にテーマのカスタムページで右上の「バックアップ/復元」を選び、「テーマをダウンロード」でローカルに作業前のバックアップデータを保存してください。
カスタムで問題が起こったときにダウロードしたデータをアップすることで容易に作業前に復元できます。
カスタムページで「ウィジェットへ移動」ボタンをクリックし、「Translate1」を選択します。
<b:widget id='PopularPosts1' locked='false' title='人気の投稿' type='PopularPosts'>
上記のように表示されています。
ここに、mobile='yes'を下記の様に追記します。
<b:widget id='PopularPosts1' locked='false' mobile='yes' title='人気の投稿' type='PopularPosts'>
その他のウィジェットを表示させたい方は、該当のウィジェットへ移動し、上記の様にmobile='yes'を追加してください。
次に、「テーマを保存」ボタンをクリックし、「戻る」ボタンでテーマの最初のページへ。
モバイルの下の歯車のマークをクリックし、
「はい。モバイル端末でモバイルテーマを表示する。」を選択し、「モバイルテーマの選択」から「カスタム」を選択します。
保存する前に必ず「プレビュー」ボタンをクリックし、希望通りに表示されているかチェックしてください。
保存後はスマホで正常に表示されているか確認してください。
*カスタムは必ず自己責任でお願いしますね。
=======================
さて問題の続きです。
表示されたウィジェットには全て、mobile='yes'が入っています。
このままでは変更にならず更新が反映されないので、下記の様にmobile='yes'の場所を変えてみました。
<b:widget id='PopularPosts1' mobile='yes' locked='false' title='人気の投稿' type='PopularPosts'>
「テーマを保存」をクリックし、更新しました。
再び、HTMLを確認すると、mobile='yes'の場所が変更前の場所に変わっていました。
<b:widget id='PopularPosts1' locked='false' mobile='yes' title='人気の投稿' type='PopularPosts'>
記述の場所は修正されることと正しい記述場所が判りましたが、モバイルのカスタムをプレビューしても、スマホで確認してもガジェットが表示されない問題は解決せず。
正常に表示されていた頃に戻そうと、少し前に保存していた、テーマのバックアップファイルで復元作業を実行します。
復元作業後、テーマのHTML編集でlocked='false'の後ろに mobile='yes'を追記し保存。
テーマ設定に戻り、モバイルの設定でカスタムが選択されていることを確認。
プレビューするとレイアウトが崩れてガジェットが表示されているページが出現。
いきおいに任せそのまま保存。（笑）
スマホで確認しますがガジェットは表示されていません。
しかしレイアウトの崩れはありません。
もう一度モバイル設定のカスタムをプレビューすると、レイアウト崩れはなかったが、ガジェット表示はなし。
プレビューでなぜレイアウトが崩れたページが出現しガジェットが表示されていたかは不明です。
PCページ、スマホページ共にレイアウト崩れやおかしな点がないか簡単なチェック。
終了
とりあえず、mobile='yes'のチェックは出来ました。
1回だけモバイルのプレビューで、なぜレイアウト崩れてガジェットが表示されたかは不明。
根本的なスマホでガジェットが表示しない問題は未解決。
ここで一旦あきらめて就寝。
l 4つめの作業工程
ウィジェットデータをデフォルトに戻す。
朝から問題を解決すべく作業します。
昨晩寝る前にウィジェットデータをもとに戻すことを考えていました。
早速「テーマ」の「HTMLの編集」から「ウィジェットテーマをデフォルトに戻す」をクリック。
戻したいウィジェットを選択し実行。
実行後、HTML編集から確認すると、mobile='yes'が記述されたまま。
なぜ？
意味がわからないので、色々とググって見たのですが、同様のケースは見つかりません。
今まで、エディター（Dreamweaver）に頼りきりだったので、ソースの知識はあまりありません。
終了
とりあえずPCの表示も問題なく、スマホはガジェットが表示されていないだけ、その他は正常に表示されていたので、デフォルトに戻すという作業は終了。
あせらず慎重に作業していますが、新たに作業しようとしていたカスタマイズ設定は出来ず、新しい記事も書けず、逆行している作業に少し疲れ気味です。
l 5つ目の作業工程
知識に乏しい私は解決策が見えず。
Bloggerを使い始めてから、デフォルトの状態を確認せず、さらにろくにバックアップを取っていなかったことを反省しつつ後悔。
かといってさじを投げ出すのは後々もっと後悔しそう。
いい機会がどうかは判りませんが、左上の▼から「新しいブログ」を作ってデフォルト状態を確認することにしました。
初期設定を済ませ、新しい記事を作り、カテゴリーのラベル設定も済ませます。
時間がかかる作業ではありません。
ただし今回は後悔しないよう、テキストエディターを開きながら、必要なHTMLをコピーし大まかに作業工程を書いておきます。
テーマは同じく「シンプル」を選択。HTMLの編集で、ラベルにmobile='yes'を追記。
モバイル設定でカスタムを選択し、プレビューすると問題なくカテゴリーが正常に表示されています。スマホで確認しても正常に表示。
終了
順を追って、新たなブログで設定すると問題ないことがわかりました。
既存のブログの「HTMLの編集」のソースをチェックすることにします。
一番苦手な作業なんですが。
l 6つめの作業工程
Bloggerを使うまでは、HTMLエラーチェッカーなるものを使って、エディターで作成したページをチェックしていたことがありましたが最近はあまり使っていません。
ローカルのデータがチェックできず、サーバーにアップする必要があったからです。
（今ではローカルチェック機能もあるようですが）
=======================
ちょっと豆知識
=======================
HTMLエラーチェッカー
ブラウザでHTMLの文法ミスをチェックしてくれるChrome拡張機能です。
使い方は、Chromeウェブストア で”HTMLエラーチェッカー”と検索してください。
表示された中から、”HTMLエラーチェッカー”を見つけ「CHOROME追加」ボタンをクリックします。
ツールバーに新しくアイコンが出現します。
チェックしたいページに移動し、ボタンをクリックするだけでチェックできます。
ただ、チェックできず「リロードしてください」と表示されるページもあります。
=======================
Dreamweaverではエラー表示も無く無事保存。
HTMLエラーチェッカーで確認するため、保存したhtmlファイルをレンタルサーバーにアップ。
Chromeでアップしたページを表示。
HTMLエラーチェッカーで確認。
するとエラーが出ました。
</div>の開きタグがないとのこと。
該当の箇所を見ると、
<div class='content-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</div>
となっていて見る限り余分ではないと思いましたが、チェック用のHTMLデータなので、</div>のタグをひとつ削除し再アップ。
HTMLエラーチェッカーで確認すると「タグはおそらく完璧です」と表示されました。
Bloggerにログインし、HTML編集で同様にdivの終タグを削除。
今回は作業前にテーマのバックアップファイルも取っているし、テキストエディターにコピーもしています。
</div>を削除すると、今度はBloggerの画面上でエラーが表示されます。
同じGoogleなのになぜ？と思いながらチェックします。
問題が出ているのは、</div>を削除した箇所ではなく、
</body>タグの前に</div>タグが足りないとのこと。
ひとつ削除したから足りなくなって最後に</div>を入れろとエラーが出るのは当然かと思いながらも、チェッカーとBloggerの判定方法に疑心暗鬼です。
とりあえず、Bloggerのエラーの方が正しそうなので、今度は、bodyタグの直前にdivの終タグを入れ保存。
モバイル設定のカスタムのプレビューを見ると、設定したガジェットは正常に表示されています。
スマホで確認しても正常に表示されています。
終了
無事モバイルでガジェットを表示することが出来ました。
結果的にdivの終タグの位置を変えただけ。
私はプロではないので、これ以上の追及はしないことにします（笑）
画像の影を消すためのコメントアウトを設定しても大丈夫でした。
もちろん、現状のテーマのバックアップは取りました。
l 最後に
スマホのページにガジェットが表示されている、
Bloggerで最終編集したソースをDreamweaverのコードに貼り付け、サーバーにアップしHTMLエラーチェッカーで確認。
結果判定
<body>直前に入れた、</div>の開きタグがないとのこと。
当然追求はしません（笑）
詳しい方がおられましたら、ぜひご意見をお待ちしております。
今回は反省の意味もこめて自分への備忘録的な記事です。
同様の問題で悩まれている方がおられたら参考までに。
>>> ”まじめなネットビジネス”一覧はコチラ
>>> ”その他お役立ち情報”一覧はコチラ
kawkawkit
0 件のコメント:
コメントを投稿