はてなブログのカスタマイズをGWに色々とやってみたのでメモφ(..)

ゴールデンウィークの楽しみ

さて皆さん、ＧＷの後半戦が始まっていますが楽しんでいますか？
私は「投げ売りSSD 240GB」を安価に買えたのですが、「SSD外付けケース」がまだ届かないのでまだSSDで遊ぶことが出来ません(^-^;

そして、普通に今日もお仕事をしていたりするのであまりＧＷという感じはしなかったりも・・・。
もちろん間借りしている職場には誰も出社していなくて私１人だけがいる状況(;_;)

で、何もしないでＧＷを過ごすのもアレなので、せっかくノンビリしつついるので、ブログのカスタマイズをやってみたりしました！

私のゴールデンウイークはブログカスタマイズで彩るという事で(^o^;

今週のお題「ゴールデンウィーク2016」

PC表示の改善

まずはPC表示の右上に取り付けていた「相互RSS」を一番上に表示するのをやめました。

結構読み込むのに時間が掛かり、真っ白い箱が表示されている時間が長く、

「あれ？何を読み込み中なんだろう？」

とブログ読者の方に思わせてしまうな、と思いまして表示を少々下へと移動しました。

どこに移動したかと言いますと・・・

右のサイドバーの「カテゴリー」と「サイドバー」の間に移動しました。

また、本日相互RSSのブログが「生存しているか？」（現存しているか）をチェックしたところ、5ブログほど消えていました(;_;)
下火になっている相互RSSをブログに付けておくのが良いのかどうか、近々判断して場合によっては相互RSSを外すかもしれません(-_-;
その場合には相互RSSして頂いているブログにはきちんとお知らせさせて頂いてから外す様にしたいと思っています。

続いてはブログ記事下のシェアボタンを「はてなブログ公式」からブロガーさんが作ってくれたものへ移行しました！

シェアボタンの変更方法を紹介しますね(^-^)v

PC表示シェアボタンの変更

PC表示のシェアボタンを「はてな公式」シェアボタンから変更します！
shun (id:shun_prog0929) さんのコードを使わせて頂きました(^-^)/

今回はSNSシェアボタンのデザインをオシャレにしちゃいます！
はてなブログのデフォルトのシェアボタンは表示も割と遅く、デザインも他のデザインから浮いてしまうことが多いですよね。
というわけで、シンプルで導入しやすいSNSシェアボタンをコピペのみで使えるように紹介したいと思います！

コピペ一発！はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ！

ただJQueryを使ったハテブやFacebookのカウントを取得するのを実装すると、はてブの新着エントリーと人気エントリーのブログパーツの「はてブ数」が全部表示している記事の「はてブ数」に書き換えられてしまい、私のブログでは使えませんでした(;_;)
うぅ、残念。

スマホ表示の改善

続いてスマホ版の改良点をば。

こちらもPC表示と同じくシェアボタンを「はてなブログ公式」からブロガーさん作成の物へ変更し、これまで付けていなかった「記事上」にも表示する様にしました！

また同様に「記事下」のシェアボタンも変更しました。

あと最近気付いたのですが、スマホ表示の時にカテゴリーページへの移動手段が無かったんですよね。
「はてな公式スマホ表示」だと。
それでカテゴリーページへ移動するためのメニューを付けました！

画面右上に出ている「横棒三本」がメニューボタンになっていて、押すと半透明メニューが出てきます。
これでいずれかのカテゴリーを選んでみると・・・

この様にカテゴリーページの記事一覧へ移動します！

と、スマホ表示で切り替えたことは以上です。
参考にさせて頂いたブログをご紹介させて頂きます！

スマホ表示シェアボタンをオシャレに！

「はてな公式シェアボタンは遅い！」という噂が絶えなかったので、今回ブログのアクセスも落ちたりしたので多少なりとも速度改善も期待して公式シェアボタンを外しました(^-^;

スマホ用のを使わせて頂いたのは だいぱんまん (id:donchan922) さん。

このシェアボタンのいいところは3つ。

1. CSSのみ（javascriptなし）で作ったので、動作が軽い
2. 色合いが綺麗
3. 一列でシェアボタンを表現できる（横幅320pxベース）

コードを載せておきますので、ご自由にお使いください。

はてなブログでCSSのみを用いてフラットデザインのおしゃれなスマホ用シェアボタンをつくってみた

色どりキレイな素敵なシェアボタンをありがとうございます(^-^)/

スマホ表示にメニューを付ける方法

スマホ表示で「カテゴリー」メニューを表示するのには みずな (id:miz7maki) さんのコードを使わせて頂きました(^-^)/

今回は簡単に自力でゴリゴリ書いてみました！
入れ子式サブカテゴリ表示にはしていないのですが、追々そんな風にできたらいいですね！
あと背景画像の素材の味(?)を活かしたかったのでメニューは透過処理しています。
こんな感じになりました(￣▽￣;)

[デザイン] - [スマートフォン] - [ヘッダ]でjavascript,CSSともにHTML内に埋め込んでみました。
上記PC版の[デザインCSS]内に記述するのもアリなのですが、スマートフォンの時だけスクリプト読み込むようにしてPC版で少しでも負荷減らしたかったのでこうしました。
javascriptではメニューボタンをトグルスイッチでメニュー表示のON/OFFできるようにしています。
CSSでは背景色の透過やメニューリストの行幅などの調整をしています。

はてなブログにナビゲーションメニューを追加してみた！

こちらのスマホ版の方のみを使わせてもらって、表示位置だけ微調整して使わせて頂きました！
凄くキレイで気に入っています♪

まとめ

という訳で、はてなブログのＰＣ表示とスマホ表示の両方に手を入れてチョコチョコと変えてみました♪
見た目が変わると気分も変わるという事で。

これで減ったアクセスも回復してくれると良いのですが、そこばっかりは地道なリライトもしつつ様子を見ようかと(^-^;

他にも色々と変えたい所なのですが、いじくるとデザインが壊れたりJavaScriptがうまく動作しなかったりとトラブル続きなのでまだ変更しきれていません(^o^;
しばらく所々ブログのデザインが変わっていくかと思いますが、楽しみつつ見て頂ければ幸いです(*^_^*)

「あわせて読みたい」と「カスタム相互RSS」が表示されない!?あのサービスの停止余波!

ブログパーツの停止

昨夜の事、寝る前にパソコンでブログをチェックしたら思わぬ事態に。

相互RSSが真っ白けっけになっています(^^;
普段ならここに20位のブログの最新記事が載っているんです。
それが１つも表示されていない・・・。

「いかん！これでは相互RSSをしていてくれている人に申し訳ない(>_<)」

と思いつつも、さらに疑念が湧きます。

「止まったのはこれだけか？ん？もしや？」

と思って記事下に移動したら「あわせて読みたい」ウィジェットも表示されなくなっていました(T_T)

Yahoo! Pipesの停止

「遂に審判の日が来たのか・・・」

という想いがよぎります。
そう「あわせて読みたい」ウィジェットはもう余命わずかのサービスだったのです(;_;)
でもずっと使い続けて来て愛着もあり、直帰率改善にもかなり貢献して頂いていたので、命尽きるまで運命を共に過ごそうと思っていました。
そして遂にその日を迎えてしまったのです(/_;)

事の発端は2015年8月のこと。
「あわせて読みたい」ウィジェットの継続利用ができなくなる旨を、開発者の池田仮名 (id:bulldra) さんがブログにて公開されました。

Yahoo Pipesが停止するのでブログパーツも利用不可
以前にも書きましたが、Yahoo Pipesの終了がアナウンスされました。2015年8月30日以降は新しい Pipes が作れなくなり、同年9月30日に終了とのことです。

これに伴って、Yahoo Pipesの機能に依存している「旧あわせて読みたい」「ブログカード版あわせて読みたい」「トラックバック」といったブログパーツが2015年9月30日より利用不可となります。

Yahoo Pipesが停止するので旧「あわせて読みたい」は利用不可となります - 太陽がまぶしかったから

Yahoo!が提供していた「Yahoo Pipes」というサービスが停止されるそうで、それに伴って「あわせて読みたい」ウィジェットは2015/9/30より使えなくなるというアナウンスでした。
ですが幸い9/30以降も動いていたので、そのまま利用してきましたが遂に「Yahoo Pipes」のサービス自体が停止したのかもしれません(;_;)

と、これは止むを得ない事です。

「いよいよ次期バージョンの『あわせて読みたいＧ』ウィジェットに乗り換える日が来た」

との想いで、サブブログを見に行きます。

Web言語のお勉強～ど素人が往く～

サブブログには先行して『あわせて読みたいＧ』ウィジェットを導入してありました(^^)v
ちなみに『あわせて読みたいＧ』ウィジェットとは・・・

はてなブログ用「あわせて読みたいG」
上記で紹介したカテゴリ表示に対応した記事を表示させるブログパーツについては、内部的にいくつかの問題があって放置していたのですが、『はてなブログカードガチャをブログパーツ化して自分のブログに設置できるようにしたよ - 太陽がまぶしかったから』とマージして実現する事にしました。

• セレクトボックスの内容から指定枚数のブログカードをランダム表示
• 表示エントリのカテゴリを初期設定
• 表示内容の更新が可能
• 「アーカイブ」「はてなブックマーク」「カテゴリ一覧」画面への移動が可能

要するに言えば「カテゴリ別ブログカードガチャ」を表示記事のカテゴリに合わせてロード時に実行させる事で「カテゴリ別あわせて読みたい」の機能を代替させるということです。

はてなブログの記事下に関連記事を表示する「あわせて読みたいG」 - 太陽がまぶしかったから

との事で新バージョンの関連記事を表示してくれるウィジェットになります(^^)v

で、実際に見に行くと・・・

あれ？
ウィジェットのメニューバーだけで関連記事が表示されていません・・・(・_・)？
どうした事でしょう？

本家本元のブログ「太陽がまぶしかったから」に行って確認してみると・・・

こっちでも表示されていない(>_<)

新しい方の『あわせて読みたいＧ』ウィジェットは「Yahoo Pipes」のサービスは利用していなかったはず・・・。
あれれ？

「Yahoo Pipes」のサービス以外にも同時期にサービス提供が終わったものがあったんでしょうかね？
えぇえ！？

Twitterで調べる

きっと困っているのは私だけではないはずなので、Twitterに調べに行くと・・・、いました！

Google Feed APIが終わったとか。Yahoo! Pipesが終わって今度はこっちか。いろいろめんどくさい。ひどい。

— linclip (@linclip) 2015年12月2日

お！？
Google Feed APIというAPIサービスが終了した様ですね。
「Yahoo! Pipes」サービスが終わり、次いで「Google Feed API」サービスも終了した、と。
しかもほぼ同時期に！？

RSS広告削除社が不安定なのでYahooPipesに移行したらサービス終了したのでGoogleFeedAPIに移行したらまた終了とな……。もはや笑うしかない。

— Ｌ.Ｎ (@lordnoesis) 2015年12月2日

こちらの方も「YahooPipes」→「GoogleFeedAPI」と移行していたのに、順次サービス終了となってしまい困り果てる感じに(^-^;

では「Google Feed API」について調べてみます。

・・・

ありました！

お久しぶりです。個人的に大きなニュースが飛び込んできたので記事にします。
Google Feed API が403エラーを吐くようになった
このページにたどり着いている方はもうご存知だと思いますが、Google Feed API が403エラーを吐くようになりました。

Google スプレッドシートで代替可能との情報…
Google スプレッドシートには、スプレッドシートの情報を JSON でウェブに公開してくれる機能がありますが、それを利用した Google Feed API に代わる RSS の JSON 取得方法が Twitter などで話題になっています。

http://press.treastrain.jp/abolition-of-google-feed-api/

との事で、「Google Feed API」で出来た事は「Google スプレッドシート」の機能を使う事で代替可能らしいです(^^;
と、私が出来る事はここまでかな、と。

あとは「あわせて読みたいG」開発者の池田仮名 (id:bulldra) さんがきっと直してくれる事を期待しつつ気長に待っていたいと思います(^^)v

おまけ

ゆきひー (id:ftmaccho)さんも似た様な関連記事表示ウィジェットを作られていましたので見に行きます。

はてなブログで同じカテゴリの記事をランダム順に表示して関連記事っぽいものを作るカスタマイズ - Yukihy Life

でもこちらも現在は表示されていないのかな？
「Google Feed API」を利用されていたのかな？
ちょっと分からないですね(^^;

しばしはこのGoogle Feed APIサービスの利用停止の余波がブログ界隈を賑わせそうですね(^o^;

追記

とりあえず「相互RSS」は懐かしのライブドア相互RSSを利用する事にしました(^^;

こんな感じです。
livedoor相互RSSを利用したい方は下記に設置方法を書いていますので参考にして下さい。

また、「あわせて読みたい」ウィジェットも今朝IDコールで池田仮名さんにお願いしたら、すぐさま対応して頂きました(^-^)/
暫定対応版という事ですが、直帰率の改善に役立ちますので早速使わせてもらいました！

http://bulldra.hatenablog.com/entry/read-together-h

私のブログにはそのまま適用すると色々と表示でマズイ部分があったので、一部スタイルを適用していない関係で見た目は悪いですが、ご容赦下さい(^-^;

とりあえずは、暫定対応できたので良かったです♪
池田仮名さんありがとうございます(*^-^*)/

AccessAnalyzer(アクセスアナライザー)の障害発生とその回避策（道半ば）

アクセス急減

2015/07/14の午前中くらいから当ブログのアクセスが急減しました(>_<)
色々と調査したところ、実際のアクセスは減っていなくて、利用していたアクセス解析ツールの不具合でうまく解析できなくなっていただけでした。

ですが、ブログの記事表示後のスターやブックマークボタン等のJavaScript処理がうまく動作せずブログが中途半端に表示される状態になってしまっていました(-_-;

「これはマズイ・・・」

と、一時しのぎで2015/07/15の未明に、通常の「タグ」から「携帯端末向けタグ」に差し替えました。

これでブログの表示遅延やJavaScriptが走らない問題は解決しました。

で、上記の対応後にアクセス解析を見ると、アクセスの詳細が分からなくなってしまっていました(>_<)

ブログの記事名は取れなくなっているし、どのページから遷移してきたのかの情報の参照元も取得できなくなっていました。
これでは全然アクセスの詳細が分からなくて、分析をしたり、外部からの攻撃を受けた時の犯人探し等が出来なくなってしまいます(;_;)

以前、外部攻撃を受けた時に撃退した話は下記。

携帯端末向けタグの使用では、本運用には耐えられないことが分かったので、色々と対策を講じる事にしました。
道半ばの状態ではありますが、今週困って過ごしたアクセスアナライザーファンの方も多かったと思いますので、一端ここまでに得られた情報の共有をさせて頂き、週末のカスタマイズに活かして頂ければと思います<(_ _)>

ブコメにて色々と

私が報告させてもらったAccessAnalyzer(アクセスアナライザー)の障害報告に、多くのAccessAnalyzer利用者の方からブコメを頂きましたのでご紹介させて頂きます。

id:wiz7さん
これ。。昨夜、マネーさんと全く同じことやってました。結論としてスクリプト内のURLのj1などの数字をj2などにして暫定回避してます。僕のは記事の先頭に埋め込んでたので全記事一網打尽でした。あとで記事にします。

id:wiz7さんもアクセスアナライザーを利用されてたんですね！
しかもスクリプト内の数値の書き換えで暫定回避なんて出来るんですか！？
これは記事が楽しみです(^-^)w

id:miz7makiさん
私も昨晩同じ現象おきてました。Chromeの要素解析ツールで例のタグだけ34.9sかかっていたので、一旦撤去して症状改善しました(^^; xreaのアクセス解析サービスは結構便利なんですけどね( ノД`)…

id:miz7makiさんはアプリも作られたりと、プログラムに明るい方。
Chromeの要素解析ツールでアクセスアナライザーのタグだけ34.9秒も掛かっていたんですか(-_-;
どおりで読み込みが遅い訳ですよね～(;_;)
アクセスアナライザー便利で今更離れられないのがありますよね～(^o^;

id:hapilakiさん
私のところも同じでした＞＜とりあえずコードをfooterに移動させましたね。

そうでした、id:hapilakiさんもアクセスアナライザーファンの1人でした♪
コードをフッターに移行する事で回避されたんですね。
確かにフッター部分なら、はてなブログのJavaScriptとかが走った後に動いてくれるかもしれないですね！

アクセスアナライザーファンの皆さん、貴重な情報をお寄せ頂きありがとうございました(^-^)/

二重化した解析サーバーの2台目を使う！

で、先ほどのブコメを頂いたid:wiz7さんが2015/07/16に詳細を記事にしてアップしてくれました。

僕は2つのアクセス解析を使っています。一つは天下の「GoolgeAnalytics」、もう一つは「AccessAnalyzer（アクセスアナライ ザ―）」というものです。ちなみに、アクセス解析ツールに「アクセスアナライザー」を採用したきっかけは、マネーさん(id:MoneyReport)の記事だったのでした。ご紹介感謝で す！

一昨日、このAccessAnalyzer（アクセスアナライザ―）を何気なく見るとアクセスが激減していることに気付きました。前日の約半分です。

～中略～

アクセスアナライザ―のページを徘徊している途中、ある記述を発見しました。以下はFAQの一節です。

■アクセス解析サーバーにつながりません
スクリプト呼び出し、解析サーバーはそれぞれ二重化しています。「w1」「x1」「j1」であれば数字の「1」の部分を「2」と変えていただく事で障害の影響を回避できます。

「障害が発生するサービスなので、イザというときは自分で調整してね！てへペロッ！」のようなノリです。そもそもスクリプトは一つ一つの記事に手動で埋め込んでいるのですが……。（←僕だけ？？）すこし面食らってしまいました。

アクセスアナライザーの障害で、全ての記事が見られなくなった話。 - 今日はハッピーエンドを書こう。

おぉ！
アクセス解析サーバーがうまく動かない時は、サブのサーバーが稼働していて、そちらに割り振れば大丈夫なんですね！

って、それはサーバー側で自動でやって下さいよ～(ToT)

普通、大きめのシステムはサーバーを2台用意してあって、メインサーバーが落ちた時にはサブのサーバーに自動で切り替わってサービスの提供継続を行います。
ところが、アクセスアナライザーの解析サーバーは二重化（2台ある）されていますが、両方が継続してアクセス解析を行うけれども、片方が落ちた時にもう片方が出張ってきて「後の処理は俺が引き継ぐ！」とかってやってくれない模様(T_T)
片方のサーバーが落ちても「お前は落ちた、俺は落ちてないエッヘン♪」と言うだけで、利用者にサービス継続のための繋ぎ換えは提供していない、と・・・。

なんと、利用者の我々がスクリプトを書き換えないと二重化された解析サーバーの2台目を利用できない仕組みになっています！
そんな面倒な仕組みになっているとは・・・ｏｒｚ

改めて、その記載をアクセスアナライザーのHPから探します。
上部メニューの「FAQ」から辿るとありました！

■アクセス解析サーバーにつながりません
スクリプト呼び出し、解析サーバーはそれぞれ二重化しています。「w1」「x1」「j1」であれば数字の「1」の部分を「2」と変えていただく事で障害の影響を回避できます。

アクセス解析 (AccessAnalyzer.com)　FAQ

へぇ～、こんな方法で切り替えられたんですね～。
10年以上アクセスアナライザーを使っていますが、全く知りませんでした(^o^;
コードを書き換えて回避できるんなら、しかも二重化サーバーで常に2台目の解析サーバーも動いているんなら、普段からこの方法を利用して2台目のサーバーに繋いでおけば良いじゃないですか！！！

ねぇ、この方法にしておきましょうよ♪

アクセスアナライザー初心者の方へ

そうそう、ここ数年安定して動いていたので周知を忘れていました。

アクセスアナライザーは数年に1度ほぼ使い物にならなくなる時期がある！

のです(;o;)
って、半ば致命傷ですね(-_-;

私はアクセスアナライザーを使い始めて、もう10年選手なので慣れっこですが初めてアクセスアナライザーの障害に遭う方には驚きですよね(^-^;

数年に1回位の頻度でアクセスアナライザーは使い物にならなくなる時期があったんですよ～。
今回みたいに1日2日で復旧するのはかなりラッキーな方で、ダメな時は3ヶ月くらいまともにアクセス解析してくれない時期もありました(-_-;
もう忘れた頃にアクセスしてみたら、再びアクセス解析してくれるようになっていて

「あ、復旧してたラッキー♪」

みたいな感じでした(^^;

で、こういう使い物にならない時期は大抵の場合、アクセスアナライザーのスクリプト読み込み遅延が発生して、ブログやサイトの＜body＞タグ直下とかに書いておくと、ブログもサイトもほとんど何も表示されなくなる、という事象が起きます。

というか起きました(T_T)
私の昔使っていたブログが本文が何も表示されない事態に陥り、色々と調査してみたら

「アクセスアナライザーのスクリプトコードが犯人だったとは・・・」

という事がありまして。
それ以来、アクセスアナライザーのタグはなるべく下の方に貼り付ける様にしました。
定期的に遅延が発生していた時期もあったので、こうしないとこっちまで被害を受ける事になったので、自然とこういう対処をしていました。
なのでもう一度、初心者の方にアドバイスをすると

アクセスアナライザーのタグはBODY直下に貼らずに、記事やサイドバーの下に貼ること！

そうしないと、ある日突然「記事が何も表示されていない・・・」という事態に直面するのでお気をつけ下さい(>_<)

JavaScriptを非同期にして回避する

ぽけっとしすてむ (id:psne)さんがブコメにてアドバイスをくれていたのですが、更に記事にて詳細をアップしてくれました(^-^)w

この書き方の場合、次の障害の時に「最後まで表示されているけど何だか表示できなくて画面固まってる」状態になってしまうので補足。

非同期に読み込みさせればおそらく解決
読み込むまで画面表示を停止させる書き方になっているので、

＜script src="http://example.com/" type="text/javascript" async ＞＜/script＞

asyncと追加すれば「後でスクリプトを読む」という感じになります。
しかし、よく見るとグローバルな部分に「ID」や各種設定の変数が存在しているので、何か別のスクリプトが先に読み書きをして値が変わってしまうと、それはそれで上手く動かなくなって辛いという事が予想されます。

読み込みをブロックするスクリプトをどうにかしたい - すなばいじり

ふむふむ。
scriptタグに「async」と記述を追加するだけで非同期で動かせるんですか！
それは便利そうですね♪

アクセスアナライザーのＦＡＱも読まれて「コード改変だからダメか～」という所までチェックして下さっています。

■貼り付けHTMLを改変してもいい？
一切の改変を禁止しております。ユーザー削除となる場合がありますので、公式なオプション以外の変更は行わないで下さい。

アクセス解析 (AccessAnalyzer.com)　FAQ

うーん。
でもですねぇ正直、アクセスアナライザーってまともにサポートされてない感じなので、個別の利用者のコード改変までチェックする体制なんて取れてないと思うんですよね～(-_-;

だから書き換えてもバレないんじゃないかな、と(^o^;

と、言うわけで早速上記の「async」をスクリプトコードに追加して、はてなブログのデザインを試すと・・・

「ん？何も表示されない(ToT)」

という事態に。
グローバルな部分に「ID」や各種設定の変数が存在してそちらの読み込みと一致しないのが原因でしょうかね？
残念ながら非同期ではアクセスアナライザーのコードはうまく動作しませんでしたので、こちらの案は諦めさせて頂きます。

ユーザーフォーラムでも話題に！

「もっと何か有用な情報はないかな～」とアクセスアナライザーのＨＰを探していたら、あったあったありました！
非常に便利なユーザーフォーラムが！

■サポート・ユーザー掲示板
サポート宛にご質問いただく前に、掲示板を閲覧・ご質問下さい。ユーザー様同士で簡単に解決できることがよくあります。ご協力をお願いいたします。
ユーザーフォーラムはこちら

■サポートフォーム
VALUE-DOMAIN お問い合わせフォームで受付しております。サポートスタッフの作業・対応が必要な用件の場合はご連絡下さい。
1)ご返答までに、通常、48時間程度掛かります。混雑時はそれ以上かかかります。
2)サポート・ユーザー掲示板で同じ話題が何度も登場している、自己解決できる場合は、ご返答出来ません。
3)パスワードはログインページからご取得いただけます。

アクセス解析 (AccessAnalyzer.com)　サポート

ユーザーフォーラムなんてあるの全然知りませんでした(^-^;
もう10年以上アクセスアナライザー使ってますが、こんな掲示板の存在に気付いていませんでした。

また、サポートフォームから連絡すれば調査等もしてもらえるとの事。
今度、障害が発生した時には問い合わせしてみようかな、と思います。

で、先ほどのユーザーフォーラムを覗いてみましょう。

ユーザーフォーラム:その他・雑談

おぉ！
今回の一件についても話題に上っています！

アクセス解析をつけるとサイトが読み込まれない
投稿日 ： 2015/07/14(Tue) 22:00
投稿者 ： Xr
21時30分頃から、こちらのアクセス解析を利用しているサイトで
ページが表示されづらくなっています。
アクセス解析を外すと改善されます。
メンテナンスの情報には何も無いのですが、なにかあったんでしょうか。

Re: アクセス解析をつけるとサイトが読み込まれない
投稿日 ： 2015/07/17(Fri) 14:05
投稿者 ： スタッフ ◆E/OpKM6SnFQ
Xr 様
未来 様
pen 様
su-san 様
chibaｊin 様
平素は弊社サービスをご利用いただき、誠にありがとうございます。
また、ご連絡が遅くなり、ご迷惑をおかけしましたことを、心よりお詫び申し上げます。
この度の症状につきましては、システムリニューアルの影響で不具合が生じておりましたので、修正させていただきました。
http://mainte.value-domain.com/eventview.cgi?host=AccessAnalyzerAll&no=21
改めてお詫び申し上げますと共に、以上、何卒よろしくお願い申し上げます。

Re: アクセス解析をつけるとサイトが読み込まれない
投稿日 ： 2015/07/17(Fri) 16:31
投稿者 ： 未来
スタッフ ◆E/OpKM6SnFQ　ご苦労様です。
正常にカウントしているとは思えないんですが・・・汗
他と解析と比べて明らかに少ないので　しばらく様子をみます

アクセス解析をつけるとサイトが読み込まれない

やっぱり皆さん2015/07/14から困っていましたね！
そして、アクセスアナライザースタッフの方まで出てきて解決報告をしてくれて、でもその後もアクセス数が少な目に計上されているのが起きているようで、まだ完全復活にはなっていないのが現状の様です。

ただ今後の動きや、他のユーザーが困っている事象については、こちらのユーザーフォーラムを覗く事で大抵の話題にはついて行けそうです(^-^)w

アクセスアナライザーの障害の話題なんて、Google先生はおろかTwitter上でも話題にならない位の話なので、内輪で話せるユーザーフォーラムくらいしか情報源がないのが正直なところなのかもしれません(^^;

結局の所の対応

最終的に、二重化解析サーバーの2台目を使うようにタグを書き換えて、ブログのフッターに貼り付けました！

これで今後障害が起きてもブログへの被害は最小限にとどめる事が出来ます(^-^)w
携帯端末向けタグだと参照元や記事名すらも分からないので、通常タグで「1」を「2」に書き換えて使っています。
1日使ってみた感じとしては割と正常に動いていますが、しかしユーザーフォーラムにも記載があった様に、他のアクセス解析と比較して7割程度のアクセス数しか拾っていない感じです(^o^;
本復旧にはまだ時間が掛かりそうです。

・・・

って、今改めてアクセス解析をアクセスアナライザーとはてなカウンターで比較したら2015/07/18 07:00以降は数値がピッタリ一致しています！
ユニーク数が一緒で、ヒット数（PV）はアクセスアナライザーの方が多めです。
これは正常時もそんな推移でしたので、今朝7時から完全復活したのかもしれません！！！

もう少し推移を見守る必要がありますが、完全復活の場合にもタグをフッター等に移動する対応はされておいて下さい。
またいつ障害が発生してブログ記事本文が表示されなくなるか分かりませんから(^o^;

まとめ

• 2015/07/14～2015/07/15に掛けて障害発生。2015/07/15 16:00に復旧した模様。
• 障害発生時にはタグの「j1」、「w1」を「j2」、「w2」に書き換える事で被害を避ける事が出来る！
• ユーザーフォーラムあり！障害発生時にはこちらを見ましょう！

記事タイトルに「B!」はてなブックマークボタンを設置！「あとで読む」機能の追加！

問題です

久々の深夜更新です。

突然ですが、問題です。
私のブログを本日カスタマイズしました。
下記の画像を見て、何が昨日までと比べて変わったのかを答えて下さい。

PC表示。何が変わったのか分かりますか？

続いてスマホ表示。どこが変わったでしょう？

よーく、見てみて下さいね。

正解

と、早速正解を見てみましょう(^-^)/（夜中に引っ張っても皆さん、もう眠いですよね(^^;）

PC表示。日付のすぐ右に「B!あとで読む」が追加されています(^-^)w

スマホ表示。日付行の右側に「B!あとで読む」を追加しています！

皆さん、当たっていましたか(^_-)-☆

種明かし

今回ブログのカスタマイズに利用させて頂いたのは、池田仮名 (id:bulldra)さん提供のコードとCSSです。

「B!」はてなブックマークボタンを記事タイトルにネイティブっぽく設置 - 太陽がまぶしかったから

記事タイトルにはてブボタンを設置

　記事タイトルにシェアボタンを設置しているブログも多いのですが、表示処理が目線に追いついてなかったり、記事を読むまえからズラズラっとボタンや広告が表示されると萎えてしまうことがあります。個人の感想ですが。

　そうはいっても、「あとで読む」ためにブクマをしておきたいとか、タイトルだけで大喜利をしたくなるという用途もわかるので、タイトル部分にアイコンフォントではてなブックマークへのリンクを設置する方法を考えました。

丁度、私もブログ記事の先頭に「はてなブックマーク」へのシェアボタンを付けたいな～、と思っていた矢先だったので、すぐに利用させてもらいました！

css

コードに付いては池田仮名 (id:bulldra)さんの先ほどの記事から取得され利用されて下さい。
以前、私の記事にも引用させてもらった後に、バグが見付かって修正されましたが、私がそれに気付かずに古いコードを晒していたがために、池田仮名さんにご迷惑を掛けた事があったので、今回はコードは掲載しません。

ただ、私のブログに合わせてカスタマイズしたCSSのみ紹介させてもらいたいと思います。

PC用が下記。

.head_share_bookmark{
  color: #008fde !important;
  font-size:80%;
  position:absolute;
  top: 2px;
  left: 80px;
  font-weight: bold;
}

池田仮名さんのCSSからの変更点は、colorを白色から「はてブ色」である濃い水色に変更しました。
はてブのカラーは自分で調べた感じでは「#008fde」でした。

また、top（上）からの離れを「5px」→「2px」に変更。
right（右）からの離れを「5px」→left（左）からの離れ「80px」に変更。

これで日付のすぐ右に「B!あとで読む」が表示される様になりました(^-^)w

スマホ用が下記。

<style>
.head_share_bookmark{
  color: 008fde !important;
  font-size:80%;
  position:absolute;
  top: 2px;
  right: 5px;
  font-weight: bold;
}
</style>

変更点は、colorを白色から「はてブ色」に変更。
top（上）からの離れを「5px」→「2px」に変更。

これで、スマホ表示時に日付欄の行の右端に「B!あとで読む」が表示される様に！

これで「後から読んでくれる人が増える」様になると良いな～、と思います。
私のブログ記事って、普通に3,000文字とか書いているので、読んでいる方によっては

「ちょっと、長いって文章が！」

と思われる方もいらっしゃるんじゃないかと(^^;
実際、ブコメでも時々

「本題に入るまでが長いよ・・・」

と書かれたりする事もあるので、はてなブックマークをするがために、下までスクロールするのも大変かな、と。
折角、ブクマする気分になってもシェアボタンまでが遠いがために、ブクマしてもらえていない事もあるんじゃないかな、と(-_-;

だからと言って記事を短くも出来ないので、

「だったら記事先頭にも『はてブボタン』があれば良いのにな～」

と思っていた矢先に、池田仮名さんの記事を見掛けたので

「これは使わせてもらおう！」

と思い立ち、早速反映してみました！
読者の皆様には、ぜひお急ぎの時などに「あとで読む！」ために記事先頭のブクマボタンをご利用頂ければと思います(^-^)w

はてなブログのスマホ用ヘッダーとフッターを消す方法！(Pro限定)

はてなブログカスタマイズ

今朝、読者登録しているブロガーさん達の記事を読んでいたら、鈴木こあら (id:suzukidesu23)さんが「はてなブログ」のヘッダーとフッターを非表示にされていました。
はてなスターも通知が多過ぎて困り、非表示にされるとか。

この辺の調整はブロガーさんに任されている部分なので全然良いと思います。
ただ気になったのは、スマホで見たら

ヘッダーは出ているし

フッターも見えていたので

パソコン表示のヘッダーとフッターも消すなら、どうせなら「スマホのヘッダーとフッターも消したら良いのでは？」とブクマで書きました。

はてなブログの標準ヘッダ＆フッタを消して、はてなスターを非表示にしました。 - 鈴木です。

スマホ表示のヘッダーとフッターが残ってますよ(^_^)vどうせ消す時はこちらも消した方が良いのでは(^_−)−☆

2015/06/11 05:04

そしたらば「 id:Kolo id:sthya ヘッダ＆フッタを消すのははてなブログProの特典で普通のことなんだけど、知らない人もいるんだな・・・・　id:MoneyReport え？スマホ版って消せましたっけ？レスポンシブ以外 」とのコメントを頂いたので、ブコメで返信。

id:Kolo id:sthya ヘッダ＆フッタを消すのははてなブログProの特典で普通のことなんだけど、知らない人もいるんだな・・・・　id:MoneyReport え？スマホ版って消せましたっけ？レスポンシブ以外

id:suzukidesu23　CSSに追記する事で消せます(^^)w　詳しくは記事でも起こしてお知らせします(^^;　しばしお待ち下さい。

2015/06/11 08:53

という訳で今日はブログ更新2本目となる記事起こしとなりました(^^)w

スマホ表示のヘッダーとフッター

パソコン表示のヘッダーとフッターについては先ほどの鈴木コアラさんの記事にある様に、はてなブログProにアップグレードした人は「チェックボックスにチェックを付ける」だけで非表示にする事が出来ます(^-^)w

でわスマホ表示のヘッダーとフッターはと言うと、デフォルトの機能としては提供されていません。
と、なると対象のStyleを指定して非表示設定にしてあげる事で実現する事が出来ます。

スマホ表示のヘッダーとフッターの要素をChromeブラウザーで追いかけてみましょう。
参考にしたサイトは下記。

Tech TIPS：Google Chromeブラウザーでスマートフォンサイトをチェックする - ＠IT

Google Chromeブラウザーのデベロッパーツールを利用すると、パソコンで簡単にスマートフォンサイトを確認する事ができます。
そして表示要素のDIVタグのIDをチェックすればどれが対象か分かります(^-^)w

で、要素が分かったので早速サブブログで試してみました♪

試行錯誤が見たい方は上記のサブブログ記事をご覧ください。
結果だけ知りたい人は下記。

下記のスタイルをスマホサイトにだけ適用すればＯＫです。

<style>
/* ヘッダー表示有無 */
#globalheader-container {
    display:none;
}

/* フッター表示有無 */
#footer-menu {
    display:none;
}

/* 余白調整 */
#container {
    padding-top:0px;
}
</style>

上記のコードを「デザイン」→「スマートフォン」→「ヘッダ」→「タイトル下」を選びます。
この時に「スマートフォン用にHTMLを設定する」のラジオボタン側をクリックします。

そして、下部のテキストボックスをクリックすると拡大されますので、そこに上記のコードを貼り付けます。

貼り付け終わったら「変更を保存する」ボタンを押して保存します。
そしてスマホで表示してみると・・・

スマホ用ヘッダーが消え！

スマホ用フッターも消えました(^-^)w

これでＯＫ！

注意事項

なおこのブログヘッダーとフッターを消すのは有料コースである「はてなブログPro」にしている人にしか許されていないサービスです。
無料コースの方もStyleをどこかに貼れば実現できるでしょうが、規約違反になりはてなブログが非表示になったり、最悪はアカウントの停止等の措置が取られかねませんので、やめておきましょう。
あくまでもProの人しか使えない技だと思っておいてください。

ご注意下さい。

PINGOO!を利用して、はてなブログで「にほんブログ村」と「人気ブログランキング」に自動でPING通知する方法！

はてなブログの不便な点

皆さん、はてなブログを使っていて

「不便だな～」

と思うことってないですか？
ＳＥＯには強いし、アクセスが集中しても落ちないしで、はてなブログは非常に気に入ってはいるのですが、不便な点が全くないかと言われるとそうではありません。
はてなブログの不便な点の代表格として挙げられるのが

Ping通知が出来ない

という点があります。
はてなブログと名乗っていながら、ブログの基本機能であったはずのPing通知が使えないのは時に不便です。
まぁ昔ほどPing通知の重要性は下がったとはいえ、いまだPing通知に頼らざるを得ないサービスもあるので、やはりPing送信は使いたいというのが本心です。

具体的には今回記事タイトルにも挙げたとおりでブログランキングサービスである「人気ブログランキング」と「にほんブログ村」に記事を書いた事を伝えるのにはPing通知が必須です。
Pingを送っておかないと、幾ら記事を書いてもいつまでも古い記事しか紹介してもらえず、他のブロガーさんやブログランキング経由で記事を読んでくれる読者さんを逃してしまいます。

解決策はPINGOO!にあり！

はてなブログでPing通知機能が使えないのなら、他のサービスを利用して間接的にPing通知が出来ないものかと探しまして、実現したのが2014年3月頃。
ですが丁度3月後半にアクセスが急減したりする事があり、Pingスパムの可能性を疑ってPINGOO!でのPing通知をやめて、それっきりになっていました。
ですが今年に入って「マネーさんの記事に沿ってPINGOO!に登録したけどにほんブログ村に新着記事が載らない！」と、る～子さん（id:ruko036）から連絡を頂きましたので、改めてPINGOO!に登録し直して正しい登録方法を掲載したいと思います(^-^)w

先日（2015/01/25）はPINGOO!サーバーが落ちていてログイン出来ませんでした(;_;)

PING通知サービス「PINGOO!」が繋がらない・・・。障害発生でしょうか？先週も繋がらなかったみたいですが(^^; - マネー報道 MoneyReport
Ping通知サービスは軒並み潰れてPINGOO!位しか残っていないみたい。なんとか頑張って欲しいですね(^_^)v

今朝改めて繋ぎ直したら普通に繋がったので、それでは「はてなブログでPINGOO!に正しくブログランキング通知先を登録する方法」をご紹介します！

PINGOO!登録手順

はてなブログでPINGOO!に登録する手順を説明します。
手順は下記になります。

【はてなブログでPINGOO！に登録する手順】

1. PINGOO!にアカウントを登録する
2. ブログのRSSフィードを設定する
3. PING通知先を登録する
4. 不要なPING通知先を削除する
5. 記事を更新し、自動通知を確認する

でわでわ１つずつ見ていきましょう(^-^)w

１．PINGOO!にアカウントを登録する

PINGOO!にメールアドレスとパスワードを入力して新規に登録します。
下記リンクからアクセスし登録して下さい。

Ping送信サービスPINGOO!｜ブログやウェブサイト・SNSの発信ツール

仮登録メールが送られてくるので、メール本文に書かれている「本登録リンク」をクリックすれば登録は完了し、PINGOO!にログイン状態で入ることが出来ます。

２．ブログのRSSフィードを設定する

自分のブログのRSSを登録します。
ブログのRSSを設定する設定画面は下記になります。

ここに

「ブログURL　＋　/rss」

を登録します。
はてなブログには「/feed」という方のRSSフィードもあるのですが、「/rss」側のRSSフィードじゃないと、PINGOO!は読み取ってくれませんので注意して下さい！

私のブログだと、

「http://moneyreport.hatenablog.com　＋　/rss」

で

https://moneyreport.hatenablog.com/rss

がPINGOO!で登録すべきRSSフィードになります。
これを「RSSのURL」欄に入力し「設定する」ボタンをクリックします。

３．PING通知先を登録する

メニューの「PING配信先の追加」を選び、下記画面を表示します。

PING通知先は4つ書く欄があります。

1. Pingサーバー名
2. Ping送信先URL
3. PingサーバーのURL
4. Pingサーバーの概要

入力後はこんな感じになります。

何を入力したら良いかを明示します。
前回はここを適当にやったら「にほんブログ村」に自動通知されなくなりましたので、注意が必要です(^^;

【にほんブログ村の設定内容】
Pingサーバー名　：　にほんブログ村
Ping送信先URL　：　専用Ping送信先URL
PingサーバーのURL　：　http://www.blogmura.com/
Pingサーバーの概要　：　空欄

【人気ブログランキングの設定内容】
Pingサーバー名　：　人気ブログランキング
Ping送信先URL　：　専用Ping送信先URL
PingサーバーのURL　：　http://blog.with2.net/
Pingサーバーの概要　：　空欄

上記の内「Ping送信先URL」欄には「専用Ping送信先URL」を書くように記載しました。
専用Ping送信先URLの取得は下記から行えます。

にほんブログ村が
　http://mypage.blogmura.com/send_ping

人気ブログランキングが
　http://blog.with2.net/mypage/?m=ping

から取得する事が出来ます(^^)v

画像で見るとこんな感じです。

にほんブログ村

人気ブログランキング

赤枠で囲った部分のURLをコピーしておいて、先ほどの「Ping送信先URL」に貼り付けます。

４．不要なPING通知先を削除する

不要なPINGサーバーを削除します。
「PINGOO!」の通知先は外せませんので残しておき、「にほんブログ村」と「人気ブログランキング」のPING通知先以外は全てチェックを付けて「削除」ボタンをクリックして削除してしまいましょう。
必要最低限な状態にすると下記の画像の様になります。

何故、デフォルトで登録されていた5ヶ所PING通知先を削除したかと言いますと「PINGスパム」を引き起こすのを避けるためです。
PINGスパムとは、PINGサーバーに対して重複してPING通知が届くと検索エンジンからペナルティを受ける場合があるそうです。
無用なスパムは避けるべしという事で、他所のPINGサーバーは外しておきましょう。

５．記事を更新し、自動通知を確認する

さぁこれでPINGOO!を利用したPING通知の自動化が完了しました！
PING通知される流れはこうです。

【はてなブログでPINGOO!を利用してPING通知する処理の流れ】

1. はてなブログで記事を書く
2. ブログのRSSフィードが更新される
3. PINGOO!がRSSフィードの更新に気付いて、登録してあるPING通知先にPING送信してくれる
4. PING通知を受け取った「にほんブログ村」や「人気ブログランキング」で新着記事が紹介される

記事をアップして、30分くらい時間が経過したら「にほんブログ村」と「人気ブログランキング」のマイページを確認して、新着記事が読み込まれているか確認します。
これで不便だった「はてなブログ」も１つ便利になりました(^-^)w
ブログランキングへの記事通知PINGが送れなくて困っていた方は参考にして下さい。

追記

記事更新後30分経過後位に各ブログランキングに反映されたかチェックしたらまだ未反映でした。
はてブでも

id:hapilakiさん
PINGOOに登録しても30分くらいでは到底反映されないですね。1日たっても反映されていないことがあります。なぜだろう。

と、PINGOO!を利用されているhapilakiさんからのコメントも頂きました。

夕方チェックしますが未反映・・・。

人気ブログランキングには昨日の記事のまんまで、今日のこの記事が反映されていません(>_<)

にほんブログ村の方も昨日の記事までしか反映されていませんね(-_-;

えぇ～、なんで(@_@)？
2014/03にはこの方法でPING通知出来ていたのに(T_T)

夜になって改めてPINGOO!にログインしてチェックしてみると・・・

PING送信履歴は「なし」！
ダメじゃんorz

「手動送信」ページに移動してみると・・・

ちゃんとRSSは読み込めている！！！

「だったらちゃんとPING送信してくれーーーーー！！！！！」
RSSフィードを読みこめていないかと思いましたよ(^^;
でもRSSフィードをPINGOO!側では読みこんでいるのに、PING通知はせず、と。
PINGOO!さんサボってませんか(--;？

しょうがないので手動送信の「最新記事を送信」ボタンをクリック。

送信履歴にようやく反映されました。
でも自動じゃなくて単なる手動・・・。
PING送信が自動化できてない(;_;)

どなたかPINGOO!でPING通知が成功している方がいらっしゃいましたら、教えて下さい(^^;
よろしくお願いしま～す(ToT)/~~~

連載目次:はてなブログでPingを送るには？

• ブログランキング運用時の注意点～はてなブログは運用の手間が多い～
• はてなブログでPING送信する方法！のはずなんだけど上手くいかない・・・
• はてなブログから自動で「にほんブログ村」に新着反映させる方法！今度は出来た！
• PING通知サービス「PINGOO!」が繋がらない・・・。障害発生でしょうか？
• PINGOO!利用で「にほんブログ村」と「人気ブログランキング」に自動でPING通知！
• Webサービス「にほんブログ村Ping送信呼出」を作成！PING送信できないブロガーに捧ぐ！
• 新Webサービス「にほんブログ村トラコミュTrackBack送信呼出」を作りました！
• 自作Webサービス「ブログランキングPing送信呼出」に改良！

ブログカスタマイズ「読者アイコンのサイズを大きくしたい！設定方法を大公開！」

昨日の記事がホッテントリ

いやー、昨日は切ない記事をアップしました。

FXトレード記録「大きなミスを犯し投資資金－２０％の損失を出す」 - マネー報道 MoneyReport
疲れている時や心理的負荷が大きい時はトレードしない！ このルールを破ってしまったばかりに・・・。・゜・(ノД`)・゜・。

ＦＸの投資で思いっきりミスをしまして、投資金額のー２０％を失うというのをやってしまいました(>_<)
先月、＋２０％を達成していたのでトントンなのですが、やはり投資は怖いものだな～、と改めて認識しました(^^;

私は毎月自分のFXトレード記録を公開しているのですが、普段は全然人気のない記事なのですが、今月のトレード記録は後から後から人が来て「なんだろな～？」と思っていたら、はてなブックマークのホッテントリに入っていました(^^;
全然人気なんか出ないと思って書いていた記事が人気が出るとビックリしますね。
投資を志す方の反面教師の良い記事になったのではないかと思います。

読者アイコンサイズをカスタマイズしたい！

昨日の夜に読者登録しているブロガーさん達の記事を１つ１つ読んでいたら、こかげ (id:hinatakokage) さんが下記の様な記事を書かれていました。

どなたか、もし気が向いたら読者アイコンの大きさを変えるCSSを教えて頂けませんでしょうか・・・。又は記事にして頂けませんでしょうか？

今なら確実に需要があります。

な、なんですと！
「確実に需要がある」ですと！？
それなら・・・

ブログのデザインをカスタマイズする時は、変更前のＣＳＳのバックアップを取っておきましょう！ - 日なたと木陰

• [ブログ運営]

あ、あ〜、アレですね。ありますよ〜、ウチのブログに♪明日の記事にしますね(^_−)−☆

2014/10/22 23:37

と、ブコメにて本日の記事の予告を書いて寝ました。
で、今朝早速記事を書いています(^^)w

さて、こかげ (id:hinatakokage) さんがブログカスタマイズでやりたい事として挙げていたのが

はてなブログの自分のブログを読者登録してくれた人の読者アイコンを大きくしたい！

というもの。
これは結構皆さん、思うみたいで以前、異生凡夫 (id:bonpusan)さんもブコメにて書かれていた様な・・・。

ちょっと見てみましょう。
ノーマルの読者アイコンサイズ。
確かにちょっと小さいですよね。

私も元々は小さいままだったのですが、別のブロガーさんがスタイルシートを公開してくれていて、それを利用させてもらって大きくしていました(^^)v
ですが、そのブロガーさんは現在ブログ自体を非公開モードにされてしまっているので、代わりに私の今回の記事にて紹介させて頂きます。

【読者アイコンを大きくするCSS】

.page-about .entry-content img.profile-icon {
    height: 32px; /* 読者アイコン大きく */
    width: 32px; 
}

上記のコードが読者アイコンを大きくするのに必要なコードになります。
コピー＆ペーストしてご利用下さい。

張り付ける場所はと言いますと。
「デザイン」→「カスタマイズ」→「デザインCSS」にコードを貼りつけます。

実際にコードを貼りつけたところ。
そして保存して下さい。

そして、「このブログについて」ページに行ってみると、こんな感じに(^^)w

読者アイコンが大きくなって見やすくなりました(^-^)/

あ、読者アイコンの表示が丸くなっていますが、これは私の使っているテーマが丸くしているだけで、上記のコードを貼ってもアイコンサイズが大きくなるだけで大抵の人は四角いアイコンのままですので、ご安心下さい(^^;

もっと読者アイコンを大きくしたい！

え？
もっと読者アイコンを大きくしたい？

じゃあさらに倍！

【読者アイコンを更に大きくするCSS】

.page-about .entry-content img.profile-icon {
    height: 64px; /* 読者アイコン更に大きく */
    width: 64px; 
}

サイズを64pxにアップすると・・・

で、でかい！！！
というかちょっと大き過ぎて全然収まりません（笑）。
でも「俺は大きいのが好きなんじゃ！」という方はこちらのコードを利用されて下さい(^^;

はてなブログのスマホ用Googleアドセンスお勧め設定！iPhone6やiPhone6Plusにも最適！

台風一過

昨日の記事では一昨夜巻き込まれたブログでの台風被害についてご報告させて頂きました。

ブログに台風突入！ブロガーさんからの指摘「Googleアドセンスにはスポンサーリンク表示必須ですよ！」 - マネー報道 MoneyReport
昨日の台風がネット世界の私のブログまでやってきまして、大荒れに(T_T)悲惨な寝不足対応が必要になりました。何だか肺が痛い様な(ｰ ｰ;)Googleアドセンスにはきちんと広告表記しましょう(^_^;)

正に正面から歩いてきて、頭に手斧をズブリと振り下ろされた感じでしたが、「スポンサーリンク」の表記をする事で本格的な台風災害にはあわなくて済みました(^^;

その私の記事に対する、手斧を振った方の「OS部（オペさん） (id:operationservicebu) さん」の返答記事が下記。

もし、このようなアドセンス広告が掲載された場合、あなたは広告と認識できますか？ - operationservicebuの日記
いえ、こちらこそスミマセン。格好の記事ネタにさせて頂きました(^_^;)OS部さんは良い方です(^_^)v

確かにOS部さんの懸念も分からないでもないです。

ただ、今時の人はもっとベタベタバリバリの広告だらけのサイトに辿りついて、その広告をかいくぐって本来のサイトのコンテンツを見抜く技術もある程度は持っているのかな、と。
「いや～ん、ばか～ん」なサイトとかだともう広告だらけだったり、他のサイトへの誘導リンクばかりだったりの中で、オリジナルコンテンツを探す努力を強いられますから、世の男性諸子は皆さん広告を回避する術を身に付けているのかな、と。

え？そんなサイト行かない？
え？私だけ(^^;？

失礼しましたm(_ _)m

ですが折角頂いた助言ですので活かさせて頂きたいと思い「スポンサーリンク」の表記はこのまま残したいと思います。

スポンサーリンク表記で肝心のクリック数の変化は？

またGoogleアドセンスを利用されている方が気になるであろう内容もご報告させて頂こうと思います。

「スポンサーリンクと書いたらクリック数が減るのではないか？」

との懸念が皆さんにはあるのではないかと思います。
昨日の記事のブコメや、そのも一つ上でのブコメ論議では話題になりました。
昨夜チェック予定でしたが、心労から22時過ぎには早々に寝まして、今朝ドキドキしながらGoogleアドセンスのクリック数をチェックしに行きました。
そしたらば・・・

・・・

・・・

・・・

え？
引っ張りすぎ？

・・・

クリック数に変化はありませんでした！

ふー、良かった～♪
まぁまだ１日なので「ずっと大丈夫。あなたのブログでも大丈夫」という事を保証できる訳ではありませんが、

「スポンサーリンクと貼った方が良いとは思うけどクリック数が減るのは嫌だなぁ」

と考えてるブロガーさんがいるなら、案外大丈夫なのできちんと明示された方が良いですよ(^^)v

あ、でもブコメの議論では

「Googleアドセンスでは『広告』や『スポンサーリンク』の明示は義務づけられていない。誤クリックを誘導するような配置や『クリックして下さい』みたいな誤クリック誘導の文言がダメ」

という結論に至った様でした。

「じゃあ『スポンサーリンク』なんて入れなければ良いんじゃないの？」

と思われるかもしれませんが、それが一筋縄では行かなくて誰かが「こいつは違反広告だ！」と広告の右上にある「違反報告ボタン」を押して報告されると、Googleから警告が来るようです。

その辺の話は昨日id:suzukidesu23が記事で書いてくれていたので参考にして下さい。

スマホ表示お勧めの設定

そんなこんなでGoogleアドセンス広告に『スポンサーリンク』を明記した訳ですが、折角広告周りをいじるなら一緒にやっておきたい事がありました。
占い師である大彗星ショッカー（id:noabooon）さんが以前記事にてiPhone6やiPhone6Plusに向けた広告設定をしないと「小さすぎる広告」が表示される様になるよ、と教えてくれていました。

http://www.daisuiseishocker.com/entry/2014/10/01/211300

確かにiPhone6とかで現在の「320×100」とかの設定の広告サイズだとかなり小さく表示されてしまうんですよね(^^;
iPhone6Plusならなおさらかと。
今後iPhone6やiPhone6Plusユーザーはドンドン増えて行くでしょうから、その人達にも最適なサイズでGoogleアドセンスの広告は表示された方が良いと思うんですよね。

「そのうち調整しようっと♪」

と思って放置してたんですが、一昨夜やむなく広告デザイン周りを直さなくちゃいけなくなったので、

「どうせやるなら一辺に直すか！」

と思い立ちまして、新しい広告サイズを作って貼り直しとかもしてました。
なのでOS部さんの指摘対応だけで深夜2:30まで掛かった訳ではなかったんですよ(^^;
昨日の記事ではネタ的に寝るのが遅い方が悲壮感が漂うと思って、説明しなかっただけで。
OS部さん、重ねてゴメンナサイm(_ _)m

そんなこんなで今回やったGoogleアドセンスの「はてなブログ」へのお勧め設定は下記。

レスポンシブ広告を選ぶ！

スマートサイズ（推奨）を選ぶ！

そして作った広告コードを、はてなブログのデザイン設定画面の「スマホ表示」の記事上と記事下に入れます。
Googleアドセンスは１ページに3個まで許されていますので、記事上が1個、記事下に2個が良いと思います。

また記事上に表示する広告が画面一杯に広告表示とかはGoogleアドセンスの規約違反になるため、小さめにする必要があります。
レスポンシブ広告（サイズを自動調節してくれる広告）の標準設定のままだと、レクタングルとかの大きめのが表示されてしまいますので、ソースの一部分を変更します。

【変更前】
data-ad-format = "auto"

【変更後】
data-ad-format = "horizontal"

ソースコードの一部を「auto」から「horizontal」に変更する事で、縦は小さく横長の広告を表示してくれます。

詳しくはid:B-CHANさんが記事にしてくれていますので、そちらをご参考にして下さい。

スマホ表示をレスポンシブ広告に差し替えた後

レスポンシブ広告設定に張り替えた後の状況も確認しましょう。
昨日はスマホの画像等をそのまま貼っていたのですが、id:yarukimedesuさんに「広告画像をそのまま貼るのはマズイですよ～」と教えて頂きました。

Googleアドセンス配信広告をスクリーンショット画像で掲載するとコンテンツ利用規約違反になるかも？？？ - 大学院卒ニート、しやわせになりたい。
Googleアドセンスの広告画像をそのまま貼るのは規約違反になるようです！今晩挿し替えよう(^_^;)

広告部分をモザイクにと思ったのですが、そんなソフトを持っていなかったので、Windowsのペイントで無理矢理四角で塗りつぶしました(^^;
黄緑色の部分がGoogleアドセンスの広告が表示されている部分です。

スマホヘッダー表示（狭い場合）

スマホヘッダー表示（広い場合）

スマホフッター（狭い場合）

スマホフッター表示（広い場合）

どうでしょうか？
より大きなスマホで表示した場合も良い感じに表示できました(^^)v

これで既存のiPhoneユーザーには小さめの広告を出せて、iPhone6やAndroidの大画面スマホのユーザーには大きめの広告を出せます。
さらに言えば、もっと大きなタブレット端末でアクセスしてくれた場合にもその画面サイズに適した広告サイズで表示してくれますので、ブログの見た目を崩すことなく読者の方に見せることができます(^^)w

大画面の端末で見た時に小さい広告しか出なくて、デザインの見た目が崩れた様な

「あぁまだ大画面スマホに対応してないのね、このブログ」

という残念感を読者には与えなくて済むようになります！
スマホデザインで小さめの広告サイズだけを固定で表示しているブロガーさんは今回のレスポンシブ設定お勧めですよ(^^)w

まとめ

• 『スポンサーリンク』を明示してもクリック数は減らない
• Googleアドセンスでは『スポンサーリンク』の明示は必須ではないが、違反報告攻撃を受けると広告停止やアカウント削除もあり得る
• iPhone6等の大画面スマホに適した広告サイズは「レスポンシブ広告」で自動調整がお勧め

ブログに台風突入！ブロガーさんからの指摘「Googleアドセンスにはスポンサーリンク表示必須ですよ！」

昨日の台風はネット上にもやってきた

昨日の台風は結構すごかったですね。
近所の小中学校は軒並みお休み。
場所によっては土砂崩れが起きたり、今朝の新聞を見たら亡くなった人までいたという事で大変な災害となりました。

天災は現実世界でだけ起きて、ネット上では起きないのか？

否！ネット上にも嵐は来る！

台風の被害が広がらないと良いな～とかと思っていたら、まさか私のブログに台風がやってきました！！

どんな台風？

ブログのアクセス解析とかを見ていてボーっと過ごしていた夜のこと。

「今日もブログは平和だな～」

なんて思って過ごしていたら、2件の通知が「なてなブログ」に上がりました。
開いて見るとIDコールと言及通知が来ています。

「IDコールをもらうとドキマギするからやめて欲しい！」

というブロガーさんやブックマーカーさんがいらっしゃいますが、私は全然平気♪
IDコールもそんな悪意に満ちた物ばかりじゃないですからね～。

そうして普通に通知先を見に行くとブロガーさんの記事でした。
記事の書き主は「OS部（オペさん） (id:operationservicebu) さん」。
Windowsのアップデート情報とかを流してくれるので、よく記事を読みに行くブログ訪問先です。

operationservicebuの日記

ふむふむ。
昨日の私のブクマに対する回答が上がっていました。

「わざわざ記事で返事をくれたんだ。OS部さんマメだな～」

なんて思って読み進めると、半分から下にはとんでもない内容が書かれていました！
もう記事は削除されているので、本来の文章は引用出来ませんが書かれていた内容は下記の様な内容。

マネー報道著者さんのブログは、記事内容も濃く良い。
ＦＸの記事なんかも書かれている。
ＦＸの記事の所にはGoogleアドセンスの広告が貼られている。
そこにはもちろんＦＸ関連の広告が出ている。

（画像で指摘）

でもこのGoogleアドセンス広告の上や下には「広告」や「スポンサーリンク」といった表現はない。
広告であると明示しないと、誤クリック誘導の可能性がある。

マネー報道著者さんはどうして広告表記を明示しないのか？

• 明らかに誤クリック誘導を狙っている
• 表記を忘れている

さぁどっち！？

・・・。

バタン。
その場に倒れました。

「おいおいおい、公開処刑かよ～(-_-;」

ＯＳ部さん、ちょっと待って下さいよ。
私にも私なりの言い分がありますが、そげな名指しで私のブログへのリンクも貼ってあってブログ画像も貼ってさらには赤枠で強調表示して「ここに広告って書かないのはわざと？」って、アナタ(=_=)

そんなネット上の魑魅魍魎達を私のブログに送りつける様な恐ろしい記事を書くなんて・・・。
ＯＳ部さんて記事上では「良い人かな～」と思っていましたが、実は良い人の仮面を被った極悪非道！？

これは手斧を投げて頭にざっくり刺さったイメージにピッタリですか(^^;
やはり、はてな村は恐ろしい所でした(ToT)

すぐに記事にスターを付けて、とりあえず風呂の時間だったのでひとっ風呂。
でもお風呂の中でも巡るのはOS部さんからの記事の内容。

「いやー参った。あの記事に触発されてGoogleアドセンス広告の違反通知とかされたら、広告停止になるんだろうなぁ」

とか

「でも見ている範囲では結構はてなブロガーでも、Googleアドセンス貼っているのに『スポンサーリンク』と明示していないブログも多いんだけどなぁ・・・」

と、グルグル(@_@)

お風呂を出る頃には

「とにかく寝るのが遅くなっても仕方ないからすぐに対応しよう！」

と一念発起しお風呂からあがり、髪も乾かさずにパソコンに向かう事に。

Googleアドセンスの正しい表記方法

私はよく知らなかったんですよ。
Googleアドセンスの広告の前後とかに「広告」とか「スポンサーリンク」とかって表示しなければいけないのかどうか。
さっきも書きましたが、結構人気のブロガーさんでもGoogleアドセンスだけで「スポンサーリンク」や「広告」との表記を出していないブログが多い。
統計は取ってないのであれですが、感覚的には明示している人の方が少ない印象。
なので

「わざわざ明記しなくても良いのかな～」

と思って明記していなかっただけです。
しかし、ここまで公開処刑の目に会えば、いつ誰が

「こいつ『スポンサーリンク』って書いてないよ！違反報告ポチリ！」

と報告されてもおかしくない状況。

実際、以前id:suzukidesu23さんとかも温泉旅行に出掛けた時に狙い澄ましたように「違反報告攻撃」を受けたとの記事も読んだ事がありました。

鈴木は、Gmailはスマフォでほぼ読んでいます。なので、旅行中でも度々、Gmailのチェックは行っていました。
そして、６月６日、GoogleさんからAdSenseの警告メールが！

内容は、はぴらきさんが書かれている通り、ラベル設定をしていないから、はよ直せ！こら！という警告メールでした。

３日以内になんとかしとけや！という内容です。
Googleさんからお手紙ついた。気をつけよう！旅行中なら焦る事うけ合い！ - 鈴木です。

とのこと。

また、やはり明記が必要とのOS部さんの言葉もあるので、広告に「スポンサーリンク」と明記致しました。

修正した広告表記。

修正したスマホのヘッダー広告表記。

修正したスマホのフッター広告表記。

もうこのデザイン変更で夜鍋して、結局寝たの2:30ですよ(^^;
OS部さんの記事で指摘されたのが「2014/10/06/23:07:59」で、気付いたのが23:30頃。
風呂に入って考えてたら「これはすぐに対応しないとマズイ！」と思ってすぐに対応し始めてデザイン調整等もしなくちゃいけないから2時間以上掛かりました(=_=)

今日はめちゃくちゃ寝不足で、胸の肺のあたりが痛いです。
最近仕事も忙しくて残業続きでボロボロな所に、ネット台風被害・・・。
ＯＳ部さん、私に恨みでもあるんですか(T_T)？

他の方の対応もチェック

以前、id:hapilakiさんも記事に書いてたな～、過去記事を探し出しました。

Google AdSense停止から復活再開にはラベル「広告」か「スポンサーリンク」 - はぴらき合理化幻想

記事本文周辺に広告を設置する場合、広告にラベルを付与しておく方がいい。ラベルに使える文言は次の二種類。

• スポンサーリンク
• 広告

公式FAQによると、現在よく使われている「スポンサードリンク」も厳密にはダメだ。

との事でした。
途中引用したブログ画像には「スポンサードリンク」もＯＫと書いてしまいましたが、ダメなんですね(^^;
知りませんでした。
画像には二重線を引いておきました。

余談だが、「スポンサードリンク」を「スポンサーのドリンク（飲み物）」と解釈する人もいる。そういう意味でも「スポンサーリンク」の方が誤解を招かずいいな。

コレ本気で思ってました(^^;

「なんでスポンサー・ドリンクで飲み物表記はＯＫなんだ？」

とずっと思ってました。
そんなお馬鹿な自分でしたので、対応が遅れこの様な自体を招きました。
悪いのはＯＳ部さんではなくて

「必要なのかな～？どうなんだろうか？」

と思いつつも必要に迫られないと動かない尻の重さが悪さをして対応が後手後手に回っていた私が悪いです。

お風呂から出て再度ＯＳ部さんの記事を見に行ったら、既に削除してくれてありました。
公開処刑等よりかは私に「まずいから直した方が良いですよ～」と教えてくれた感じかと。
夜中の１時過ぎ位（だったかな？）にＯＳ部さんからTwitterで謝罪も頂きました(^^)w
ネタ的に絶好の内容だったので、前半はOS部さんを悪者チックに書いてしまいましたが、第一印象通りの「良い人」でした。

皆さん、私の事は嫌いになっても良いけど、OS部さんの事は嫌いにならないで下さい！

というブッコワレタままで本日の記事は終わりたいと思います(^^;

はてなブログでスマホ記事上にGoogleアドセンスを貼る時のオススメ設定

今週末はブログデザイン変更をイジリ倒すという事で

昨日は、一昨日間違ってイジリ過ぎたスマホ設定を元通りにして更にカスタマイズするという事をやりました。
あ、はてなブログのブログ設定のお話ですが(^^;

スマホ表示の変更ミスを修正し、追加でグレードアップをば(^^; - マネー報道 MoneyReport
昨日公開したソースコードに間違いあり！早速、修正しました！更にパワーアップも(^-^)/

これでスマホページも大分見栄えが良くなりました♪
もっと前にイジリたかったのですが、完全に話題に乗り遅れていたので、いつか良いタイミングで載せ変えようと思っていまして、丁度スマホデザインがバッサリと刷新されたため（まだ公式アナウンスはない）「ここだ！」と思ってスマホデザインをイジリ始めました！

なので本日もスマホデザイン調整。
本日はGoogleアドセンスの広告設定をいじろうと思います。

Googleアドセンスのレスポンシブ設定が進化！？

昨日、読者登録させてもらっているブロガーさんの記事を読んでいたら、Googleアドセンスのレスポンシブ広告ユニットが進化してブログに適用しやすくなったという記事を見付けました。

Googleアドセンスのレスポンシブ広告ユニットをレクタングルにしたらパソコンでもiPhoneでも良い感じになった - 非天マザー by B-CHAN
Googleアドセンス広告をパソコンでもスマホでも綺麗に出す方法。レスポンシブ広告で設定を変えてやると良いみたい。

見に行くと、レスポンシブ広告ユニットで「data-ad-format」部分の設定を書き換えると、出力する広告種類をある程度制御できるという事が紹介されていました。

レスポンシブ広告ユニットのモード：スマートサイズ（推奨）を選んだ時のコードが下記の様になります。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- MoneyReport ヘッダースマホ -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-7454108883909999"
     data-ad-slot="8665685999"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

この時の下から4行目の

　data-ad-format="auto"

と書かれている部分の右側のautoの部分を書き換える事で、自分の出したい広告サイズをかなり制御する事が出来ます。
autoの書き換え内容は下記のとおり。

【data-ad-formatの設定種類】

• auto
• rectangle
• vertical
• horizontal

細かい表示方法等はid:B-CHANさんの記事に譲るとして、私のスマホ表示の記事ヘッダーに付ける物としては「horizontal（横長表示）」のサイズが丁度良さそうです(^^)v

今までスマホ表示で困っていた点

スマホ向けの広告は今までは画面の横幅が728ピクセル以下の場合には「320×100」サイズのラージモバイルバナー広告を表示する様にしていました。
320×50のモバイルバナーだとイメージ広告が極端に少なくて見栄えが悪かったからです。
なのでラージモバイルバナーを表示させていましたが、これも時々320×50のサイズが出てしまって、それでいて余白が下に50ほど出来てしまって、空白のスペースが大きくなる事がしばしばでした。

上の図がまさに50ほど空白スペースが出来て無駄に余白が出てしまった状態です。
これをなんとか回避できる方法がないものか、と思っていました。

基本は「320×100」サイズのラージモバイルバナーにしつつ、320×50のモバイルバナーが選ばれてしまう時は下の余白を消すという事が出来ないものかと。

はてなブログProがパワーアップしてた！

何かないかと「はてなブログ開発ブログ」を見に行ったら、丁度よさそうなものが！

スマートフォンでも、記事やブログの上下にブログパーツなどを自由に表示できるようにしました（Proユーザー向け機能） - はてなブログ開発ブログ
なるほどー。2014/06/20に導入されたばかりだったんですね！スマホのブログ上下に自由にブログパーツ等を表示できる様になったのは！しかもPro限定でしたか(^^;　道理であまり話題にならない訳だ！

これを使えば、ほぼ要求どおりのものが作れる！

まずは自分のレスポンシブ広告ユニットを１つ作ります。
そしてそのコード部分を下記の様にします。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- MoneyReport ヘッダースマホ -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-7454108883909999"
     data-ad-slot="8665685999"
     data-ad-format="horizontal"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

「data-ad-format="horizontal"」の部分が肝です。
ここが普通に広告コードを持ってくるとautoになっているのでhorizontalに書き換えます。

そして、はてなブログの「デザイン」→「スマートフォン」→「記事」→「記事上」を選び上記のコードを貼り付けます。

またここの「記事下」にはパソコンデザインと同じものをコピーして貼り付けておいて下さい。
こうしないと従来、記事下にスマホ向けに書いていたコードが表示されなくなってしまいますので。

これで書き換えた後はブログがこうなります！

これにて無用な空白スペース50ピクセルを無くす事が出来ました！
もし気になっていた方がいたら適用されると、320×100または320×50の記事が余白なく表示する事が出来る様になりますよ(^^)/

スマホ表示の変更ミスを修正し、追加でグレードアップをば(^^;

はてなブログのスマホ表示変更に伴い早速色々といじってっみた！

昨日の記事で、2014/06/26午後に適用された「はてなブログのスマホ表示変更」に伴う、変更へのオリジナル変更を施してみたって言うのが昨日の記事です。

スマホ表示が変更された！はてなブログの最新デザインに合わせたカスタマイズ方法を大公開！ - マネー報道 MoneyReport
チャレンジしました！

色々といじくって、変更前と変更後はこんな感じになりました(^^)v

スマホでiPhoneとAndroid両方で表示してみましたが問題ありません。

「こりゃあ成功！簡単、簡単♪」

なーんて、思っていたのに今朝パソコンのブラウザで表示してみたら・・・

「あれ？何か変じゃない？」

と思いました。
何か表示がスッキリしています。
お気付きですか？

パソコンの「ヘッダーのダッシュボード」も非表示になってしまったんです(T_T)

やり過ぎました。
スマホの「ヘッダーのダッシュボード」だけを表示しないようにしたかったのに、まさかまさかでパソコンの表示の時にも消してしまいました(>_<)

これだから初心者が取り組むと痛い目を見るという奴ですよね～(^^;
ですが、めげません。
なんとか「ヘッダーのダッシュボード」問題を解決し、更にスマホ表示のグレードアップに挑戦してみたいと思います(^o^)/

参考にさせて頂いたブログ

元々、昨日「ヘッダーのダッシュボード」を非表示にする時には下記のブログを参考にさせて頂きました。

http://hapilaki.hateblo.jp/entry/css-for-responsive-ad-unit-1-1-0
元々はこちらの、はぴらき (id:hapilaki)さんのコードから「ヘッダーのダッシュボード」を非表示に変更するコードを拝借させて頂きました。

ですが、はぴらきさんは断捨離の名人（？）。
テレビや冷蔵庫も断捨離される様な方ですので、スマホ表示だけではなくパソコン表示側も「ヘッダーのダッシュボード」を非表示になる設定になっていました！
「これぞ断捨離の極意を見た！」という感じですが、パソコンからは「ヘッダーのダッシュボード」を日々使いまくっている身からはとても断捨離できません。
というか使いにくくてしょうがないので元に戻したいです。

パソコン表示では「ヘッダーのダッシュボードを表示」し、スマホ表示では「ヘッダーのダッシュボードを非表示」にするという事が出来れば良いことになります。
スタイルタグを直接JavaScriptとかで切り替える事は出来ないので、一工夫必要です。

こんな時はアノ人のブログのソースを拝見！

PUBGモバイルにはまった渋谷の1人社長のブログ｜PUBGモバイルにはまった渋谷の1人社長のブログ
大彗星ショッカー (id:noabooon)さんの元メインブログ。現在はサブブログとして運用されているようです。

大彗星ショッカーさんはブログやサイトデザインの変更の仕事を請け負われていたりするので、Webサイトのデザインを変更したりはお手の物。
私の現在のブログデザインも、大彗星ショッカーさんの旧ブログの時代のデザインを大変参考にさせて頂いています。
勝手に参考にさせて頂いていますが、とても助かっています大彗星ショッカーさん、どうもありがとうございます(^-^)/

そして今回の件もきっと解決の糸口は大彗星ショッカーさんのブログにあるはずだと、ソースコードを拝見。

・・・捜索中・・・

あった！
ちょっと意味合いは違いますが、アクセスしてきている端末に応じてスタイルを切り替えて表示されている部分がありました！
下記の画像が参考にさせてもらった部分。

if文でMacOSかどうか判定されていて、Macだと上のスタイルを適用し、それ以外だったら下のスタイルを適用されています。
この感じを自分のやりたい事に適用すれば、いけそうです！
適用してみましょう！

【昨日のソースコード】

<style>
#globalheader-container {
  display:none;
}
</style>

上記のソースコードだとPC＆スマホの両方が影響を受けるので・・・

【本日のソースコード】

<script type="text/javascript">
// <!--
if (document.documentElement.clientWidth < 728) {
  document.write('<style>#globalheader-container { display:none; }</style>');
}
// -->
</script>

という形でJavaScriptでブラウザの横幅が728px以下の時にだけ、「ヘッダーのダッシュボードを非表示」にする様に出来ました！
昨日の記事で、スタイル変更をされた方は本日のソースコードを参考にして下さい。
ソースコードを貼り付ける位置は
「ダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」
に、なります。

ソースコードを差し替え後のパソコン表示が下記になります。

ふー、これで元通り♪
パソコン表示では「ヘッダーのダッシュボード」が出てないと不便ですからね～。
失礼致しました(^^;

もっといじくれるみたい！

昨日、Yahoo!のリアルタイム検索で当ブログに来てくれていた人がいて、その検索結果を見に行ったら私以外にも6/26のデザイン変更に合わせて記事を書いている方を発見！
拝見しに行くと、私なんかよりももっともっとカスタマイズされていました！

続・はてなブログのスマホ版ページをカスタマイズしてみた - White croQuis
はてなブログのスマホ表示変更への対応。デザインも良しで、ぜひ参考にさせてもらおうと思います(^-^)/

これはお洒落。
ぜひ真似させてもらおう（笑）！

早速、公開してくれているコードを自分のブログにも適用！

#body #header {
  margin: 0 0 0 0;
  padding: 5px 0 0 0;
  background-color: orange;
  width: 100%;
}
#body .header-blog-icon {
  vertical-align: text-bottom;
  height: 60px;
}
#body .header-blog-icon img {
  border: 0;
}

id:align_centreさんのコードを適用し、サイズや色などの細かいところを自分のブログに調整して適用してみると・・・

こんな感じに！
お洒落♪

id:align_centreさん、どうもありがとうございます！

しばらくはスマホ表示の方はこのデザインでいきたいと思います！
はてなブログでスマホ表示の変更で困っている方は参考にしてみて下さ～い(^^)/

追記

コードを参考にさせて頂いたid:align_centreさんからコメントを頂きました。

id:align_centreさん

vertical-align: text-bottom; は、プロフアイコン表示になる前のカスタマイズ時の名残で、今はなくてもいいかもしれません(汗

> 後はタイトル下の「ブログ説明文」も消したいのですが、やり方が分からずでした(T_T)

ブログ説明文、おそらく「本日のコード」の「#globalheader-container」の後ろに「, #blog-description」を追加すると消せるのではないかと思います。

との事で「vertical-align: text-bottom;」は不要、スマホ表示でブログ名の下にある「ブログ説明文」を消す方法までも伝授して頂きました！
id:align_centreさん、本当にどうもありがとうございます(*^_^*)/

適用したコードがこちら。

<style>
#body #header {
  margin: 0 0 0 0;
  padding: 5px 0 0 0;
  background-color: orange;
  width: 100%;
}
#body .header-blog-icon {
  height: 60px;
}
#body .header-blog-icon img {
  border: 0;
}
</style>

<script type="text/javascript">
// <!--
if (document.documentElement.clientWidth < 728) {
  document.write('<style>#globalheader-container, #blog-description { display:none; }</style>');
}
// -->
</script>

適用した画面はこちら。
ようやく本文が普通に画面に入ってきました！
スマホ表示でスクロール無しで本文を表示したかったんですよね～♪

ソースコードを貼り付ける位置は
　「ダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」
に、なります。
ご参考まで(^^)/

スマホ表示が変更された！はてなブログの最新デザインに合わせたカスタマイズ方法を大公開！

デザイン変更は突然に

昨日（2014/06/26）の夕方スマホでブログをチェックして驚いた！
何かが違う！
お昼休みにチェックした時はまだ旧来のスマホデザインで表示されていたので、昨日の午後にデザイン変更を行ったのでしょう。
私のサイトはまだアイコン周りに色を塗っていたからまだ良いのですが、他の方のブログを読みに行ったら真っ白ケッケで更にビックリ。

私のブログはこんな感じに変わっていた。

大きな違いとしては記事左右に表示されていたグレーの余白（？）が、きれいさっぱり無くなった！
これによりiPhone等の横幅の狭い画面のスマホには非常に助かるようになります。
Googleアドセンスの広告をこのグレーの余白分（-14px）、ずらして表示していたので、このグレー余白がなくなると画面左側に埋まってしまった(--;
これはマズイ！とすぐに直しました。
グレーは見えませんが白い余白が10px分だけ残っているので-10px左にズラして表示するように調整しました。

他にもタイトル下の右側に「編集」ボタンがやってきました。
以前は記事下にあったのでかなりスクロールしないと押せなくて苦労したので、タイトル下に持ってきてくれたのは非常に押しやすく使い勝手が向上しました！

はてなブログ開発ブログをチェック

スマホデザインの変更がアナウンスされているかな～、と思って「はてなブログ開発ブログ」を見に行きましたが背景画像を27個追加したという話が載っているだけ。

デザイン設定に、27種類の新しい背景画像を追加しました - はてなブログ開発ブログ
スマホページのデザインがガラッと変わって左右のグレー余白が急に無くなってますけど、そのアナウンスはまだですか？色々とデザイン調整し直さないと(ｰ ｰ;)

ブコメにて他にも困っている方がいらっしゃいました。

id:kyokucho1989

そんなことより、スマホから見たらブログが真っ白白のデザインになってたよ。見づらいよ

との局長さんのストレートがご意見が載っていました。
私も同意です。

局長さんのブログを見に行ってみると・・・

確かに真っ白白。
これは言いたくなりますねー(^^;
これなら以前のタイトル周りにグレーの枠がある方が良かったかも。

最新スマホデザインを調整する！

チャレンジした内容は以下のとおり。

【2014/06/26適用スマホデザインを調整した内容】

1. タイトル周りの色付け
2. ヘッダーの「ダッシュボード」を非表示に変更
3. Googleアドセンス広告の横位置調整

１つ１つ見て行きましょう。

１．タイトル周りの色付け

「ダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」

<style>
#header {
  background: #aa00aa;
}
</style>

上記のコードを「headに要素を追加」欄に貼り付けて保存する。
上記コードは色が「#aa00aa（濃い目の紫色）」になってしまいます。
ご自身のブログに合うイメージカラーを指定して下さい。

２．ヘッダーの「ダッシュボード」を非表示に変更

「ダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」
を開き下記コードを貼り付ける。

<style>
#globalheader-container {
  display:none;
}
</style>

下の画像は上記の１と２の両方を書いたもの。色はオレンジ色を指定していますが。

３．Googleアドセンス広告の横位置調整

「ダッシュボード」→「デザイン」→「カスタマイズ」→「記事」→「記事上下のカスタマイズ」→「記事上」

<br />
<!-- Google Ad Start -->
<script type="text/javascript"><!--
document.open();
google_ad_client = "ca-pub-7454108883909999";
var show_width = document.documentElement.clientWidth;
if (show_width < 728) {
    /* ヘッダースマホ用 */
    document.write("<div style='margin:0 0 0 -10px;'>");
    google_ad_slot = "6822889999";
    google_ad_width = 320;
    google_ad_height = 100;
}
else {
    /* ヘッダーパソコン用 */
    document.write("<div>");
    google_ad_slot = "6632072888";
    google_ad_width = 728;
    google_ad_height = 90;
}
document.close();
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<!-- Google Ad End -->

これできれいにスマホの左端とアドセンス広告の左端がピタッと一致します！
お試しあれ。

最終的に出来上がるのはこんなイメージ。

紫色は目に優しくない色ですね〜(^_^;)

追記

Googleアドセンス広告についての詳細が不足し過ぎていたので過去記事へのリンクを貼っておきます。
過去記事をベースに複数の広告枠を作って、今回のソースコードの横幅調整を使って頂ければと思います。

はてなブログ記事上にAdsenseをPC・スマホ切り替えて表示させる方法 - マネー報道 MoneyReport

2014/06/28追記

こちらの記事の設定のままだとスマホだけではなくパソコンの「ヘッダーのダッシュボード」も非表示になってしまう事が判明しました！
早速対応しましたので、もしこの記事のソースコードをそのまま適用することを考えている場合は、次の記事も参考にして下さい。
よろしくお願いします。

スマホ表示の変更ミスを修正し、追加でグレードアップをば(^^;

はてなブログ記事上にAdsenseをPC・スマホ切り替えて表示させる方法

はてなブログ記事上スペースがいじれる様になった！

2014/02/05に「はてなブログ開発ブログ」の記事で記事上スペースがブロガーに遂に解禁されました！

ブログをカスタマイズしよう！ 記事ページのタイトルと本文の間（記事上）にもソーシャルパーツなどを配置できるようにしました - はてなブログ開発ブログ

これは今までに多くのはてなブロガーが望んでいた改変で、大変歓迎されるべきものです！

色々な方が、この記事上スペースを何に使おうか試行錯誤されています。

SNSボタンを貼り付けたり、自分の人気記事へのリンクを貼り付けたり色々されているみたいですねー。

そんな中、Google Adsenseの広告を貼り付けている方をまだあまりお見掛けしないので、

先頭切ってやってみるか！

と思った次第で、やってみました！

GoogleAdsenseを記事上に表示する時の問題点

Googleアドセンスは色々なサイズの広告が提供されていますが、いかんせんはてなブログと相性の良い広告サイズが実は少ないんです。
一番貼りたいサイズである「336×280　レクタングル（大）」を貼り付けると、PCでは良いですがスマホで表示させると「スマートフォン横スクロールガクガク問題」が発生します。

こちらの問題については、詳しくは私の過去記事を参照してください。

Googleアドセンスをはてなブログで使う時の3つの注意点 - マネー報道 MoneyReport

かといって横幅サイズが丁度良い「300×250　レクタングル（中）」だと横幅は丁度良いのですが、記事ページを表示するとブログタイトル、記事タイトル、広告だけで１ページが全て埋まってしまい、本文が表示されません。
これではGoogleアドセンスの規約違反に引っかかります。

となると、スマホにきれいに横幅が収まり、かつ高さも小さく記事本文が表示される広告となると「320×50　モバイルバナー」とかになります。
これはスマホではGood！ですが、PCで表示させた時に信じられない位小さく表示されておかしくなってしまいます。

何か妙案はないものか？

PCとスマホで表示を分ければ解決！

と探していたら、ブロガーの先輩がやっぱり見付けてくれているじゃないですか！
先輩ブロガーである ほねにく(id:honeniq)さんが、当時記事下のスペースにアドセンスを切り替えて表示する方法を見付けて、コードまで載せてくれていました！

Redirecting…
アドセンスをアクセスして来た人がパソコンなのかスマホなのかを判別して表示する広告サイズを切り替える方法。便利な方法があるんですね～。

この方法を使えば、
スマホでアクセスしてきた人には
　320×50　モバイルバナー

パソコンでアクセスしてきた人には
　728×90　ビッグバナー

みたいに広告を切り替えて表示させる事が出来るという優れもの！
すごい！
こんな方法があるんですねー♪

はてなブログ記事上Googleアドセンス広告のコード切り替え方法

早速やってみましょう！
手順は以下の通り。

1. Googleアドセンスの広告ユニットを2つ作る（スマホ用、PC用の2つ）
2. JavaScriptのコードで判定文を入れる
3. ブログのデザインで「記事上」にコードを貼り付けて保存

１．Googleアドセンスの広告ユニットを2つ作る（スマホ用、PC用の2つ）

スマホ用には下記の２ついずれか好きな方を作ります。
　320×50　 モバイルバナー
　320×100　ラージモバイルバナー

パソコン用には自分のブログの横幅に収まる物を選んで作ります。だいたい以下のいずれかを選べば間違いないかと。
　728×90　 ビッグバナー
　468×60　 バナー
　336×280　レクタングル（大）

この２つの広告ユニットのコードを取得しておき、メモ帳等に貼っておきます。
注意点としては表示されるコードの内「コードタイプ」を「同期」にして下さい。

コードタイプを「非同期」にしてしまうと今回の方法は使えません。

２．JavaScriptのコードで判定文を入れる

以下のコードを参考にそれぞれの広告からコードをコピーしてきて差し替えます。

<script type="text/javascript"><!--
google_ad_client = "ca-pub-0000000000000000）";    //Adsenseのサイト運営者ID
if ((navigator.userAgent.indexOf('iPhone') > 0 && 
     navigator.userAgent.indexOf('iPad') == -1) || 
     navigator.userAgent.indexOf('iPod') > 0 || 
     navigator.userAgent.indexOf('Android') > 0) {
    /* スマホ向けはこっち */
    google_ad_slot = "0000000000";    //広告ユニットのID
    google_ad_width = 000;            //横幅
    google_ad_height = 000;           //高さ
}
else {
    /* パソコン向けはこっち */
    google_ad_slot = "0000000000";
    google_ad_width = 000;
    google_ad_height = 000;
}
//-->
</script>
<script type="text/javascript"
src="https://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

差し替える部分は以下の４つ。
・google_ad_client
・google_ad_slot
・google_ad_width
・google_ad_height

差し替え後は下記のようになります。

<script type="text/javascript"><!--
google_ad_client = "ca-pub-7454108883909999";
if ((navigator.userAgent.indexOf('iPhone') > 0 && 
     navigator.userAgent.indexOf('iPad') == -1) || 
     navigator.userAgent.indexOf('iPod') > 0 || 
     navigator.userAgent.indexOf('Android') > 0) {
    /* MoneyReport ヘッダースマホ用 */
    google_ad_slot = "7188952999";
    google_ad_width = 320;
    google_ad_height = 50;
}
else {
    /* MoneyReport ヘッダーパソコン用 */
    google_ad_slot = "2632072999";
    google_ad_width = 728;
    google_ad_height = 90;
}
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

３．ブログのデザインで「記事上」にコードを貼り付けて保存

「デザイン」→「カスタマイズ」→「記事」→「記事上」に移動して２で作ったコードを貼り付けます。

下の部分にある「スマートフォン版にも表示する」のチェックボックスをＯＮにしておきます。
そして「変更を保存する」をクリックすればＯＫです。

表示はこんな感じです。
これはＰＣ用。「728×90　 ビッグバナー」です。

これはスマホ用。「320×50　 モバイルバナー」です。
右が飛び出てしまっているのはご愛嬌(^^;

と、こういった感じでアクセスしてくる端末に合わせてGoogleアドセンスの広告を切り替える事が出来ます。
記事上にグーグルアドセンス広告を貼りたい方は参考にしてみて下さい。

まとめ

• 2014/02/05から、はてなブログ記事上スペースが解禁！
• Googleアドセンス広告の問題点はスマホとパソコンで表示を適切に切り替えられない点
• JavaScriptを使って、スマホとパソコンとでアクセスを切り替える事で適切に広告を表示できる

追記

皆さんから色々とブコメを頂きましたので、一部返信をば。

id:cloyoeさん
上でせっかくコード隠してるのに、CSSのほうで隠してませんが、大丈夫ですか？

最初は全部伏せたコードでと思って記事を書いていたのですが、「ca-pub-0000000000000000」とかだけだと自分のアドセンスコードから置き換える時に「イマイチどんな値なのかわかりにくいかなぁ？」と思いまして自分のコードに近い形で表示しました。
もちろん自分のコードをそのまま晒すのは怖いので改変してあります。
改変の事実も記載しておくべきでしたね(^^;
ですが、早めのお知らせありがとうございます。

id:haruko416さん
え、レクタングル中のスマホ表示って規約違反なの？？

いえ「レクタングル（中）」自体の表示は規約違反ではないです。
スマホでブログの記事を表示した時に「広告でほぼ画面が埋まっていて、本文が表示されない状態」だと規約違反に引っ掛かります。
これは記事の先頭にだけ適用される規約でして、スクロールして行って下の方で広告だけで画面いっぱいになっても問題ありません。
一度このスクリーンショットも取りたかったのですが、何せ規約違反状態を作る事になるので取れませんでした(^^;

id:d4qさん
あえてツッコミどころを用意してブコメさせる罠

あれ？と思って過去記事を確認してみたらWidth300以下の広告を貼らないとスマホ表示でうまくいかないと自分で書いていました。
ですが、この記事で推奨したサイズはWidth320・・・。
失礼しました。
勢いで書いていたので、見落としていました。
わざとではありませんのでご容赦を(^^;

id:thyself2005さん
ベータ版ですが最近実装されたレスポンシブ広告ユニットのスマートサイズ使用すればJS周りの設定不要でイケますよ。

レスポンシブ広告ユニット便利ですよね。私も記事下では使っています。
ですが記事上でレスポンシブ広告ユニットを使ってみたら、スマホで表示したら「300×250　レクタングル（中）」が配信されて広告で画面内が埋まってしまいまして・・・。
ん？
スマートサイズというのも選べるんですか？
そうすると「300×250　レクタングル（中）」よりも高さが小さい広告配信を指定できるんでしょうかね？
でしたらJS周りの記述なしで行けますね！
ですが、Googleアドセンスのサイトでちょっと調べただけではわかりませんでした(;_;)
続報お待ちしています。

id:hidamarinonakadeさん
この方法でできない人は私の記事を参考にすると良いかもしれません。
なお、アドセンスのポリシーを知らず知らずに犯しているかもしれないと不安な方は依然ポリシーについて記事を書いていますのでそちらを参考に。

記事拝見しました。
アクセス者の端末横幅で判定する方法もあるんですね。
今度何かしらの対応の時に参考にさせて頂きたいと思います。
情報ありがとうございます。

ブログのアイコン画像をイラストレーターの方に描いてもらいました！

ブログ立ち上げ時期からオリジナルアイコン欲しかった

はてなブログでブログを書き始めて少しして慣れてきた頃に、

「ここのブログは本気で書こう！」

と思ったので、ブログのアイコンもきちんとオリジナルの物が欲しくてたまりませんでした。
ちょうど友人の１人がイラストレーターの卵（本業は別。趣味がイラスト描き）だったので

私「アイコンイラスト描いて！お願い！」

友人「任して！小さめのでいいんだね」

と依頼したのが昨年11月初旬。
しかし本業の仕事が忙しくて残業続きで、イラストには時間がまわらないよう。
年末年始の休暇が9連休という事もあり、期待して待っていたのですが連絡来ず・・・。

「これはなんとかせねば、自分で適当に作ったあの『木の看板にMoneyReportと書いただけ』のアイコンが、このブログの本当のアイコンになってしまう・・・」

ちなみに旧アイコンはこれ
↓↓↓↓↓↓↓↓

と焦りが募りました。

イラストレーターさんとの出会い

そんなイラストが上がってくるのを3ヶ月程待っている間に、はてなブログの中でイラストレーターさんに出会う事が♪

きっかけはたまたま見ていた新しいブログの著者の方が、HPの素材を取り扱っている方だったんです。
昨年の12月頃は「ブログの記事には写真を付けたい！」と思ってフリーの写真をバシバシ貼っていたのですが、大手の写真を使うと他のブログの方の写真と被ってしまいオリジナリティが出せずに困っていました。
そこにフリーのHP素材を取り扱っている方が現れたので、その方のHP素材のページを訪問したら、イラストは勿論ですが写真素材も無料のを取り扱っていました！
昔からフリー素材を取り扱ったサイトでしたが、幸いはてなブロガーさんでこちらのサイトの写真を扱っている人を見掛けた事がなかったので

「これは写真が他のブログと被らなくて良い！」

と思って、写真は素材屋・HP素材のおすそわけ。著作権フリーのweb素材屋のサイトの写真を使うようになりました。

写真を使わせてもらった時には、きちんと素材屋さんのサイトへリンクを貼らせてもらったら、素材屋さんの方からお礼コメントを頂きました。

それがきっかけになり、ちょくちょく素材屋さんのブログ「趣味イラストレーターのオタク主婦のひっそりブログ。」を読ませてもらう中で「ココナラ」というサービスでイラストを引き受けて描いているとのこと。

「へぇーすごいなー。イラスト描いてもらえるんだー」

と思いつつ、その値段を見てビックリ！

1イラスト500円

ふーん。

え！？(ﾟДﾟ≡ﾟДﾟ)

と二度見しちゃいました(^^;

格安の500円なんかでイラスト描いてもらえるんですか！？
それならうちのブログのアイコンイラストをお願いしたい！
と心底思いました。

しかし友人にイラストは頼んであります。
ラフ画も起こしてくれていたので、いきなり「いいイラストレーターさん見つかったから、その人にお願いするから」と断ったりしたら、友人関係にヒビが入るというもの・・・。

「もう少し辛抱するか・・・」

と待つことに。
でも結局3ヶ月待ってもイラストが上がってこなかったので、その友人には断りを入れて、イラストレーターさんにイラストを頼むことに！

イラストの発注＆受取＆支払い

さて、話を整理しましょう。
今回私のブログのイラストをお願いしたのは

HP素材のおすそわけ。さん(id:k-h) さんです。

はてなブログでも書かれていて、下のブログがHP素材のおすそわけさんのブログになります。

趣味イラストレーターのオタク主婦のひっそりブログ。

また無料のイラストやフリーの写真素材を提供してくれていましてそのサイトはこちらになります。

素材屋・HP素材のおすそわけ。著作権フリーのweb素材屋

連絡はHP素材のおすそわけさんのTwitter（@webmaterials ）へDM（ダイレクトメッセージ）でイラストをお願いしました。

「マネー報道のアイコンイラストをお願いします」

と依頼しまして、翌日には第一段のイラストが上がってきて
「早い！」とビックリする事に。

気になる点をお伝えして、改めてイラストを描いてもらうことに。
こちらもラフ画が翌日に上がってきて、「このラフ画の感じでお願いします」とお願いし、待つこと2日。
非常に気に入るイラストが上がってきました！

その素敵なブログアイコンが、こちら！

イラスト関連の方達の中で流行のフラットデザイン風にして頂いたとのこと。

「このイラストでＯＫです！又ＳＮＳでも使いたいので、そのサイズの物も下さい」

とお願いして翌日に、大きめの画像と各ＳＮＳに最適化されたサイズのイラストを送って頂きました！

その後、Amazonギフト件で作業代金500円をお支払い。
支払い完了後に、ブログのアイコンを置き換え！
各SNSのイラストも一気に差し替え！

これで晴れて「マネー報道 MoneyReport」が、本当の意味で完成したかな、と。

よっしゃ、やった！！！

イラストをお願いしたい場合の連絡先と依頼手順

HP素材のおすそわけ。さん (id:k-h) にも了解を頂きまして、ブログでご紹介させて頂きました。
HP素材のおすそわけさんは、常時イラストの作業依頼を受け付けている、という事で、他にもブログやホームページでイラストをお願いしたい方もいるかもしれませんので、イラストの依頼方法をご紹介させて頂きます。

【イラスト依頼手順】

1. Twitterで「@webmaterials 」にイラストをお願いしたい旨を伝える。
2. メールで具体的なイラスト詳細を伝えて発注する。
3. メールで描いたイラストを送ってもらえるので、内容をチェックし「ＯＫ！」又は「ここはもう少しこうして欲しい」と伝える。
4. 納得できるイラストが仕上がったら完成！メールで完成イラストを受け取る。
5. Amazonギフト件で500円分をお支払いする。

と、５つのステップを踏んで、イラストを格安の500円で描いてもらう事ができます！
しかもこのイラストは版権も含めて頂けるとの事なので、支払い完了後は自分で好きに使う事ができます。
フリーの素材だと「無料で使えるけど、版権は手放してないよ」というものが多いですが、HP素材のおすそわけさんにお願いすると版権も頂けます。

いやー、しかしこんなに安くて良いのでしょうか？
今後も何か新しいイラストが欲しくなった時には、お願いしようと思っています。

「自分専用のオリジナルイラストが欲しい！」と思っていた方は、ぜひTwitterで「@webmaterials 」に連絡を取ってみて下さい！
オススメですよ！

おまけ

Amazonギフト券の買い方。
ちょっと500円分のAmazonギフト券を買おうと思ったら、はまった部分があったので使い方だけご紹介。
Amazonギフト券はお互いに本名や連絡先がわからなくても、相手のメールアドレスさえわかればお支払いが出来る優れもの。便利ですねー。

金額入力は注意が必要です！
普通に「金額を指定または選択」と書かれたドロップダウンを選んだら、「￥1,000」からスタートでそれ以上しか選べません！

500円を支払いたいのに・・・。

と、思ったらその右のテキストボックスにそのまま「500」と入力すれば500円分のギフト券を贈る事ができました！

記事下にフォローボタンを付けるのにホトホト苦労した話

ブログの記事下を弄くり回す

先日から開始したはてなブログの記事下スペースの弄り倒しですが、とりあえずZenbackから「併せて読みたいウィジット派生版（画像無し、ツイート数無し）」に変更しました。

Zenbackを外しちゃうと、今度はフォローボタンが消えちゃうという問題が出てきました。
まぁZenbackにはTwitterのフォローボタン位しかなかったのですが、スマホで表示するとどれ１つとしてフォローボタンがない状況に。
これでは

「このブログ面白いなー。定期的に読もう♪」

と思ってくれた方がいても、RSSフィードや各種フォローボタンがなければ

「なんだよフォローボタンも設置してないのかよ。面倒くさいから、やっぱフォローするのやーめた。」

と折角の読者様を逃がしてしまう事に繋がります。
それは勿体ない！

ぜひともフォローボタンを設置せねば！

フォローボタン設置を決意

いざフォローボタンを設置しようと思ったら、今度は設置方法がわからない・・・。
以前誰かの記事で見かけたのではてなブックマークしてあるかなー、と思ってはてぶを探せど見付けられず・・・(;_;)

きっと何かのサービスなり、詳しい方の記事を見れば一発で設置できるはずなのですが、いかんせんググレども見付けられず（T_T)

やむを得ず自力で

記事下フォローボタン設置作業を開始！

これが再び２時間作業になろうとは・・・

フォローボタン設置に悪戦苦闘

こっからの作業は悲惨でした。

とりあえずフォローボタンの画像をゲットすべく検索♪

3 Month Payday Loan Cost, Requirements and Repayment
無料フォローボタンアイコン。

これはすぐに見付かった♪
落としてみると

「あれ？FeedlyやlivedoorRSS向けのアイコンがない・・・」

そりゃあ海外サイトのですしねー。
livedoorRSS向けはないですよねー。
でもFeedlyはあっても良いんじゃ・・・。

なかった２つは従来どおりのアイコンを使うことに。

落とした画像アイコンの内、TwitterとGoogle+、RSSフィードをはてなフォトライフにアップ♪
さぁその画像に、リンクタグを付けて～・・・・、ってうまくいかいやん！？

表示させて見ると下の画像のうち、下に青く出ている文字の様な状態になってしまいました。
本当は上の画像みたくフォローボタンだけが表示されて、クリックするとフォロー先URLに飛ぶはずが、全然そんな風にはなりません。

ほへ？
はてなフォトライフのリンクっぽい奴にはリンクタグ（＜ａ＞）で囲ってもダメなの？
コードはこんな感じ。

<a href="https://moneyreport.hatenablog.com/feed" target="_blank" title="rss購読する">[f:id:MoneyReport:20140201075210p:plain]</a>

わからない～(ToT)

しょうがないから過去記事でほとんど読まれていない記事に、やむなくフォローボタンアイコンを貼り付けました。

そこの記事を表示させて、画像を右クリックし「画像URLをコピー」してURLをゲットして、それでコードを書き直します。

<a title="rss購読する" target="_blank" href="https://moneyreport.hatenablog.com/feed"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/M/MoneyReport/20140201/20140201082245.png" border="0" alt"rss購読する"></a>

今度はちゃんと表示されました♪

きれいに見えるかな？

フォローボタンをポロポロ並べて見ました。

PC表示だとこんな感じ。

スマホで表示するとこんな感じ。

どんなもんでしょうか？
FeedlyとlivedoorRSSのフォローボタンも同じデザインで欲しいですね・・・。
今度探して見ようっと。
まぁ今日はこんな所で力尽きるという事で(^^;

まとめ

• Zenback外すと自前でフォローボタンを設置しないとスマホではフォローボタン０個になる
• はてなフォトライフの画像リンク（？）はリンクタグ（＜ａ＞）で囲ってしまうと画像が表示されなくなる
• 自前でフォローボタンを設置すると非常に苦労する

どなたか、もっと簡単にフォローボタンを設置する方法をご存知でしたら教えて下さい(TOT)

追記

フォローボタンの動作確認をしてたら、FeedlyRSSの読者が10人、livedoorRSSの読者が7人にもなっていました！
フォローして頂いた皆さん、ありがとうございます！
前にチェックした時は自分自身で登録した1人だけで寂しい思いをしていたのですが、これだけ増えていると嬉しいですね(*^^*)

後ふと気が付いたのですが、ブログTOPに移動してみると各記事下に出ていたはてブボタンやツイッターボタンがなくなっている・・・。
他の方のブログも確認したが、同様だ・・・。
はてなブログの全体デザイン変更されたのかな？