Bloggerガジェットをモバイル版に表示させる方法
Bloggerには様々なガジェットがありますが、ガジェットによってはモバイル版に自動で表示されないものがあります。
ガジェットをモバイル版に反映する方法について案内します。ガジェットをモバイル版に反映させるにはソースコード（HTML）を編集する必要があります。
ソースコードの編集は、スマホからだと上手くいきません（私の場合はですが…）のでパソコンで行いましょう。
↑
新しいインターフェースではスマホからも編集可能となっているようです。
手順① モバイルテーマを「カスタム」にする
こちらを設定しておかないとモバイル版ブログはカスタマイズを反映してくれないようです。
「テーマ」→「歯車マーク」→「モバイルテーマの選択」でセレクトボックスを「カスタム」に。
手順② ソースコードのバックアップ
コードの編集にあたり、編集を誤るとレイアウトなどが崩れてしまう可能性があるため、バックアップをとっておくことをオススメします。
バックアップは全てのコードをコピペしておくか、バックアップ機能を使えばオッケーです。
手順③ ソースコードの編集（コードの追加）
ブログ管理画面から、「テーマ」→「HTMLの編集」
モバイル版に反映させたいガジェットにモバイル版に表示させるためのコードを追加します。
そのためにまず、ガジェットの表示を担っているコードを見つけます。
初めてでも何とか探せます。私のソースコードを参考に探してみてください。
ガジェットのコードが見つかったらそこにmobile='yes'を追加します。mobile='yes'を追加する場所は、上の画像の通locked='false'とtitleの間に追加します。
注意点は、コードとコードの間に半角スペースを入れることです(全角はエラーになります)。
あと、上記コードはモバイル版に表示させたいガジェット全てに追加する必要があるので、少し手間ですが……頑張りましょう。コードの追加を終えたら編集は終了です。
手順④ モバイル版への反映確認
最後に、モバイル版にしっかり反映しているか確認して、問題なければ全ての工程終了です。
ブログ初心者がBloggerで躓くモバイル版への表示はこれで解決です。意外と簡単でしょ？
最初は恐る恐るかもしれませんが、慣れでしまえばなんてことないです。まずはやってみましょう！
最初は恐る恐るかもしれませんが、慣れでしまえばなんてことないです。まずはやってみましょう！
◆検索結果にブログ記事タイトルを表示させる方法
Bloggerの初期設定では、検索結果でブログ名:記事名という順序で表示されてしまいます。
記事内容を検索してブログ名が表示されたら、分かりづらいですよね。これは修正せねばなりません！
早速手順を載せていきます。こちらもソースコードの編集で対応します。
手順① ソースコードのバックアップ
やはり、念には念を！ 編集前のコードをバックアップしておきましょう。手順② ソースコードの編集
１．テンプレート中の以下のコードを探します。
<title><data:blog.pageTitle/></title>
２．上記コードを下記のコードに置き換えます。
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
手順③ 検索表示の確認
上記編集により、記事名―ブログ名に修正完了ですが、最後に本当に修正出来てるか自分の記事を検索し確認しましょう。ただ、反映されるにはクローラーが回ってからとなりますので、数日かかるかもしれません。
Search Consoleを活用すればもっと早いかもしれません。
以上、Bloggerでブログ運営する私自身も初期段階でぶつかった問題の解決方法の紹介でした。
今後もBlogger情報を発信していきたいと思います。
★資産運用始めるならSBI★
0 件のコメント:
コメントを投稿