ブログランキング・にほんブログ村へ
ポチッと応援願います
初めての方はこちらへ　
投稿日 2020年2月8日土曜日 更新日 2020年2月23日日曜日

サイトマップの登録

業務外


Googleアドセンスを復活させるため、以下のドキュメントを読んでいます。

ウェブマスター向けガイドライン（品質に関するガイドライン）
https://support.google.com/webmasters/answer/35769

一般的なガイドライン
  • Google がページを検出できるよう手助けする
  • Google がページを理解できるよう手助けする
  • 訪問者がページを利用しやすいよう手助けする

Googleアドセンスを復活させるには、これらガイドラインに準拠しなければなりません。先ずは、Google が井戸掘りブログの存在を認知しないと検索対象にならないので、広告の掲載もできないでしょう。以下の対応をせよとのことです。

サイトが Google に認識されるようにする方法:
Google にページのクロールをリクエストします。
https://support.google.com/webmasters/answer/6065812

クロール リクエストの方法
  • URL 検査ツールを使用する
  • サイトマップを送信する

サイトマップの送信を試してみましょう。


Google SearchConsoleにサイトマップの登録を行います。以前、作業済だった気がしますが、5年以上前なので無効化されているかもしれません。点検を含めて再登録します。




サイトマップは新たにドメイン形式で登録できるようになっていました。

サイトマップはドメイン形式で登録します

URLプレフィックス形式だと、プロトコルと全てのエイリアスを登録する必要があります。ドメイン形式なら1件で済みます。今回はドメイン形式を選択。

ドメイン形式 URLプレフィックス形式
nsfarmer.blogspot.com/
http://nsfarmer.blogspot.com/
http://www.nsfarmer.blogspot.com/
https://nsfarmer.blogspot.jp/
https://www.nsfarmer.blogspot.jp/


以前は上記のBloggerの国別ドメイン『blogspot.jp/』が有効だったはずですが、現在は『blogspot.com/』にリダイレクトされています。今回は、『nsfarmer.blogspot.com/』を登録します。

Google SerachConsoleにサイトマップを登録します

ドメイン形式でサイトマップの登録が成功しました

成功しました。
以前（2015年）、登録した国別ドメインのサイトマップも残っていました。

登録したサイトマップの内容です。

https://nsfarmer.blogspot.com/sitemap.xml
ブログソースコード
1
2
3
4
5
6
7
8
<?xml version='1.0' encoding='UTF-8'?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap><loc>https://nsfarmer.blogspot.com/sitemap.xml?page=1</loc></sitemap>
  <sitemap><loc>https://nsfarmer.blogspot.com/sitemap.xml?page=2</loc></sitemap>
  <sitemap><loc>https://nsfarmer.blogspot.com/sitemap.xml?page=3</loc></sitemap>
  <sitemap><loc>https://nsfarmer.blogspot.com/sitemap.xml?page=4</loc></sitemap>
  <sitemap><loc>https://nsfarmer.blogspot.com/sitemap.xml?page=5</loc></sitemap>
</sitemapindex>




https://nsfarmer.blogspot.com/robots.txt 内にサイトマップのURLを記載することもできるそうです。しかしSearch Consoleにサイトマップを登録していれば、こちらを優先して検索するため、robots.txtの対応は不要とのこと。念のため確認するとデフォルトで記載されていました。

https://nsfarmer.blogspot.com/robots.tx
ブログソースコード
1
2
3
4
5
6
7
8
User-agent: Mediapartners-Google
Disallow:
 
User-agent: *
Disallow: /search
Allow: /
 
Sitemap: https://nsfarmer.blogspot.com/sitemap.xml


感想と構想


サイトマップの登録は、以下の記事を参考にさせていただきました。
Blogger/Googleサイトのサイトマップ送信
https://www.howtonote.jp/google-search-console/sitemap/index7.html

robots.txtへのサイトマップの記載は、以下の記事を参考にさせていただきました。
Bloggerのrobots.txt デフォルト設定の内容について
https://blogger101.blogging-life.com/2018/02/blogger-robots-txt-default-setting.html


時刻: :

Googleアドセンス、現状確認


業務外


Googleアドセンスの修復を続けます。
GoogleのブログサービスBloggerにGoogleアドセンスを付加するには、Bloggerの管理ツール経由になります。管理ツールの収益を確認するとアカウントが無効化されています。
この『アカウント』はアドセンスのアカウントではなく、井戸掘りブログのサイトに広告を掲載するためのアカウントと理解しました。

Bloggerの収益を見るとアカウントが無効化されています

詳細を確認すると、こちらに誘導されました。半年前にも確認した覚えがあります。
ポリシー違反への措置
無効なトラフィックによって AdSense アカウントが無効になった場合の対処法
https://support.google.com/adsense/answer/57153

前後にはこんなヘルプがありました。
ポリシー上の理由により AdSense アカウントが無効となっている場合
https://support.google.com/adsense/answer/2576043

ページまたはサイトで広告配信が停止された場合
https://support.google.com/adsense/answer/113061

ポリシー違反による AdSense アカウント無効化の警告メッセージを受け取った場合
https://support.google.com/adsense/answer/1217847

アカウントの閉鎖につながった無効なトラフィックとポリシー違反
https://support.google.com/adsense/answer/2660562

無効なトラフィックやポリシー違反によりアカウントが停止された場合の対処法
アカウントが停止された理由
https://support.google.com/adsense/answer/2659114


一通り目を通しましたが、何だかな。後10回読めば理解できるかも。笑

広告表示設定を続行してみましたが、アカウントが無効だと広告表示設定が反映できません。

広告表示設定を続行してみます 

アカウントが無効だと広告表示設定が反映できません




Googleアドセンスの状況を確認します。
Googleアドセンスにログインすると、井戸掘りブログで 複数のポリシー違反が確認されたとのこと。


  • 存在しないダウンロード/ストリーミング配信コンテンツの提供を謳っている
  • 存在しないコンテンツにリンクしている
  • 無関係なページや誤解を招くページもユーザーをリダイレクトしている
  • サイトのテーマやビジネスモデルと関係がないテキストが記載されている

1～2行目はW3Cリンクチェッカーを使って該当箇所を洗い出して修正済みです。公開停止されたYoutube動画へのリンク、廃止されたサイトへのリンク（デッドリンク）等です。
3～4行目は良く判らん。例えば井戸掘りがテーマのブログなのに、Bloggerのカストマイズ方法とかGoogleアドセンスの修復の記事を掲載するのはこれに該当するのか？ 判らん。

AdSenseを見るとサイトのポリシー違反だそうです

各リンクの誘導先です。
ウェブマスター向け品質に関するガイドライン
https://support.google.com/webmasters/answer/35769

プログラム ポリシー
https://support.google.com/adsense/answer/48182

コンテンツ ポリシー
https://support.google.com/adsense/answer/9335564

ヘルプセンターを確認すると、こちらに誘導されました。
AdSense アカウントを有効にする
AdSense アカウントを有効にできない場合の対処法
https://support.google.com/adsense/answer/81904

こちらも、後10回読まなければならないようです。笑


感想と構想


単純に、Googleアドセンスで『blogspot.jp 上のポリシー違反を修正しました』をチェックして、サイトの審査をリクエストすれば復活する気がしてきました。


時刻: :
投稿日 2020年2月7日金曜日 更新日 2020年2月23日日曜日

Google アドセンスの修復再開

本日の記録


散々時間を掛けてリンクチェックをして、デットリンクを修復しましたが、目的を見失っていました。そもそも、Googleアドセンスの修復が目的だったはず。つまらないカストマイズをしている場合じゃない。

2019年6月28日金曜日
Google アドセンスの修復中


昨年8月に広告アカウントの復元までは済ませていたのですが…、

2019年8月28日水曜日
広告アカウントの利用停止だと

昨年11月に、またお知らせメールが来ていたのを失念していました。

From: Google Ads <ads-noreply@google.com>
Date: 2019年11月5日(火) 5:20
Subject: Google 広告の掲載が停止しています
To: <xxxxx@gmail.com>
お客様 ID: xxx-xxx-xxxx
ログイン
Google 広告の掲載が停止しています

請求とお支払いに関する問題のため、広告掲載が停止しています。

広告掲載を再開するには、アカウントにログインしてアラートのメッセージをご確認ください。
　請求とお支払いを確認　

詳しくは、自動支払いをご確認ください。

この Google 広告アカウントは、現在お支払いプロファイル「xxxx-xxxx-xxxx」とリンクされており、アカウントで発生した費用はこのプロファイルに基づいて請求されます。

よろしくお願いいたします。
Google 広告チーム
このメールは、お客様の Google 広告アカウントに関する最新情報をお知らせするものです。

Google LLC
1600 Amphitheatre Parkway,
Mountain View, CA 94043


メール上の『請求とお支払いを確認』ボタンをクリックするとGoogle AdWords の画面に遷移しました。AdWords アカウントの利用停止？
アカウントが有効になっていません お客様の AdWords アカウントの利用が停止されたため、広告は掲載されていません。

Google AdWordsのアカウントが無効化されています

『再有効化』とかをクリックすれば良いのかしらん？
いつもなら闇雲にお試しするところですが、今回は下準備に時間を掛けています。自分らしくないけど丁寧にやりましょう。

メールを再度確認すると、直前にもう一通来ていました。
（なんかGmailが調子悪いのかな。先ほどはこのメールは無かったはず。悪いのは儂の眼か。笑）

From: Google Ads <ads-noreply@google.com>
Date: 2019年11月5日(火) 2:04
Subject: お客様の Google 広告アカウントは利用停止状態になりました（費用が発生していないため）
To: <xxxxx@gmail.com>
お客様 ID: xxx-xxx-xxxx
ログイン
お客様の Google 広告アカウントは利用停止状態になりました（費用が発生していないため）

お客様の Google 広告アカウント（xxx-xxx-xxxx）は、15 か月以上にわたり費用が発生していないため、19/07/24をもって自動的に利用停止状態となりました。

広告掲載を再開するには、アカウントにログインしてアラートのメッセージをご確認ください。 詳しくは、利用されていないアカウントの停止に関する説明をご確認ください。

アカウントが利用停止状態になると、24 時間以内に対象アカウントの広告の掲載が停止されます。アカウントに残高がある場合は、登録されている銀行口座やクレジットカードに 4 週間以内に返金されます。


アカウントのご利用を再開する場合は、Google 広告アカウントにログインしてお手続きください。 詳しくは、利用が停止された AdWords アカウントの再開に関する説明をご確認ください。


よろしくお願い申し上げます。
Google 広告チーム
このメールは、お客様の Google 広告アカウントに関する最新情報をお知らせするものです。

Google LLC
1600 Amphitheatre Parkway,
Mountain View, CA 94043

これは昨年7月に来ていたメールと同じ、広告アカウントの停止通告です。メールを受信してから4週間以上経過していますが、復活できるかな。

こちらを読んで、
利用が停止された AdWords アカウントの再開に関する説明
以下が復活の呪文です。

アカウントの再開方法

Google 広告アカウントの再開手順:
  1. Google 広告アカウントにログインします。
  2. 右上にあるツールアイコン  をクリックします。
  3. [設定] で [各種設定] をクリックします。
  4. [アカウントのステータス] をクリックして展開します。
  5. [アカウントを再アクティブ化] をクリックします。
アカウントのステータスが「有効」になります。


前回と同じ手順で復活させるのですが、覚えておらん。
勝負勝負！！

AdWordsのアカウントステータス

アカウントの再有効化成功しました

アカウントの再有効化成功しました

成功しました。


感想と構想


前回、7月末に広告アカウントの停止通告メールを受けて、8月末にアカウントを復活させました。それから放置していたら2ヶ月経過して、11月頭に再度 広告カウントが停止されたようです。

半年以上経過したことで、Googleアドセンスの修復に何が必要で、どこまで済んでいるのかさっぱり判らなくなっています。ブログに記録を残していたはずなんですが、どうも中途半端。仕方ない、一からやり直しです。


時刻: :

記事に更新日を付ける

業務外


Google先生で調べものをしているとき、役に立つ情報とそうでない情報があります。
大事なのは情報の鮮度です。書かれた時点では有意義な情報でも、時間の経過により環境の変化やより良いモノに置き換えられ、使えない情報になってしまいます。
このため、検索でヒットした情報が書かれた日付を注意しています。ネット系のコンテンツで2～3年以上古い情報は使いえないと思った方が良い。

ただし、何年も前に公開された記事でも更新日が最近の日付なら、公開後も内容を更新し続けてメンテナンスしていることが判ります。こういう情報は使えます。

井戸掘りブログも『使いえる井戸掘り情報サイト』を目指してメンテナンスを心掛けています。このメンテナンス状況が判るように各記事のヘッダーの『投稿日』の横に『更新日』を追加しました。

投稿日はブログの投稿ガジェットで表示していますが、ウェブバージョンとモバイルバージョンで <b:includable id='main' var='top'>～</b:includable> と <b:includable id='mobile-post' var='post'>～</b:includable> の2ヶ所の改修が必要です。

ブログの投稿ガジェットのウェブバージョンのヘッダー部のソースコードです。3行目の投稿日を消して、5～6行目に新たに投稿日と更新日を表示しています。1行目のand条件以降は『インデックスページのモバイル化』のカストマイズです。
ブログソースコード
1
2
3
4
5
6
7
        <b:if cond='data:post.dateHeader and data:blog.pageType == &quot;item&quot;'>
<!-
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
-->
<span class='published-info'>投稿日&amp;nbsp;<data:post.date/></span>
<span class='updated-info' style='display:none; margin-left:1em;'>更新日&amp;nbsp;<span class='date' expr:data-publishd='data:post.timestampISO8601' expr:data-updated='data:post.lastUpdatedISO8601'/></span>
        </b:if>

ブログの投稿ガジェットのモバイルバージョンのヘッダー部のソースコードです。3行目の投稿日を消して、5～6行目に新たに投稿日と更新日を表示しています。
ブログソースコード
1
2
3
4
5
6
7
    <b:if cond='data:post.dateHeader'>
<!--
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
-->
<span class='published-info'>投稿日&amp;nbsp;<data:post.date/></span>
<span class='updated-info' style='display:none; margin-left:1em;'>更新日&amp;nbsp;<span class='date' expr:data-publishd='data:post.timestampISO8601' expr:data-updated='data:post.lastUpdatedISO8601'/></span>
    </b:if>


記事の更新日は<data:post.lastUpdatedISO8601/>から取得していますが、形式は”yyyy-mm-ddTtt:mm:ssZ”固定です。例："2020-02-02T10:13:49Z"
フォーマットは変更できないので、これをJSで形式変換します。
記事の投稿日は<data:post.timestampISO8601'/> から取得しています。形式は”yyyy-mm-ddTtt:-mm-dd+9:00”。+9:00はグリニッジ標準時との時差です。例："2020-01-22T20:00:00+09:00"

日付の形式変換のJSです。投稿日と更新日が同一の場合、更新日は表示しません。
ブログソースコード
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
//<![CDATA[
(function() {
  var weekday_list = [ '日', '月', '火', '水', '木', '金', '土' ] ;
  let updates = document.querySelectorAll('.updated-info .date');
  for (let i=0; i<updates.length; i++) {
    let u = updates[i];
    let tp = new Date(u.dataset.publishd);
    let tu = new Date(u.dataset.updated);
    if (Math.floor(tp.getTime()/86400000) != Math.floor(tu.getTime()/86400000)) {
      var weekday = weekday_list[ tu.getDay() ] + '曜日';
      u.textContent = tu.getFullYear()+'年'+(''+(tu.getMonth()+1)).slice(-2)+'月'+(''+tu.getDate()).slice(-2)+'日'+weekday;
      u.parentElement.style.display = 'inline';
    }
  }
})();
//]]>
</script>



追加した投稿日と更新日のスタイルを追加しました。
ブログソースコード
1
2
3
4
5
6
<style>
.published-info,
.updated-info {
  font: normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
}
</style>


これで投稿した記事に更新日が表示されます。

記事に更新日を表示しました

これではパンチが足らないのでアイコンを付けることにしました。
SVG形式のアイコンを追加します。SVGファイルをまともに扱うのは今回初めてです。
勝負勝負。

投稿日と更新日にアイコンを
追加しました


SVG形式のアイコンの定義です。
ブログソースコード
1
2
3
4
5
6
7
8
<svg class='svg-clock-icon' height='32' version='1.1' viewBox='0 0 32 32' width='32' xmlns='http://www.w3.org/2000/svg'>
<path d='M20.586 23.414l-6.586-6.586v-8.828h4v7.172l5.414 5.414zM16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 28c-6.627 0-12-5.373-12-12s5.373-12 12-12c6.627 0 12 5.373 12 12s-5.373 12-12 12z'/>
</svg>
 
<svg class='svg-update-icon' height='32' version='1.1' viewBox='0 0 32 32' width='32' xmlns='http://www.w3.org/2000/svg'>
<path d='M27.802 5.197c-2.925-3.194-7.13-5.197-11.803-5.197-8.837 0-16 7.163-16 16h3c0-7.18 5.82-13 13-13 3.844 0 7.298 1.669 9.678 4.322l-4.678 4.678h11v-11l-4.198 4.197z'/>
<path d='M29 16c0 7.18-5.82 13-13 13-3.844 0-7.298-1.669-9.678-4.322l4.678-4.678h-11v11l4.197-4.197c2.925 3.194 7.13 5.197 11.803 5.197 8.837 0 16-7.163 16-16h-3z'/>
</svg>



アイコンのスタイルを追加しました。
ブログソースコード
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
.svg-clock-icon,
.svg-update-icon {
  width:1.3em;
  height:1.3em;
  vertical-align: sub;
  background-repeat: no-repeat;
}
/* IE11 */
_:lang(x)::-ms-backdrop,
.svg-clock-icon,
.svg-update-icon {
  padding-left: 30px;
  vertical-align: sub;
}
</style>


感想と構想


記事に更新日を付けるには、以下の記事を参考にさせていただきました。
Bloggerに更新日を表示する
https://www.bugbugnow.net/2018/01/blogger.html

SVGアイコンの設定は、以下の記事を参考にさせていただきました。
BloggerでSVG画像を表示させる方法あれこれ
https://www.cottpic.com/2018/10/embed-svg-to-blogspot.html

アイコン素材は、以下のサイトを利用させていただきました。
使いたいアイコンを選んで、『Generate SVC &More』ボタンをクリックしてダウンロードすると色々な形式のアイコンが使えます。この中のSVGファイルの中身をテーマに貼り付ければ表示されます。
IcoMoon
https://icomoon.io/app/#/select


時刻: :
投稿日 2020年2月6日木曜日 更新日 2020年2月23日日曜日

静的ページのブログアーカイブツリー手直し

業務外


細かい話ですが、連絡フォームの組込みで気が付きました。静的ページを開くとブログアーカイブ先頭のツリーが展開されています。
ブログアーカイブ先頭は2013年ですが、ここは井戸掘りブログの開始前で、リンクチェック用の記事リストを格納している日付です。本来のブログ記事ではないので触らないで欲しい。笑
多分、静的ページが日付を持っていないので、デフォルトでアーカイブリスト先頭のツリーが展開されているっぽい。日付がないなら無視するか、最新日付を展開すれば良いのにね。

とにかく、関係のないブログアーカイブ先頭のツリーが展開されるのは気に入らないです。

静的ページを開くと
ブログアーカイブ先頭のツリーが展開されます

ブログアーカイブガジェットのソースを見ても、ツリーを開閉させるプロパティは無さそう。単にサーバから返却されたツリー情報を初期表示してるようです。
因みに初期表示されたツリーをマウスで操作するとツリーが開閉されますが、これはJSで実装されています。マウスで操作のたびにサーバからツリー情報を再取得して表示しています。

対処方法は…。静的ページなら展開されているツリーを無視して、圧縮されたままに表示するアプローチで良いかな。

ブログアーカイブガジェットのツリー表示部のソースコードです。静的ページの場合、2～８行目で親要素のみ表示し、子要素を無視しています。
ブログソースコード
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <li expr:class='&quot;archivedate &quot; +  &quot;collapsed&quot;'>
        <b:include cond='data:interval.toggleId' data='interval' name='toggle'/>
        <a class='post-count-link' expr:href='data:interval.url'>
          <data:interval.name/>
        </a>
        <span class='post-count' dir='ltr'>(<data:interval.post-count/>)</span>
      </li>
<b:else/>
      <li expr:class='&quot;archivedate &quot; + data:interval.expclass'>
        <b:include cond='data:interval.toggleId' data='interval' name='toggle'/>
        <a class='post-count-link' expr:href='data:interval.url'>
          <data:interval.name/>
        </a>
        <span class='post-count' dir='ltr'>(<data:interval.post-count/>)</span>
        <b:include cond='data:interval.data' data='interval.data' name='interval'/>
        <b:include cond='data:interval.posts' data='interval.posts' name='posts'/>
      </li>
</b:if>


ブログアーカイブガジェットの行頭表示部のソースコードです。静的ページの場合、2～4行目でアーカイブ行頭に圧縮（▶）を固定で表示しています。
ブログソースコード
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <span expr:class='&quot;zippy&quot;'>
        &#9660;&#160;
    </span>
<b:else/>
    <span expr:class='&quot;zippy&quot; + (data:interval.expclass == &quot;expanded&quot; ? &quot; toggle-open&quot; : &quot;&quot;)'>
      <b:if cond='data:interval.expclass == &quot;expanded&quot;'>
        &#9660;&#160;
      <b:elseif cond='data:blog.languageDirection == &quot;rtl&quot;'/>
        &#9668;&#160;
      <b:else/>
        &#9658;&#160;
      </b:if>
    </span>
</b:if>
 
<span style="font-family: "meiryo";"><span style="white-space: normal;">
</span></span>

参考：
&#9660;&#160;　圧縮（▶）
&#9668;&#160;　圧縮（◀）、右から左に記述する言語向け
&#9658;&#160;　展開（▼）

成功です。ブログアーカイブのツリーは折り畳まれたままです。

ブログアーカイブのツリーは
折り畳まれたままです


感想と構想


どうでも良い、自己満足のカストマイズです。
寒波襲来で畑に出向けず、無理やりネタを探している感じですね。


2020年2月7日
副作用がありました。静的ページを開いた際に、折り畳められたツリーの中身がフラットになってしまいました。週次のアーカイブが無くなってる。
うーん、簡単には直らないか。とりあえずソースを戻しました。


時刻: :
投稿日 2020年2月5日水曜日 更新日 2020年2月24日月曜日

連絡フォームの組込み

業務外


サイドバーの表示／非表示制御の試験で、暫定で連絡フォームのガジェットを組み込みましたが、これ良いね。今までは記事のコメント欄ぐらいしか、通信手段がありませんでした。記事に直接関連しないことを問い合わせる方法が無かったんですよね。

でも、ガジェットの連絡フォームは常時表示されているのが気に入らないです。特にモバイルバージョンは軽くしたいので、必要な時に連絡フォームを表示できるようにしたい。

連絡フォームを組み込むと
常時表示されるのが難点です


ページに連絡フォームを組み込んで、サイドバーにリンクを表示すれば良いはずです。Google先生に確認すると参考記事が見つかりました。

今回、半月ほどテーマのXMLをカストマイズし続けたことで、XMLの内容をある程度理解することができました。XML自体、３kStep程しかありませんので、上から下まで何回も眺めています。
参考記事はある程度、カストマイズの経験がある方向けの内容です。メインセクションの役割とか判らないと理解が苦しいはず。自分だと今回のカストマイズを始める前にこの参考記事を読んでも、たぶん意味が判らなかったでしょう。

手順は以下の6Stepです。詳細は参考記事をご覧ください。
  1. レイアウト画面のメインセクションにガジェット追加ボタンを追加する。
  2. メインセクションに連絡フォームガジェットを追加する。
  3. 連絡フォーム用の静的ページを用意する。
  4. 連絡フォーム呼び出し用のリンクガジェットを用意する。
  5. 連絡フォームガジェットを連絡フォーム用静的ページのみ表示するように条件を追加する。
  6. 連絡フォームの画面レイアウトを調整する。

因みにStep1は実は不要です。サイドバー等の他のセクションに連絡フォームを追加して、その後にメインセクションにドラッグ＆ドロップすることで代用できます。


Step5
連絡フォームのガジェットのソースです。3行目と30行目に条件文を加え、連絡フォーム用の静的ページの場合のみに連絡フォームを表示させています。
リテラルもデフォルトは「名前」、「メール」、「メッセージ」と味気ないので修正しています。
ブログソースコード
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
             <b:widget id='ContactForm2' locked='false' mobile='yes' title='お問い合わせ' type='ContactForm' version='1'>
              <b:includable id='main'>
<b:if cond='data:blog.url == &quot;https://nsfarmer.blogspot.com/p/blog-page_4.html&quot; or data:blog.url == &quot;https://nsfarmer.blogspot.com/p/blog-page_4.html?m=0&quot; or data:blog.url == &quot;https://nsfarmer.blogspot.com/p/blog-page_4.html?m=1&quot;'>
 <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        お名前 : <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        メールアドレス(必須) : <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        内容(必須) : <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
            </b:widget>


Step6
画面レイアウトはデフォルトだと狭いので、幅を広げています。全体的に硬いデザインなので柔らかく変更しています。
ブログソースコード
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
.ContactForm h2.title{
  font-weight: bold !important;
  font-family: arial, helvetica, sans-serif !important;
  font-size: large !important;
  color:white !important;
  background: dodgerblue;
  text-align: center;
  padding-top: 0.3em;
  padding-bottom: 0.2em;
  border-radius: 3px
}
 
.form{
  font-size:16px !important;
  margin-left:1em;
}
 
.contact-form-widget{
  max-width:initial !important;
}
 
.contact-form-name,
.contact-form-email,
.form textarea {
  max-width:initial !important;
  width:90% !important;
  height:initial !important;
  border: 1px solid #ddd;
  font-size:16px !important;
  padding:6px 8px !important;
  border-radius: 4px;
  box-shadow: 1px 1px 2px rgba(0,0,0,.1) inset;
}
</style>


こちらが出来上がったメールフォームです。
メールフォーム下の注意事項は、連絡フォーム用の静的ページに実装しています。

サイドバーにはメールフォームの
リンクのみが表示されます 

メールフォームのリンクを
クリックすると
メールフォームが表示されます

良い感じです。


感想と構想


連絡フォームの組み込みは、以下の記事を参考にさせていただきました。
Bloggerの連絡フォーム機能を使ってお問い合わせページを作る方法
https://toumaswitch.com/blogger-contact-form/

時刻: :
投稿日 2020年2月4日火曜日 更新日 2020年2月19日水曜日

3号畑の整備開始

本日の記録


今日は何とか早めの出動ができました。現場に向かったのは13時です。
13時半から17時過ぎまで、3号畑と周囲の通路を整備しました。今日はあまり気温が上がりませんでしたが、中々の日和でした。


井戸畑作報告


3号畑の様子です。3号畑は日当たりが悪く湿り気が多いので山野草の栽培地として使っています。畑としてはあまり稼動していないです。その割には、雑草はわずかです。
周囲の通路は、いい具合に雑草が生えています。笑

3号畑の様子です、雑草はわずかです 

2号畑・3号畑・5号畑の交差点、いい具合に雑草が生えています

雑草は大した量でないので手で引き抜きました。
通路はエンジン草刈り機を回して、雑草を始末しました。

3号畑の雑草を始末しました 

通路は草刈り機を回しました 

2号畑は特に作物を植え付ける予定はないのですが、除草のため通路に耕運機を掛けたいですね。

後は、昨年植え付けた加賀の丸芋を今年も試したい。ナガイモは大丈夫でしたが、なぜか丸芋と大和芋はコガネムシに葉をすっかり食害されてしまいました。それでも何とか種芋は確保できました。


感想と構想


5号畑隣地の元ミカン畑も草刈り機を回しました。
昨年に写真左側の5号畑拡張部を開墾しましたが、1間幅で何とも使い辛い。実は、これを2間幅に広げて7号畑にする野望を抱いております。枯れたミカンの樹を始末しないとね。

5号畑隣地の元ミカン畑も草刈り機を回しました

井戸掘り再開前に余計な事を考えていますが、資材さえ揃えば1～2日で開墾できる予定です。まあ、片手間で時間のあるときに作業すれば良いか。


アルバム


2020年2月4日

時刻: :
投稿日 2020年2月3日月曜日 更新日 2020年2月23日日曜日

サイドバーの表示／非表示制御

業務外


1月上旬に退院して、ほぼ自宅ベットで療養中です。調子の良い日は散歩がてら畑の整備に向かってますが、寒くて風邪をひくのが嫌で中々出歩くことができません。
そこでシコシコと井戸掘りブログのカストマイズを続けていましたが、ほぼやり切った感じです。

残りはリンクチェック時に諦めたサイドバーの表示／非表示制御です。これはリンクチェックでガジェットを隠すだけでなく、井戸掘りブログのホームページを作りたいと考えたからです。
現在の井戸掘りブログのホームページ（https://nsfarmer.blogspot.com/）は記事一覧のインデックスページページです。初めて井戸掘りブログを訪問した人向けに、ここはトッページにしたい。

ホームページをインデックスページから
トップページに切り替えたい

たぶん、ブログの投稿ガジェットで記事を表示しているmain部でホームページのURLならトップページを表示するように手直しすれば良いはず。トップページは井戸掘りブログのタッチダウンページの役割なのでシンプルな構成にしたい。トップページ自体に井戸掘りブログの全てのコンテンツが包含されるので、サイドバーは不要です。つまり、サイドバーは消したい。

トップページにサイドバーは不要です

そもそもはこちらの参考記事のアイデアです。
Create Real Homepage for Blogger Blog
Bloggerのブログのための本当のホームページを作成
https://bloggerbook.blakbin.com/2018/10/create-real-homepage-for-blogger-blog.html

しかし、どうしてもサイドーを消すことができず、断念していました。

2020年1月15日水曜日
W3Cリンクチェッカー運用改善


半月放置していましたが、こんな記事を見つけました。
Blogger レイアウトにセーフハウス（隠れ家）を追加する for Blogspot Blogs
https://btf-jp.blogspot.com/2017/10/blog-post.html

ガジェットを一時的に非表示にしたいときに、ガジェットを退避させる機能です。セーフハウスセクションという特別な場所を作ることでここに移動したガジェットが非表示になります。私がリンクチェックをやっていた時に欲しかった機能に近い。

レイアウトの末尾、id='footer-3'のセクションの下に配置しました。id='HTML5'のガジェットは版権表示です。

セーフハウスセクションのソースコードです。2行目でソース折り畳みを表現していますが、見た目だけなのでご注意。
ブログソースコード
1
2
3
4
<b:section class='foot' id='footer-3' name='Footer' showaddelement='no'>
  <b:widget id='HTML5' locked='false' mobile='yes' title='' type='HTML' version='1'>…</b:widget>
</b:section>
<b:section class='safehouse' cond='data:view.isLayoutMode' id='safehouse' name='Safehouse' showaddelement='no'/>

<data:view.isLayoutMode/>つまり、レイアウト画面だけ表示（有効化）され、実行時には意味を成さないセクションの意味のようです。

SafeHouseのセクションが表示されました

確かにSafeHouseのセクションに移動したガジェットは表示されません。
でも、何かするたびにSafeHouseのセクションにガジェットを移動するのは面倒臭い。しかも終わったら戻さなければならない。これは使えないね。



使えないSafeHouseのセクションの調査は無駄でしたが、新しいアイデアが出ました。

サイドバーは<b:section-contents> Bloggerタグが使われています。<b:section> Bloggerタグなら条件式を付与して表示・非表示を制御できるのですが、<b:section-contents> Bloggerタグはこれが効きません。

ならば、<b:section-contents> Bloggerタグを止めて、新たに<b:section-contents> Bloggerタグでサイドバーセクションを作って、表示・非表示を制御すれば良いやん。

井戸掘りブログのレイアウトです。
メインセクションの一部（誘導用ヘッダー、注目の投稿、人気の投稿）を非表示にしたい。更にサイドバー（sidebar-right-1）全体を非表示にしたい。
先ずはメインセクションを分解してみます。

メインセクションの一部、
サイドバー1全体を非表示にしたい 

メインセクションを id='main-ex-0' 、id='main-ex-1' 、id='main-ex-2'のセクションに 分割します。id='main-ex-0'とid='main-ex-1'には条件式を付与して、モバイルバージョンで言語が日本語以外のときは表示しないようにします。

3行目が元のmainセクションです。ソース折り畳みを表現していますが、見た目だけなのでご注意。
ブログソースコード
1
2
3
4
5
6
7
<b:section class='main' cond='!data:blog.isMobileRequest or data:blog.locale == &quot;ja&quot;' id='main-ex-0' name='main-ex-0' showaddelement='no'>
</b:section>
<b:section class='main' id='main' name='Main' showaddelement='no'>…</b:section>
<b:section class='main' cond='!data:blog.isMobileRequest or data:blog.locale == &quot;ja&quot;' id='main-ex-1' name='main-ex-1'
</b:section>
<b:section class='main' id='main-ex-2' name='main-ex-2' showaddelement='no'>
</b:section>


レイアウト画面で表示制御したいガジェットを分割した各セクションに割り振ります。

メインセクションを分解できました

管理ツールで言語を切り替えて動作確認です。言語が日本語だと新たに追加した人気の投稿ガジェットが表示されます。言語を切り替えると人気の投稿ガジェットが消えました。成功です。

ガジェットのソースを一つずつカストマイズしてリンクチェック用に表示／非表示制御を組み込みましたが、セクション単位なら簡単に制御できました。これだよ、最初からやりたかったのは！！

モバイルバージョンに
人気の投稿を追加しました

言語を切り替えると
人気の投稿が消えました

次はサイドバー（id='sidebar-right-1'）全体を非表示にします。このため代替のサイドバー（id='sidebar-ex-1'）を組み込みます。
組み込む場所が判らず、先ずは<b:section-contents id='sidebar-right-1'>～</b:section-contents>付近を指定しましたが、フッターの下に組み込まれてしまいました。<b:section-contents>Bloggerタグはどうやらセクションの中身を定義しているらしい。実体は別の所にあるようです。デベロッパーツールで画面レイアウトとソースコードの照合を行い、どうやらmainセクションに続くマクロによる定義群らしいと当たりを付けました。ここにサイドバーの構造を記述していると思われる個所があります。代替サイドバーを組み込んでみましょう。代替サイドバーにも条件式を付与して、モバイルバージョンで言語が日本語以外のときは表示しないようにします。

5行目が代替サイドバーのセクションです。divタグでwidthを指定しないとモバイルバージョンで横幅を確保できません。サイズはレイアウト画面を見ながら調整しました。
ブログソースコード
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class='column-right-outer'>
<div class='column-right-inner'>
  <aside>
  <div style='width: 310px;'>
    <b:section class='sidebar' cond='!data:blog.isMobileRequest or data:blog.locale == &quot;ja&quot;' id='sidebar-ex-1' name='sidebar-ex-1' showaddelement='no'/>
  </div>
  <macro:include id='main-column-right-sections' name='sections'>
    <macro:param default='2' name='num'/>
    <macro:param default='sidebar-right' name='idPrefix'/>
    <macro:param default='sidebar' name='class'/>
    <macro:param default='true' name='includeBottom'/>
  </macro:include>
  </aside>
</div>
</div>


レイアウト画面で確認すると成功です。代替サイドバーが組み込まれました。
右サイドバーから代替サイドバーにガジェットを移し替えます。右サイドバーは空になっています。

サイドバーに新たなセクションを追加しました

管理ツールで言語を切り替えて動作確認です。ですが、各ガジェットに表示／非表示制御を組み込んでいるのでこのままだとサイドバーの制御のテストになりません。そこでサイドバーに暫定で連絡フォームのガジェットを組み込みます。

言語が日本語だと各ガジェットと暫定の連絡フォームが表示されます。言語を切り替えると各ガジェットと暫定の連絡フォームが消えました。成功です。

暫定で組み込んだ連絡フォームが
表示されました 

重要以外の全てのガジェットが
消えました

これで、サイドバーの表示／非表示を自由に制御できるようになりました。
じゃあトップページをホームページに組み込むカストマイズを入れようとしましたが、ちょっと待て！！

それってUX的に正しいの？

ホームページを組み込むと、井戸掘りブログを従来から読んでる人にとっては、最新の記事に到達するのにワンクリック手間が増えます。しかも未読の記事があるのか否かはクリックしないと判りません。
新規訪問者向けのホームページですが、新規訪問者もブログを読み続けるとなったらホームページは余計です。

うーん、ホームページっていらなくね？

ということで、調査含めて3日程掛けた記事ですがボツです。サイドバーの表示／非表示制御はリンクチェック用に組み込み直しましょう。


感想と構想


使わなくなったサイドバーのセクションをレイアウト画面で見ると鬱陶しい。
テーマから<b:section-contents>Bloggerタグを削除しましたが、XMLファイルを読み込むと復元されています。消せないですね。

各ガジェットに苦労して組み込んだ表示／非表示制御ですが、元に戻すことにします。ソースが汚れるのは防ぎたい。

時刻: :
︿
blog.isMobileRequest=true, blog.local=ja がんばれ日本!!