ちむどろいど: Blogger

ラベル Blogger の投稿を表示しています。すべての投稿を表示

2014/11/25

Android版Chrome 39×Lollipopでサポートされたカスタムヘッダー/ステータスバーに対応する方法！

2014/11/25 10:32

Unknown

Tag: Android,Blogger

Android版Chromeでは、バージョン39にてサイト毎にテーマカラーのカスタマイズに対応し、（スマートフォン限定ながら）Android 5.0 Lollipop上ではそのテーマカラーでタブが表示されます。
また、Lollipopではステータスバーのアプリ毎のカラーカスタムにも対応していて、テーマカラーに応じてステータスバーの色も変わります。

上の画像の通り、カルーセル状の履歴一覧にてChromeタブ毎に履歴が表示されます。対応していればその色で、対応していなければ他のChromeタブと同じグレーで表示されます。サイト運営者なら是非対応したいところ。

Chrome v39 On Lollipop Supports Custom Multitasking Header/Status Bar Colors With A Simple HTML Tag - Android Police
Support for theme-color in Chrome 39 for Android - HTML5 Rocks

方法は簡単で、<head>～</head>の間に、以下のmetaタグを追加するだけ。

<meta name="theme-color" content="#ff7700">

太字のff7700の部分は、ウチのBlogで使った色です。
自分のサイトのテーマカラーとなる色に置き換えて追加してください。

テーマカスタムした結果（+竹内史さん画像提供）

Blogger利用者だと、テンプレート→HTMLの編集と進み、<head>タグのすぐ後にmetaタグを追加すると良いでしょう。
編集前にバックアップを取るのをお忘れなく。

また、Chromeでは将来高解像度のFaviconに対応するようです。推奨サイズは192×192。以下のようなlinkタグを<head>～</head>に追加します

<link rel="icon" sizes="192x192" href="Favicon画像のURL">

2014/04/08

広告は掲載者が適切に管理する時代！？AdSenseで掲載広告を管理・ブロックする方法！

2014/04/08 17:40

Unknown

Tag: Blogger

少し前の話題ですが、キングソフトの広告が悪質だと話題になりました。

Twitpic上の「警告！」悪質広告をキングソフトが釈明、「中国の代理店が勝手に」。取下げへ(更新) - Engadget Japanese

Engadget Japaneseより

キングソフトの件以外にも、スマホで広告を含むページを開くと、"警告"等のポップアップを表示するとともに、"OK"等をタップすると特定のファイルのダウンロードが始まったり、Playストアや偽ストアに誘導されるパターンがあります。

あたかもシステム（OS）からの警告とユーザーに誤認させ、狙ったアプリをインストールさせようとするのが特徴。

上記はWebページにおける話ですが、広告はWebページだけではなくアプリ内でも同じ。収益をあげるために手段を問わないケースもあるようです。

危険すぎる、権限確認をせずに他アプリをインストールするAndroidアプリが出現 - Appllio

Appllioより

これは広告ではないものの、ディベロッパーの収益のためにユーザーに特定アプリをインストールさせようとする例。この例では特定の権限を得ることでGoogle Playからユーザーの確認なしに端末にアプリをインストールさせます。

特に最近はお行儀の悪いアプリ・広告のニュースが後を絶たない状況で、これを見かねたのか、GoogleはAndroidアプリのディベロッパー向けポリシーを改訂し、アプリ内広告をディベロッパーが管理することとしました。

Google「ユーザーをだます広告はアプリ開発者の責任」　悪質なプロモーション手法を禁止に - Appllio

AdSense等を利用していれば、広告掲載前にある程度審査があるでしょうから、悪意のある広告を掲載してしまうことはほとんど無いでしょうが、全くないとは言い切れません。

悪意のある広告を狙って張り付けているならともかく、AdSenseなどの広告サービスを利用している場合でもこのポリシーに引っかかってしまう可能性が0ではないので、ディベロッパーの負担が増えるのでは…と個人的に少し心配しています。

アプリ内の広告がディベロッパーの責任なら、Blog内の広告は管理人の責任となりそうです。

閲覧者（特にPC初心者の方）が広告をクリックしたことで意図しないシステム内の変更やアプリのインストールが行われることの無いよう、表示する広告をコントロールすることが大切です。

長くなりましたが、AdSenseでの広告の管理方法について紹介します。

AdSenseページ→上部タブの"広告の許可とブロック"から管理することが出来ます。

広告主のURLからブロック出来ます

カテゴリからまとめてブロックすることも可能

デリケートなカテゴリでは特に注意してブロックする項目を選びたいところ

他のタブも駆使して、広告を事前にブロックする事が出来ますが、これでもすり抜けて表示されてしまうこともあります。

対応は後手に回りますが、一度表示された広告は、"広告（広告レビューセンター）"から確認出来ます。

初回時はリクエストを送信する必要があります

リクエスト送信から数時間で表示された広告を確認可能になります。

たくさん表示されるので、最初はフィルタから絞り込むのがいいと思います。

キーワードに"Download"とか"ダウンロード"とか入れて検索しましょう

※ダウンロードと付くものはBlog訪問者に不安を煽って特定ソフトをダウンロードさせようとしたり、ダウンロードボタンを表示させたりしてクリックを誘導するような広告が多いです。
一概に全て悪いとは言いませんが、抱き合わせでPCの設定を勝手に変更したり、別のソフトウェアを勝手にインストール場合もあります。

気に入らない広告はブロック出来ます

余裕があればフィルタをかけずに広告を確認したいところ

（表示頻度が高い順に表示されます）

気に入らないものはブロックしましょう

（※画像はイメージです。必ずしもこれらが悪意のある広告というわけではありません）

ブロックした広告は、"ブロック済み"ボタンから確認できます

ブロックしすぎると収益に影響するので見極めは難しいですが…
できればAdSense側でキチンと管理してほしいところですが、Blog管理人として掲載する広告に対する意識を高く持つのも大事かなぁと思います。

2014/02/08

”Bloggerの利用規約に違反している”として、ブログがロックされてしまった時の対処法

2014/02/08 23:02

Unknown

Tag: Blogger

”ウチのBlogに限ってそんなこと…”と思っていたら、遂にロックされてしまいましたorz

Bloggerは自動処理でロックされているため、間違ってロックされてしまうこともあるようです。

ブログが無効になっている場合、ブログはダッシュボードに一覧で表示されますが、クリックしてアクセスすることはできません。この場合、一定の期間、確認して元の状態に戻すようリクエストできます。ブログが無効になっているのは、自動分類システムによりスパムであるとマークされたためです。Google では、このような事態を回避するためにアルゴリズムの改善に努めていますが、この処理は自動化されているため、誤って分類される可能性もあります。スパムブログではないにもかかわらず、誤って分類された場合はお詫び申し上げます。
ブログが無効になっているのはなぜですか。 - Blogger ヘルプ

お詫びしますって言われても…（;￣ー￣A

ロック解除を申請するには、まずBlogger ダッシュボードにアクセスします。

あなたのブログの下に、”ロックされたブログ”という項目があるはずです。
ロックされているブログを確認して、右上にある”ロック解除の確認をリクエスト”をクリックします。

アカウントの確認が必要な場合もあります

この画面になって、やっと原因が確認できました。ちむどろいどの場合はマルウェアコードが原因とのこと。
通常は、この画面から原因を特定してその部分を修正・削除した後に解除の申請をすればいいのでしょう。

って、その件は先日、ChromeからBlog内にマルウェアコードが含まれていると警告が！？にて解決済みなんですが…
ウェブマスターツールを開くをクリックしてリンクを開いても”存在しません”となるし、ウェブマスターツールで確認しても、セキュリティの問題は検出されません。

問題なし！

思いっきり自動化の弊害に遭ってしまいましたorz
こうなるとロック解除方法がわかりません。いずれお知らせメールが来るでしょうが、”一定期間”しかロック解除申請できないとなると、来るかわからないメールを待てません。

困っていると、同じタイミングでロックされ、当Blogがロックされていることを教えてくださった、もちあるいてなんぼの中の方から解決法を教えていただきました。

blogger使っていたらgoogleにスパムブログと間違われた件 - いろいろ書いてみる日記

上記サイトに、Bloggerから届くメールの内容が公開されています。

http://www.blogger.com/unlock-blog.g?lockedBlogID=********** にアクセスして、ロックの解除を申請できます。
**********にはロックされたブログの管理画面にアクセスした際のURLに含まれるIDを入力します。（ブログ管理画面のURLは”https://www.blogger.com/blogger.g?blogID=**********”となっているはずです）

懐かしいレイアウトですね

ページにアクセスできたら、ブログを復元してもらうようフォームに記入して確認をリクエストすればOKです。
ちむどろいどでは既に修正済みだったためか、1～2時間程度でロック解除されました。ロック解除も自動みたいですね。

ページを運営する立場として、今後コードの使用にはあらためて細心の注意を払いたいと思います。

2014/01/27

ChromeからBlog内にマルウェアコードが含まれていると警告が！？

2014/01/27 23:17

Unknown

Tag: Blogger

当Blogの一番の利用者は私だと自負しているわけですが、先日Chrome（＝Googleセンセイ）から一部のページについてマルウェア判定をいただきました。

Chromeに搭載されているセーフブラウジング機能による警告です。

詳細を見てみると、きちんと説明をしてくれます。

同時に、ウェブマスターツールでもセキュリティの問題を指摘してくれます。

ここでは原因のURLまで表示してくれました

原因は、SiteMapのページでした。
SiteMapは、SiteMapページを公開しました♪で紹介したコード（abu-Farhanより）を利用していて、Googleでは”abu-Farhan.com”を問題視しているようです。

警告が出てから調べて知ったのですが、abu-Farhanのコードがマルウェア判定される件はあちこちで紹介されていて、使用しないようにするのが一番のようです。

SiteMapが公開できないのは残念ですが、訪問してくださる方に迷惑を掛けるわけにはいかないので、該当コードを削除し、再審査をリクエストしました。

再審査をリクエストする - ウェブマスターツールヘルプ

再審査をリクエストをクリック

対処の方法を書いてリクエストを送信

再審査は約1日かかるということでしたが、23時頃リクエストして翌日夕方にはセキュリティの警告は出なくなっていました。

Blog運営者として、こういったコードを使う時は十分に精査した上で利用しようと改めて反省させられる出来事でした。

2014/01/14

Feedburnerのフィードを他のアカウントで利用する方法

2014/01/14 21:53

Unknown

Tag: Blogger,Tips

Feedburnerで利用しているフィードを別のGoogleアカウントで使いたい時のフィード転送方法の備忘録です。

あまり需要の無い話ですが、Blog用に別アカウントを用意してそちらを使いたくなったり、今使っているGoogleアカウントを一度削除して新規に取り直したくなったりした時に利用します。

FeedBurner アカウント間でのフィードの転送 - FeedBurner ヘルプ

１．現在Feedburnerを利用しているアカウント（Aとする）でFeedburnerにログインする

２．ログイン後、新しいアカウント（Bとする）に転送したいFeedを選ぶ

３．Transfer Feed...をクリックする

４．BのGmailアドレスを入力し、”Send Transfer Acceptance Request”をクリックする

５．Bのアドレスに届いたURLをクリックして指示通り進めればフィードの転送は完了です。

注意点は以下の通りです。

フィードを転送すると、元のアカウント（A）ではそのフィードを管理できなくなります
→2つのアカウントで同時にフィードを管理することはできないようです
フィードで設定した各種設定はそのまま引き継がれます
Publicaze > SocializeでFeed更新時にツイートするよう設定し手いる場合、Twitterアカウントの認証は引き継がれないので、新しいFeedburnerアカウントで再度Twitterアカウントを認証する必要があります

2013/08/12

【Blogger】Google+への共有内容をコントロールした結果はこんな感じ

2013/08/12 22:57

Unknown

Tag: Blogger

【サイト管理者向け】Google+への共有内容や+1されるURLをコントロールする方法で紹介した方法を当Blogに適用したらこんな感じになるよというレビューです。

※なお、カスタムしたのは、Bloggerトップページ共有時の画像を指定したことと、コンテンツ（記事）より上部に存在する画像のサイズを80px×80px未満にしたことです。

１．PC表示の個別エントリを共有

URL：http://chimtty.blogspot.com/2013/08/google1url-bloggerjp.html

↓

問題なく記事の最初の画像が表示される

※記事より上部に80×80以上の画像があると、そちらが選択されてしまう

２．モバイル表示の個別エントリを共有

URL：http://chimtty.blogspot.com/2013/08/google1url-bloggerjp.html?m=1

↓

同じく記事の最初の画像が表示される

※記事より上部に80×80以上の画像があると、そちらが選択されてしまう

３．PC表示のトップページを共有

URL：http://chimtty.blogspot.com/

↓

指定した画像が表示される

※指定しないとページ内の80×80以上の最初の画像が選択される

４．モバイル表示のトップページを共有

URL：http://chimtty.blogspot.com/?m=1

↓

同じく指定した画像が表示される

※指定しないとページ内の80×80以上の最初の画像が選択される

20:56

Unknown

Tag: Blogger,GooglePlus

共有時の画像をコントロールしたい！

Google+にページを共有するときに、表示させる画像とかサイト運営側がコントロールできないかなぁと調べてみたら、意外と簡単に出来ることがわかりました。

スニペット - Google+ Platform - Google Developers

スニペットのページにて、タイトル・画像のURL・説明を入力し、出力されたコードを埋め込むことで共有時のタイトル・画像・説明を指定することが出来ます。
この方法を利用して、例えばどのページをGoogle+に共有されても、常にBlogのヘッダー画像を表示させたりすることが出来ます。

この方法を利用して、例えばBloggerトップページを共有されたときに表示させる画像を指定する方法を紹介します。

１．htmlタグ内に以下のコードを追加する

itemscope='itemscope' itemtype='http://schema.org/Blog'

※Bloggerではitemscope='itemscope'とする必要があります。

２．<head>～</head>の間に以下のコードを追加する

<b:if cond='data:blog.pageType == "index"'>
<meta itemprop="image" content="（表示させたい画像のURL）"/>
<b:else/>
</b:if>

※index（=トップページ）表示時のみmetaコードを表示させ、トップページ以外表示時にはmetaコードが表示しないようにしています。

とは言え、この方法で個別の記事を共有する時の画像を固定させることはあまり好ましくないかもしれません。
以前、Google+で私が個人的に実施したアンケートでは、共有時に表示される画像として好ましいのは記事内の最初の画像と答える方が圧倒的に多く、固定の画像（Blogのヘッダー画像など）がいいという方は殆どいませんでした。

個別記事にて、最初の画像（imgタグ）にitemprop="image"を挿入するのは大変なので他の方法があればいいのですが、私にはわかりませんでした（;￣ー￣A

指定がない場合、Google+ではHTMLコードを上から順番に見ていって、最初の画像を表示する仕様なのですが、80px×80px以上の最初の画像を共有すべき画像として識別するようです。
なので、記事内以外の画像が共有時に表示されて困る時は、記事より上にある画像のサイズを70px×70px以下にするなどすれば対応可能です。

また、ページ内に設置した+1ボタンが示す+1数がURL毎に散らばってしまう問題も解決可能です。

+1 ボタン>+1 ターゲット URL の設定 - Google+ Platform - Google Developers

同じコンテンツであってもURLが異なっていると、+1がURL毎にカウントされてしまうため、コンテンツに+1された数を正しく表示できなくなってしまいます。
Bloggerでは、国別ドメインの問題であったり、モバイル表示時にURLに?m=1が追加されることで、同じコンテンツでも表示時のURLが異なることがあります。

この問題の対処方法は以下の通りです。

１．+1ボタンにターゲットURLを指定する

Bloggerでは、data-hrefをexpr:data-href='data:post.canonicalUrl'とすることで対応可能です。

※ただし、設置した+1ボタン以外の方法で+1された場合（Google +1 ボタン）はこの方法ではコントロールできません。

２．正規化する

正規化 - ウェブマスターツールヘルプ
rel="canonical" 属性について - ウェブマスターツールヘルプ

上記リンクを参考にしながら、優先対象にするURLを決定し、それ以外のURLのhead内に<link rel="canonical" href="（優先対象URL）">を埋め込みます。

Bloggerでは、<b:include data='blog' name='all-head-content'/>というコードが既にhead内に含まれており、正規化の必要はありません。

Blogやサイト運営者の手助けになれば幸いです。

※コントロールした結果を紹介しています
→【Blogger】Google+への共有内容をコントロールした結果はこんな感じ

2013/08/07

【Blogger】ブログのトップページを共有するSNSボタンを設置する方法！

2013/08/07 11:12

Unknown

Tag: Blogger

Blogを開設している方なら、個別ページ向けのSNS共有用ボタンの他に、トップページ（ホームページ）向けの共有ボタンも設置したいと思う方もいらっしゃると思います。

footerに設置しました

SNS共有ボタンの設置方法は、

Bloggerに各種SNS共有ボタンを設置する方法！

にて紹介済みなので、このエントリと共に参考にしてみてください。

Blog内のどのページを表示していてもトップページを共有するためのURLがBloggerには用意されています。それが以下のコードです。

data:blog.canonicalHomepageUrl

今回は共有する対象のURLやhrefに”data:blog.canonicalHomepageUrl”を指定し、”expr:”をつけることでトップページの共有を実現します。

※canonicalがついているので、共有されたトップページの国別ドメインの違い（.jpや.com）に関わらず、共有された数の総数が集計され表示されます。

以下に、当Blogで現在使用している+1ボタンとTweetボタンの例を紹介します。

+1ボタン
<div class='g-plusone' data-size='medium' expr:data-href='data:blog.canonicalHomepageUrl'/>

Tweetボタン
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='anywhereTheJavascriptAPI' data-via='Chimtty' expr:data-text='data:blog.title' expr:data-url='data:blog.canonicalHomepageUrl' href='https://twitter.com/share'>Tweet</a>

※赤太字部分が今回ポイントのところ。

2013/08/05

カスタムテンプレートを使用した際のコメント機能に関するTips

2013/08/05 23:05

Unknown

Tag: Blogger

BTemplates

Bloggerユーザーの多くは、Bloggerにて用意されたテンプレートではなく、それぞれカスタムしたテンプレートを利用されていることと思います。

私はBTemplatesからMusicStoreというフリーのテンプレートをカスタムして利用していますが、困ったのはコメント欄でした。
Web表示ではコメント書き込み欄が表示されるのに、何故かモバイル表示だと書き込み欄だけ消えてしまう不具合が発生してしまいました。

以下に、私が調べた方法を紹介します。

１．従来のコメント機能を利用する

<b:include data='post' name='comments'/>の直後に<b:include data='post' name='comment-form'/>を追加することで対処できることがあるようです。

ですが、私の環境では

Web表示：コメントフォームが2つ表示される
モバイル表示：コメントフォームが1つ表示される

となってしまい、うまくいきませんでした。
どこか弄れば直りそうですが、いっそのことGoogle+のコメント機能を利用することにしました。

２．Google+のコメント機能を利用する

通常は、”このブログでGoogle+のコメントを使う”にチェックを入れればOK。

…ですが、カスタムテンプレートを使っているからかこのままでは何も変わらず、Google+コメント機能を使えなかったので、以下の手順で表示させてみました。

コメントを非表示にする

従来のコメントを非表示にした後に、以下のコードを好きな場所に貼り付けます。

<div class='cmt_iframe_holder'
expr:data-href='data:post.canonicalUrl'
expr:data-viewtype='data:post.viewType'/>
※Google+ のコメントについてよくある質問より

この手順を利用することでGoogle+コメント機能を実装できますが、従来のコメントが全く見えなくなってしまいます。

ですが、個人Blogのコメント欄にコメントするということはSNSが普及した今日あまり利用する機会が多いとは思えませんので、個人的には無くてもいいかなと思っています。
むしろGoogle+上での反応を表示することが出来るほうが面白いと感じました。

21:49

Unknown

Tag: Blogger,Google

Google検索結果のタイトルがtitleタグと異なる件にて紹介した、Googleが勝手にページタイトルを書き変えて検索結果を表示する件の続報です。

結論から書くと、結局htmlタグ（h1，h2など）を書き変えたりしてもGoogleによる書き変えを防ぐに至りませんでした。

そこで、Blogタイトルを変えることで対応してみました。

”chimtty”での検索結果

”chimtty net”での検索結果

”chimtty note”での検索結果

”Chimtty's Note”での検索結果

過去のタイトルやアカウント名で検索しても、きちんとBlogタイトル”ちむどろいど”が無事に表示されるようになりました(∩´∀｀)∩

ちなみに、Googleにタイトル変更をなるべく早く反映してもらうため、ウェブマスターツールのFetch as Google機能を利用しました。

Fetch as Googlebot ツールを使って Google へ URL の送信が可能になりました。（Webmaster Central Blog）によると、”新しいページの URL や更新したページの URL を Google へ送信して、インデックス登録をリクエストできる機能”ということで、タイト変更の反映も早くなるのではないかと思います（変わらないかもしれませんが）。

Google対策がタイトル変更という極めて残念な結果になってしまったのですが、今後Blogなどのページを開設する方へのアドバイスとしては、

アカウント名をタイトルに含めない
わかりやすい名前（出来れば日本語）にする
<title>タグをきちんと表示する
<h1>，<h2>タグなどをきちんと使用する

ことが大事だと思います。

2013/07/10

Blogの検索結果にGoogle+プロフィールを表示させる方法！

2013/07/10 20:57

Unknown

Tag: Blogger,GooglePlus

最近、Google検索で表示されるコンテンツに、Google+のプロフィールが表示されることが増えてきました。

こんな感じのやつ

せっかくなので、当Blogの検索結果でも表示できたらいいなぁと思い、調べてみました。

検索結果内の著者情報 - ウェブマスターツール

手順は以下の通りです。

・コンテンツと同じドメインのメールアドレスを使用している場合
自分のコンテンツにGoogle+プロフィールをリンクに従って登録するだけ。（今回は解説しません）

・コンテンツと同じドメインのメールアドレスを使用していない場合
当BlogのURLは”http://chimtty.blogspot.com”で、同じドメインのメールアドレスを持っていないので、以下の手順で設定します。

１．Google+プロフィールへのリンクを作成する
以下の記述をBlogの投稿内に追加します。