Bloggerの構造化データのエラー

先月、Search Console（旧ウェブマスターツール）の、

このブログの構造化データの部分を見てみたら、

エラーがたくさん出ていて驚いてしまいました。

このエラーは、”updated がありません”とすべて表示されていました。

”構造化データ”の意味すらわからない状態のため、とにかく調べました。


すると、どうやらBloggerの昔のテンプレートを使用すると出てくるようです。

とにかく、エラーと表示されるのはあまり気分がよくありません。


で、このエラーをなくす方法を書いてあるブログを見つけました。


参考サイト：電脳ノート



ここに書いてあるとおりにやってみたら、見事にエラーが減っていきました。

今日の時点のエラー数は３つにまで減っていました。

この３つのエラーもいずれ消えると思います。


Bloggerって日本では人気がなくてこういう方法を書いてあるブログって

なかなかないので、助かりました。

Bloggerにラベル（カテゴリー）を表示する方法。

Bloggerにラベル（カテゴリー）を表示させるには、

Blogger管理画面のレイアウトから、”ガシェットを追加”で、

”ラベル”の横の＋をクリックすると、下のような画面が表示される。

・タイトル－カテゴリー名を入力する。

・表示－”選択したラベル”をクリックすると、カテゴリーに表示するラベルを選択できる。

・並び替え－Bloggerはラベルの表示する順番を自分で選択できないので、自分は頻度順にした。

・表示－このブログは”リスト”表示で、”ラベルごとの投稿数を表示”にチェックを入れて表示した。


上記の必要事項を選択し、”保存”をクリックする。

これでラベル表示がされているはず。


このラベル表示は、PCでのみ表示される。

モバイルでもラベル表示をさせたい場合、HTMLを編集して表示させる。


モバイルのラベル表示の記事はこちら→Bloggerのラベルをモバイル（スマホ）でも表示させる方法

Bloggerのラベル表示を記事タイトル下にも表示してみた。

Bloggerの記事タイトル下と記事下にAdSenseを設置したら、

モバイル（スマホ）での、記事下のラベル表示がされなくなってしまった。



記事タイトル下と記事下にAdSenseを設置する記事はこちら
→Bloggerの記事タイトル下と記事下にもAdSenseを貼ってみた。



調べたところ、Bloggerのヘルプで、

テンプレートのHTML編集を大幅に編集すると、表示されなくなることがあるらしい。

Bloggerのヘルプ－投稿にラベルが表示されない

→https://support.google.com/blogger/answer/74897?hl=ja

テンプレートのHTML編集から、

”ウィジェット テンプレートをデフォルトに戻す”で対処してみたら、

モバイル（スマホ）での、記事下のラベル表示はされるようになったが、

記事タイトル下と記事下のAdSenseは、

デフォルトに戻るため、表示されなくなる。

なので、記事タイトル下と記事下のAdSenseを表示したまま、

モバイル（スマホ）での、記事下のラベルを表示させる方法がわかったので、

やってみることにした。

参考サイト：Dr.ウーパのコンピュータ備忘録

上記のサイトがすごくわかりやすくて助かりました。

このサイトのとおりに、

ラベル表示のソースを表示したい場所に貼ってみた。

<span class='post-labels'>
   <b:if cond='data:post.labels'>
      <data:postLabelsLabel/>
        <b:loop values='data:post.labels' var='label'>
          <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
          </b:loop>
        </b:if>
      </span>

上記のコードがラベル表示に必要なコードになる。




モバイル（スマホ）での、記事下のラベル表示が消えた場合の再表示方法

BloggerのHTMLの編集画面のソースコードが書かれているところを、

どこでもよいのでクリックし、Ctrlキーと’F’を同時に押すと、

上の画像のように、’Search’という窓が開く。

そこにpost-footer-line post-footer-line-2を入力しEnterを押す。

さらにEnterを押すと２つ目の場所が表示される。

ここが記事下の位置になる。


自分が使っているSimpleのテンプレートの場合、

post-footer-line post-footer-line-2の記述は２か所。

最初のpost-footer-line post-footer-line-2がモバイルで、2つ目がPCになっていた。

なので、最初のpost-footer-line post-footer-line-2のすぐ下に、

上記のラベル表示コードを貼りつける。

すると、

モバイル（スマホ）での、記事下のラベル表示を復活させることができるはず。

Bloggerのラベル表示を記事タイトル下に表示する方法

ついでに、ラベル表示を記事タイトル下にも表示してみた。

BloggerのHTMLの編集画面のソースコードが書かれているところを、

どこでもよいのでクリックし、Ctrlキーと’F’を同時に押すと、

上の画像のように、’Search’という窓が開く。

そこにdiv class='post-header-line-1'を入力しEnterを押す。

さらにEnterを押すと２つ目の場所が表示される。


自分が使っているSimpleのテンプレートの場合、

div class='post-header-line-1の記述は２か所。

最初のdiv class='post-header-line-1がモバイルで、2つ目がPCになっていた。

なので、両方のdiv class='post-header-line-1のすぐ下に、

上記のラベル表示コードを貼りつける。

これで、記事タイトル下にもラベルを表示させることができるはず。

Bloggerのモバイル（スマホ）トップページにもAdSenseを設置する方法

Bloggerのモバイル（スマホ）トップページにもAdSenseを設置してみた。

参考サイト：1983Note



モバイルトップページのブログタイトル下にAdSenseを設置する方法


Blogger管理画面のテンプレートのHTML編集へ。


HTMLコードの中のどこかをクリックして、

Ctrlキーと’F’を同時に押すと、

上の画像のように、’Search’という窓が開く。

そこに、b:includable id='mobile-main' var='top'と入力する。

その下に

<!-- posts -->
<div class='blog-posts hfeed'>
 <b:include data='top' name='status-message'/>
 <b:if cond='data:blog.pageType == "index"'>

上記のようなコードがあるので、その真下にAdSenseコードを貼りつければいい。

AdSenseコードは

HTML2TEXTでコードを変換させて（空白変換なしにして）貼り付ける。

AdSenseの下に線を引きたかったので、

自分は、AdSenseコードの下に

<hr color='#D3D3D3' size='1' width='340'/>

上記のコードを追加した。線の色はグレー。

モバイルトップページと個別記事ページの”ウェブバージョンを表示”上にAdSenseを設置する方法

Blogger管理画面のテンプレートのHTML編集へ。

HTMLコードの中のどこかをクリックして、

Ctrlキーと’F’を同時に押すと、

上の画像のように、’Search’という窓が開く。

そこに、div class='mobile-link-button' id='blog-pager-home-link'と入力する。


div class='mobile-link-button' id='blog-pager-home-linkの場所がわかるので、

<div class='mobile-link-button' id=\'blog-pager-home-link'>
 <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </div>

上記のコードの真下に、

HTML2TEXTでコードを変換させた（空白変換なしにして）

AdSenseコードを貼り付ける。

AdSenseの上に”スポンサーリンク”を表示する場合は、

<span style='color:#666;margin-bottom:5px;'>スポンサーリンク</span><br/>

上記のコードをAdSenseコードの上につける。

上記のコードの”スポンサーリンク”を消して、全角スペースにすると、

ホームのリンクボタンとAdSenseとの間に一行空けることができた。

自分はCSSのデザインをいじることができないので、

邪道だと思うけど、上記の方法で、

ホームのリンクボタンとAdSenseとの間に一行空けて、

AdSenseを表示することにした。

Bloggerのラベルをモバイル（スマホ）でも表示させる方法

Bloggerのラベルは、

デフォルトだとモバイル（スマホ）では表示されない設定になっている。


なので、

Bloggerのラベルをモバイル（スマホ）でも表示させるようにした。


やり方は、わかってしまえばすごく簡単。

Blogger管理画面からテンプレート→HTML編集へ。

上の画像のように、”ウィジェットへ移動”をクリックして、

モバイル表示させたいラベルをクリックする。


＜b:widget id='Label1' locked='false' mobile='yes' title～＞


上のような、ラベルのウィジェットのコードの中に、

mobile='yes' を付け足せばいいだけ。


locked='false'との間に、半角スペースをあけてmobile='yes'を記入する。

あけないとエラーになる。


これで、モバイルでのラベル表示がされているはず。


このやり方は、ラベルだけではなくて、

他のガシェットをモバイル表示させたい時にも、

同じやり方で表示させられる。

Bloggerにラベル（カテゴリー）を表示させる記事はこちら

→Bloggerにラベル（カテゴリー）を表示する方法

Bloggerの投稿者を消す方法

Bloggerの投稿者を消す方法がやっとわかったので、
覚書として書いておこうと思う。

それにしても、投稿者を消すだけなのに、すごくわかりづらかった・・・。

てっきり、設定から消すものだと思ったけど違った。

でも、わかってしまうとすごく簡単！

Bloggerの管理画面から、レイアウトの中のMainの所、

”ブログの投稿”の右下の”編集”の青文字をクリックする。

そうすると、上のような画面が開くので、

その中の”投稿ページのオプション”の上から２番目の

投稿者のチェックを外せば良いだけ。


この他にも、下の方に共有ボタンの設置の有無も選べるので、

自分の好みで設定する。


ホームページ作成サービス「グーペ」 


格安ドメイン取得サービス─ムームードメイン─ 

Bloggerに関連記事を表示する。

Bloggerに関連記事を表示するにはいくつか方法があるが、

Milliardは、一回できれいに関連記事を表示させることができたので、

Bloggerに関連記事を表示させたい場合は、おすすめ。

BloggerにMilliardで関連記事を表示する方法

まず、http://corp.shisuh.com/milliardにアクセスする。

利用方法でBloggerをクリックする。

コードを生成するため、

http://www.shisuh.com/statics/relatedPageSetting/

にアクセスする。

自分は、上の画像のように、

・並び順→関連度順

・表示位置→記事下

・PCでの表示→リスト、スクロール無効。表示件数８。

・スマホでの表示→リスト、スクロール無効。表示件数８。

で”コードを取得”をクリックして、コードをコピーする。

Bloggerの管理画面で、

レイアウト→ガシェットを追加→HTML/Javascriptを選択し、

先ほどコピーしたコードを貼り付ける。

１０分ほどすると、個別記事に表示される。

トップページには表示されないので、必ず個別記事で確認する。

もし表示されない場合は、

http://corp.shisuh.com/bloggerを参照してください。

ホームページ作成サービス「グーペ」 


格安ドメイン取得サービス─ムームードメイン─ 

Bloggerに最新記事を表示させる方法

Bloggerに最新記事を表示させるには、

Bloggerの管理画面から、レイアウト→ガシェットを追加をクリックする。

 ’ガシェットを追加’の画面の左側の’その他のガシェット’を選択し、

右上の検索窓に’recent’と入力する。

その中から、上の画像のような、’Recent Posts’のガシェットがあるので、

その右側の’＋’をクリックして、ガシェットを追加する。

最新記事を画像付きで表示させたかったので、この方法が一番良かった。


ホームページ作成サービス「グーペ」 


格安ドメイン取得サービス─ムームードメイン─ 

Bloggerの記事タイトル下と記事下にもAdSenseを貼ってみた。

Bloggerの記事タイトル下と記事下にもAdSenseを設置したので、

忘れないうちに、やり方を書いておこうと思う。

参考サイト：memorou.com

Bloggerの管理画面のレイアウトから、AdSense広告を設置する記事はこちら

→BloggerにAdSense広告を設置してみた。

HTMLに直接AdSenseを設置する場合は、

AdSenseの広告コードを変換させないといけない。

なので、まず、

AdSenseの広告コードをHTML2TEXTで変換させ、そのコードをコピーする。

（空白は変換させない方が自分はうまくいきました。）

記事タイトル下のAdSenseを設置する方法

記事タイトル下にAdSenseを設置する場合は、BloggerのHTMLの編集画面で、

div class='post-header-line-1の記述を探す。

BloggerのHTMLの編集画面のソースコードが書かれているところを、

どこでもよいのでクリックし、Ctrlキーと’F’を同時に押すと、

上の画像のように、’Search’という窓が開く。

そこにdiv class='post-header-line-1を入力しEnterを押す。

さらにEnterを押すと２つ目の場所が表示される。

自分が使っているSimpleのテンプレートの場合、

div class='post-header-line-1の記述は２か所。

最初のdiv class='post-header-line-1がモバイルで、2つ目がPCになっていた。

なので、両方のdiv class='post-header-line-1のすぐ下に、下のコードを貼りつける。

<b:if cond='data:blog.pageType == &quot;item&quot;">
<hr color='#000000' size='1' width='700'/><br/>
ここに変換したAdSenseコードを記入
<hr color='#000000' size='1' width='700'/>
</b:if>

’ここに変換したAdSenseコードを記入’のところを、

先ほど変換したAdSenseコードをコピーして貼り付ける。

上のコードは、タイトル下なので、AdSense広告の上下に線を引いたコードにした。

線の長さのwidthの数値と、color、sizeの数値は自分のテンプレートにあった数値にする。

ちなみに上のコードの線の色は黒で、線の長さはPC表示用の長さにしてあり、

モバイル表示の線の長さは340に設定している。

もし、線ではなくて、’スポンサーリンク’等の文字にしたい場合は、

’記事下にAdSenseを設置’の方のコードを参考にしてください。

記事下にAdSenseを設置する方法

記事下にAdSenseを設置する場合は、BloggerのHTMLの編集画面で、

data:post.bodyの記述を探す。

探し方は、記事タイトル下に書いたやり方と同じ。

data:post.bodyも、自分のテンプレートでは２つあった。

なので、両方のdata:post.bodyのすぐ下に、下のコードを貼りつける。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span style='color:#666;margin-bottom:5px;'>スポンサーリンク</span><br/>
ここに変換したAdSenseコードを記入
</b:if>

’ここに変換したAdSenseコードを記入’のところを、

先ほど変換したAdSenseコードをコピーして貼り付ける。

上のコードは、線ではなく、

’スポンサーリンク’とAdSense広告の上に表示する場合のコードにしてある。

もし、線にしたい場合は、

’記事タイトル下にAdSenseを設置’の方のコードを参考にしてください。


この記事内のAdSense設置は、個別記事でのみ広告が表示される。


AdSenseの規約では、広告は３つまでとなっている。

Bloggerの管理画面のレイアウトから、AdSense広告を設置している箇所が

２箇所以上の場合、記事内の２箇所を合わせて、

４箇所以上になってしまうので注意が必要となる。

ホームページ作成サービス「グーペ」 


格安ドメイン取得サービス─ムームードメイン─ 

BloggerにAdSense広告を設置してみた。

BloggerでAdSense広告を貼ろうと思い、BloggerからAdSenseに登録しようとしたら、

「AdSenseに登録」のボタンがクリック出来なくなっていた。

サイトを始めて６カ月以上経過しないと登録できないらしい。


なので、AdSenseをしばらく諦めようと思ったら、

５年ぐらい前に、他の無料ブログをやっていて、その時にAdSenseに申請して許可されていた
ことを思い出した。

調べてみると、この昔に取ったAdSenseは、非ホスト型アカウントというらしく、

このAdSenseの申請は、すごく簡単に許可が出た記憶がある。


BloggerからAdSenseに登録して許可された場合のアカウントをホスト型アカウントという。

このホスト型アカウントのAdSenseは、申請したサイトのみ有効で、申請したサイト以外で

使用したい場合は、もう一度申請して許可を取らなければならない。


なので、いくつものサイトでAdSenseを設置したい場合は、Blogger以外のサイトで申請した方が、

２度申請する手間が省ける。


自分のイメージでは、なんとなく、Bloggerはホスト型アカウントでないとAdSenseが設置できないと
勝手に思い込んでいた。


非ホスト型アカウントのAdSenseをBloggerに設置できるようなのでやってみた。


まず、AdSenseにログインする。

「広告の設定」から「＋新しい広告ユニット」をクリックして、広告ユニットを作成して、
「保存してコードを取得」をクリックして、コードをコピーする。

自分はちなみに、自動サイズの広告ユニットにしている。


Bloggerの管理画面のレイアウトから、ガシェットを追加をクリックして

HTML/JavaScriptを追加して、コンテンツの部分にAdSenseコードを貼りつける。

保存をクリックして、AdSense広告を貼りたい場所に配置する。

「配置を保存」をクリックして、ブログを表示するとAdSense広告が設置できているはず。

ホームページ作成サービス「グーペ」 


格安ドメイン取得サービス─ムームードメイン─ 

Bloggerでブックマークアイコン（ファビコン）を設定する方法

Bloggerでブックマークアイコン（ファビコン）を設定するのは簡単。


Bloggerの管理画面から、レイアウトを選び、

左上のファビコンの欄の編集をクリックする。


「お気に入りアイコン（ファビコン）を設定」という画面が開くので、

ファイルを選択でファビコンに使う画像を選び、保存をクリックする。



ファビコンの場合、ico形式にしか対応していない場合が多いが、

Bloggerの場合、画像のファイル形式はico、jpg、pngが使える。

なので、ファイル形式の変換をしなくて済むので、すぐにファビコンの設定ができる。


あとは、ファビコンが反映されるまで数日かかるので、気長に待つこと。

Bloggerのブログ管理者の変更の仕方

Bloggerのブログ管理者を変更するには、

Bloggerの管理画面から設定→基本→許可のブログの投稿ユーザーで

＋投稿者を追加をクリックして、空白欄に新しい管理者のメールアドレスを入力する。

執筆者を招待をクリックして、一旦ログアウトする。

ここでログアウトしないとうまくいかないので、ちゃんとログアウトする。




新しい管理者のgmailを開いてメールの”招待に応じる”をクリックして
開いた画面で”紹介メールを承認”をクリックする。

ここでまたログアウトし、元の管理者でログインする。

先ほどのブログの投稿ユーザーの所に、新しい投稿者として追加されているいるので

隣の▼をクリックして管理者を選択すればよい。

元の管理者を削除するには、またログアウトして、新しい管理者でログインする。

設定画面から、元の管理者の×をクリックすれば削除できる。

Bloggerで独自ドメインを設定する方法

Bloggerで独自ドメインを設定する方法を
覚書として書いておこうと思う。


独自ドメインの管理業者は  ムームードメイン


Bloggerの管理画面から設定→基本を開いて、

公開→ブログのサードパーティＵＲＬを設定をクリック。

サードパーティドメインの設定画面が開くので

独自ドメインのアドレスを入力し、
青文字の「設定手順を表示する」をクリック。

使用するドメインが、
トップレベルドメインかサブドメインかを選択する。

選択するとそれぞれの設定のやり方が表示される。

ここではトップレベルドメインを選択する。

手順９の２１６から始まる４つのAレコードは、

ドメインの管理業者のDNS設定で使用するので、
このタブは開いたままにしておいた方がいい。


ここでBloggerの管理画面の設定→基本の画面に戻り、

サードパーティＵＲＬの設定を開いて保存をクリックすると
エラーと２つのCNAMEが表示される。

[Name]（名前）、[Label]（ラベル）、[Host]（ホスト）欄 [Destination]（宛先）、[Target]（ターゲット）、[Points To] www　　　　ghs.google.com ××××××××ol　　　gv-×××××××××××.dv.googlehosted.com

上のような感じで表示されるので、
ドメインの管理業者のDNS設定で、上のCNAMEと
さっきの２１６から始まる４つのAレコードを設定する。

ムームードメインの場合の設定は、コントロールパネルで
ドメイン操作→ムームーDNS→変更の青いボタンをクリック。

カスタム設定のセットアップ情報変更で
設定２で上のように設定しセットアップ情報変更ボタンをクリックする。



そしてBloggerの
サードパーティURL設定の画面を開いて保存をクリックし、

公開のブログアドレスの独自ドメインの隣の編集をクリック。

サードパーティURL設定の独自ドメインの下に、

□********.com を www.********.comにリダイレクトする。

という表示がでるので、チェックを入れる。

保存をクリックする。