何でもない日常だから

幸せだと思う。

はてなブログ開発ブログをたまには読んだ方が良いかもしれません

というお話です。

存在くらいは皆さんも知っていると思いますが、ブログサービスをしている会社だからブログくらい書くよね~。なんて思わずにたまには覗いてみる事をオススメします。

読んでみるとわかると思いますが、結構頻繁にアップデートしています。

知らない内に以前は出来なかった事が出来るようになっていたりします。

 

少し前の話ですが、編集画面左下の「公開する」と「下書き保存する」を選択出来る様になった事はちょっとした事のようでなかなか大きな変化だったと思います。

 

最近は主にiOSのアプリ改修に力を入れているようなので個人的にあまり関係の無い記事が多いのですが、直近で気になった記事はこれです

 

ブログのaboutページを自由に編集できるようにしました(ページタイトルについて追記あり) - はてなブログ開発ブログ

 

はてなで書いているブログはここも含めて全てaboutページへのリンクを貼っていないので基本的に読まれる事は無いと思うのですが、いつ何処で読まれるかも知れません。

 

又、グーグル先生は何でも知っている?のであまりに貧弱な状態になっているとアドセンス絡みで警告を受けてしまうかも知れません。

警告を受けた時にこんなページ知らないと言っても後の祭りです。

これを機にaboutページを充実させたいと思います。

 

アドセンスのポリシー違反を解消する

別ブログが頑張ってくれたおかげでいよいよアドセンスの振り込み基準を意識する所まできました!

 

という事でアドセンスのポリシーを再確認・・・

 

 一発退場では無いと思いますが・・・

 

 違反していると思われる点が3つ程ありました。。。

 

1.display none で広告を非表示にしていた

 

これは違反でもあり違反でも無いです???

 

自分の場合通常のレクタングルの広告を画面サイズで表示制御していました。

これは×です。

但し、最近はレスポンシブのテーマを使ったり、スマホ表示を無視出来ない状況なのでやらざるをえないと思います。

 

という事で正規な方法をGoogle側で用意してくれています。

 

それは、レスポンシブ広告を利用する方法です・・・

レスポンシブ広告コードを修正する方法 - AdSense ヘルプ

ここで説明されていますが、レスポンシブ広告を使っての広告サイズの切替はOKです。

という事で早速レスポンシブ広告を使っての広告サイズ切替に変更しました。

実際の所今まではPVに対しての広告表示の数が倍くらいになっていました。。。

非表示に指定していた分もカウントしていたみたいです。

但しそれ程アクティブビューも落ちていないのでやはり良くない状況だったと思います。

これはRPMにも影響するのでいつペナルティーを受けてもおかしくなかったと思います。

 

2.404エラー画面の広告

 

これは明確にダメと言われていないような気もしますが、価値のないコンテンツという定義にあてはめれば違反になると思います。

 

1番簡単な方法はサイドバーに広告を貼らない事だと思います。

但し、はてなブログでの利用者が高い?と思われるスクリプトを使って記事下直下のアドセンス表示を行っている場合404画面でも記事下にアドセンスが表示されてしまうと思います。(通常カスタマイズの記事下にタグを貼った場合は表示されません)

 

自分は通常貼り付けでしたが、サイドバーにアドセンスを使っていたのでこれを削除(実際殆ど収益になっていませんでしたので特に悩む事もなく削除!)

と、ここで一様解決したのですが、どうせならと言う事で404エラー画面も価値のあるコンテンツにする為にカスタマイズ・・・

 

参考にしたサイトはこちら・・・

www.fair-skinned-monster.com

 

とりあえず自分の目標としては画像を使いたかった事、そしてお勧め記事が出せればなお良いという感じでした。

結構丁寧に説明されているのでコピペで楽勝!()と思っていたのですが、これが、全く動きません。。。

 

という事で順番に表示出来ない原因をみつけて行きました・・・

まず、そのまま貼ってみる・・・

ダメ

この時点でかなり悲壮感漂ってましたが、もう一度説明を熟読します・・・

 

貼り付け箇所の指示が記事下でしたが、詳細設定のヘッダー内に貼り付け

これで、とりあえず画像は表示されました!ただしお勧め記事は表示されません。

これは自分のサイトにはてブが全く無いから()と判断してとりあえず保留。

 

画像を自分のものに置き換える・・・

 

これがなぜかダメでした。

この問題は結構悩みました。URL指定も問題無いはずなのになぜかダメ。

それだけなら、まだしも画像下の文章も表示されなくなってしまったので何か問題が起きている事は間違いない状態です。

そんな訳でもう1度ソースとにらめっこです。

 

・・・???・・・!!!

 

という事でダメ元でと思ってやってみた変更が正解?だったようで画像表示に成功しました。

行った変更は画像参照URLの

img src='http://cdn-ak.f.st-hatena.com/images/fotolife/c/自分のID/×××

赤字部分を色白おばけさんと同じくl(小文字のエル)にしただけです。

最初はこの部分が自分のIDの頭文字だと思っていたのですが、(実際自分の画像参照URLを調べるとそうなっていました)もうここしかないっ!って感じで試しました。

なぜかうまくいった事例なので説明は出来ませんがとにかく表示出来ました。

 

次にお勧め記事ですが、これは普通にカテゴリリンクを文字表示にしようとしたのですが、ダメ。ここを変更すると画像すら表示されないのでやっぱり書式がまずいようです。

結構頑張ったのですが、とりあえずアドセンスは表示されていないのでOKという事にしてぶん投げています。。。

またいつかチャレンジしたいと思います。

 

と思ったらこのブログはスクリプト使って直下に表示していました。修正します。。。

 

3.トップに戻るボタンと広告が重なる

 

これも中々悩ましい問題です。

自分のページもスマホで見るには少し長めの記事があるので使っているのですが、解決方法を検討している状態です。

 

z-indexで重なりを指定すればOKかもという話もあったので少し試したのですが、うまくいきませんでした。。。

 

削除するしかないかなと思っていますが、とりあえず指摘を受けるまで、そのままにしよう()なんて思ってますが、早めに修正方法を見つけたいと思います。

 

 

とりあえず対応した事はこんな感じです。

 

見出しをカラフルにして楽しむ!

はてなブログをカスタマイズする際に誰もがするであろう?見出しのカスタマイズですが基本はカスタムcssで定義してそれを使う感じだと思います。

ページによっては違うデザインで使用する為本文に<style></style>で再定義して使っている方もいると思います。

 

ただし通常は最後に定義した形でしか使えないので使える形は大見出し(h5)、中見出し(h4)、小見出し(h3)の3種類です

 

ま~それでも十分だとは思いますし、SEOを意識してかっちりとこの枠組みを利用している方もいると思いますが、自分の場合あまりSEOは意識せずに見た目を良くしたいと思い日々奮闘しています。

 

という事で3種類じゃ足りない()ので簡単に見出しの数を増やす?方法を紹介したいと思います。

 

それは見出しタグにid属性をつける方法です

その為まず<style></style>内に見出しを定義します

 

/* 見出しのリセット */
.entry-content h4,

.entry-content h4::before,
.entry-content h4::after {
background: none;
border: none;
border-radius: 0;
}

/* 見出しh4 用 */
#midasi1 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #fb90a4;
border-bottom: 1px solid #fb90a4;
}
#midasi2 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #8765c1;
border-bottom: 1px solid #8765c1;
}
#midasi3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #ff7b1d;
border-bottom: 1px solid #ff7b1d;
}
#midasi4 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #217ed6;
border-bottom: 1px solid #217ed6;
}
#midasi5 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #d70d20;
border-bottom: 1px solid #d70d20;
}

 

とりあえず中見出しを使っていますが、当然大見出し、小見出しでも問題無いです。

ポイントはまず最初に見出しの定義をリセットして素の状態にする事です。

 

これは試して見ればわかると思いますが、デザインを変更するとカスタムCSSで定義した内容が残っていてデザインが崩れてしまいます。

これは本文途中で切り替えても同じ事です。

デザインによっては切替も可能だと思いますが、あまりお勧めはしません。

という事で今回は見出しの色変更のみです。。。

 

実際に色を切り替えて見出しを使ってみます・・・

 

書式は通常の見出しタグにid="定義した見出し"を挿入します。

 <h4 id="midasi1"> と言う感じです。

ちなみに自分は見たままモードを使っています。id="midasi1"の部分はHTML編集に切替て直接入力してください。

 

という事で見出しにidを定義して使ってみると・・・

 

 

 鹿目まどか

 

 暁美ほむら

 

 巴マミ

 

 美樹さやか

 

 佐倉杏子

 

こんな感じになります。

idを使えば無限?に楽しめると思います。

よろしければお試しください。

 

弱小ブログでアフィリエイト!?

弱小ブログでもアフィリエイトをやるメリットがあるか?

通常アフィリエイトはクリック型に比べてハードルが高いです。

そもそも弱小ブログは通常一日のクリックもごくわずかでそのわずかの中からクリック先で広告主の希望する行動を起こさなければ成果(収入)につながりません。

 

さらに支払いまで到達するには、それはもう大変な事です。

前回弱小ブログに最適な広告を考えてみる

ではクリック型広告について検討しましたが、今回はアフィリエイトについて考えてみます。今回もまずアクセス数をアップする事の方が大事という事はなしの方向で進めます。。。

 

アフィリエイトの代表的な所は何処か?

この辺りは検索すれば簡単に見つかると思いますが、A8.net、Amazon、楽天などかと思います。

Amazon、楽天は目的も明確で自社サイト内の商品を紹介して販売価格の数%を報酬として受け取る仕組みです。

仕組みは単純ですが、やはり弱小ブログには無理。

支払い基準に到達するのはいつになるのか検討もつきません。

A8.netはサイト登録しないと、扱っている商品、報酬も登録しないと詳細が確認出来ないのでとりあえず登録してみました。

審査は多分厳しくないと思いますが審査後に個別に各社の審査があります(審査なしもたくさんあります)

とりあえず色々見てみたのですが、自分には少し無理な感じでした。

これはA8が悪いというより自分のサイトの内容にマッチしていない感じです。

という事で他の会社も検討してみます。

(ちなみに自分の運営しているサイトはゲームブログ、趣味系のブログです。どちらも弱小ですが、趣味系の方は少しアクセス数も上がり始めています。)

 

色々探した中で運用を始めてとりあえず成果?が発生している所はアクセストレード http://www.accesstrade.net/ です。

 

どうしてここに決めたかというとオンラインゲームの案件が結構あってゲームブログにマッチしたからです。

 

ただ、それだけでは弱小ブログで成果が出る訳ないです。

成果が上がる理由はただ1つ

自分で登録してもOKな案件が複数あるからです。

さらにゲームの場合商品購入で報酬では無くて会員登録(無料)で報酬発生の案件が殆どでなのでお金が無くてもOKです。

1件の報酬は100円程度が多いので一気に大儲けなどと甘い話では無いですが、ブログを頑張るモチベーションにはつながると思います。

又支払いも1000円以上なのでとりあえず片っ端から登録すれば余裕で支払い基準額に到達します!

もちろんゲーム系サイトでなくても登録出来ます(基本的に全承認が多いです)どうなったら報酬が発生するかの流れの確認の意味でも有効だと思います。

 

又、自分で購入して報酬を貰う「アフィバックモール」が充実しています。

これも考え方は同じで自分が購入しても報酬が発生する案件がまとめられています。

その中で自分が欲しい商品が見つかれば通常購入よりもお値打ちで購入する事が出来ます。中には報酬が100%以上(支払い分が後日報酬として還元されます)もたくさんあります。

これは、実際に商品を試して商品を紹介してもらう為のシステムだと思いますが、弱小ブログにとって支払い基準額に到達する事が課題となるのですが、それをクリアする為に最適なシステムです

 

自分の現在の状況はクリックはそこそこ発生していますが、成果はまだ0。。。

それでも来月に初めての報酬が入金予定です!

 審査も厳しく無いと思いますし、とりあえず登録してからその先の事も考えてみても良いのではないかと思います。

アクセストレードへはこちらから

銀行振込手数料【¥0】!《アクセストレード》

 

これで決まり!?の画像RSS

ブログトップページに新着記事を表示させたいと思い、ひたすら格闘していますが、やっと納得できる方法がみつかったので紹介したいと思います。

 

今までの経緯はこちら

簡単に説明しますと、新着記事表示に忍者画像RSSを使用していたのですが、スマホ表示(iphone)での表示に問題があり、とりあえず記事一覧ページへリダイレクトでしのぐ事にした・・・

 

これが、今までの状態です。

 

ただし記事一覧は1ページに50件表示、そしてこの50件表示は変更不可なのでトップページにする事は正直不向きです。

という事で再度外部サービスで画像RSSを探してみました。

 

その中でこれが、自分にしっくりきた画像RSSです

各種数値を変更した際はその場で変更が確認できます。

変更可能な項目も必要十分です。

トップページ固定(未来日記)にしているので、そのままだと画像RSSに表示されてしまうのですが、特定キーワードを含む記事を非表示にする事で回避可能です。

 

無料かつ登録不要で使用可能です。

無料で使うにはリンク下部にフィードウィンドへのリンクが張られますが、控えめなので問題ないと思います。。。

又有料プランでリンクを消す事も可能です。

 

唯一?の問題は各記事に画像がない場合はてなブログのデフォルト画像が表示される事です。

ま~これは、アイキャッチ画像を指定する事で回避できるのでなんとかなるのですが、デフォルト指定(忍者画像RSSでは設定できました)出来れば完璧でした。

 

とま~ちょっとした問題はありますが、無料で使えるサービスでここまで設定できれば最高だと思います。

 

画像RSSをお探しの方はとりあえず試してみる事をお勧めします

 

弱小ブログに最適な広告を考えて見る

弱小ブログに広告?

 

そもそもの話最適な広告を考える前にアクセスアップを考える事のほうが大事な気がしますが、弱小ブログでも頑張るモチベーションを維持する為に最適な広告が何か考えてみます・・・

 

はじめに・・・

 

 十分なPVがある方には、おまえ何言ってるんだ?って話になると思います。

さらに扱っているジャンルなどにも左右されると思いますので、そういう考えもあるんだと思ってもあれればうれしいです。

 

そして検討するサイトはPV500くらいの、開設から3ヶ月程のサイトです。

 

広告会社の選択

 

数多くの広告配信会社がありますが、今自分の使用している広告会社は3社です。

順に紹介と使ってみた感想・・・

 

1.Googleアドセンス
 

ポリシー遵守に関しては厳しいと言われていますが、クリック課金型としては1番有名かと思います。

とりあえず1番良いと思われるポジションに配置しています。

 

実際収益的には1番良く(とは言え弱小ブログなので支払い実績まだなしです。。。)出来ればここに伸びてもらいたいと思っています。

 

ただし現状500PV程度ではクリックも数える程(0の日もあります)、さらにスマホページでは単価が非常に低く1円クリックもしばしば。PCでクリック課金が発生した時は小躍りします。。。

 

そして少しの間ですが、たまたま記事がヒットして1000PVの期間が1週間程あったのですが、その際はクリックも安定してきちんと数字として収益が上がりました。

 

やはりPVを上げなければ最低支払額の¥8000に届く事は大変そうです。

そしてスマホページのクリック単価が低い理由はページの評価が低い事が原因だと思いますので合わせて記事の価値も高めなければならないと思います。 

 

2.忍者Admax

 

そこそこ老舗かと思います。

アドセンスと比べれば掲載基準に関しては緩く審査も即承認でした。

 

ただし、広告を貼り付けてもしばらくは収入0でした。

一様広告表示のみでも収入になるようですが、それも無し。

その中でわかった事は、ここは毎日集計がリセットされる様だという事です。

その為100回表示で1円と仮定すると毎日90回表示では全く収入にならないという事です。

 

という事で今は同一広告(同じタグ)を3枚貼っています。

これがうまくいったかどうかは実際の所わかりませんが、少なくとも毎日0円という事は無くなりました。

ちなみに同一タグでも広告内容は違うものが表示される(同一の時もあります)ので大丈夫です。

 

クリック課金については、正確な金額は把握できませんが、一桁である事は間違いありません。。。これもサイト評価に関係しているんですかね~

 

そしてネイティブ広告もあり比較的編集もしやすいのでとりあえず使っていますが、あまり成果にはつながっていません

 

そして弱小ブログにとってのポイントは支払いが500円から可能という事です。

ネット銀行など指定口座なら手数料も無料なのでこれはモチベーション維持につながります。

先月までの実績ではじめて支払い出来そうです。。。

 

3.nend

 

こちらはスマホのみ表示されるクリック課金型広告です。

 

弱小ブログにとっては、スマホのみ表示という事でさらに厳しい戦いですが、現状スマホ比率が3:1くらいなので、とりあえず試しています。

 

こちらはクリック課金は固定で9円です。

ただし、評価によって多少は前後するようです。

 

そして、ここも表示回数によっての収益もありますが、日によって結構変動します。そして順調に右肩下がりでクリックが発生しないと収入にならないような状態です。

 

ここもネイティブ広告があり、ページから情報を読み取って最適な形に編集してくれるのですが、くせがあってなかなかうまくいかないです。

自力でタグ編集も可能ですが、タグを見てそれが、何をしているかギリギリでわかる程度の知識では全くうまくいきませんし、少し特殊な感じがします

 

最低支払い額は3000円でさらに振込み時に手数料が発生します。

現状弱小ブログでは話にならない状況なので、このまま続けるか非常に悩んでいます。

 

 まとめ

 

 結局の所PVを上げて、評価される良いページを作る事が1番大切だと思います。

 とりあえず、アドセンスとAdmaxはそのまま貼り続け、nendはいったん外そうと思います。もう少しPvが上がれば復活させたいと思います。

 

これで、小額ですが、ある程度定期的に振込みされるAdmaxでモチベーションを維持しつつアドセンスでの支払いを楽しみに待つ形で頑張りたいと思います。

 

 弱小ブログでアフィリエイトについても検討してみました

よろしければご覧下さい

 

はてなブログに忍者画像RSSを導入する(追記しました)

今回もこことは別のページの話です。

 

そのブログは構成上いわゆるホームページのようにトップページを固定(未来日記の形にしています)していて更新情報は一様サイドバーに表示していたのですが、メインページがスカスカで収まりが悪いので結局手書きで更新情報をテキスト入力していたのですが、毎日の事なので結構大変。

 

なんとか楽に出来ないかと悩んでいたら便利なサービスを発見!

忍者画像RSSです

その名の通りRSSから更新情報を取得して表示してくれるサービスです。

 

同様のサービスは他社さんでもやっているのですが忍者Admaxも導入しているので

そのまま同じIDでできるという事で使ってみました。

設定はこんな感じです

 

f:id:commseed:20160530122856j:plain f:id:commseed:20160530122855j:plain

 設定し直した部分は画像を縦並び、

記事表示件数を12記事

記事の大きさをピクセル指定にして横155px縦160px

画像の形を自動

タイトル文字数を16文字にしたくらいです。

 

但しこの形に決定するまでには結構悩んだので少し書き残しておきます。

 

まずレイアウトですが、当初は横並びを検討しました。

但し自分の使っている画像が横長の画像が多く画像の表示がうまくいかなかったので断念して縦並びに変更。

これも最初は1列1記事の形にしていたのですが、やっぱり画像がうまく表示されず。。。

 

どうしたものか悩んでいたのですが、使用しているページがレスポンシブなのであまり大きなサイズではまずいので余白も考慮して1列2記事の155pxにしたら理由は不明。。。ですがうまく収まってくれたので、この形に決定しました。

 

ここまでくれば、後は微調整です。

まず記事の表示件数は初期設定では10ですが、10記事表示するとPCでは

□□□□

□□□□

□□

 4×2+2

ぐりぐりっと幅を縮めると

□□□

□□□

□□□

3×3+1

となってしまってみっともないので2記事増やして12記事にしました。

これで4×3、3×4、2×6となるので違和感なく表示できます。

 

後はタイトル文字数を2列で収まるように設定しました。

 

このサービスを使うと新着記事だけでなくカテゴリ別だったり横スクロールで表示させたり色々な事が出来るみたいなので少し勉強して使ってみたいと思います。

 

 追記・・・

 

 自分は泥使いですでの確認はPCとAndroidスマホで確認しているのですが、iphoneを使っている人にはどう見えるのかなんとなく知人に確認してみたら衝撃の事実が・・・

 

画像をタップしてもリンクしないみたいです。。。

画像長押しで「新しいウィンドウで開く」はOKみたいです。

とりあえずヘルプとQ.Aを確認。

可能性としてはjavaがオフになっているとダメとの事ですが、オンになっていました。

悩んでもしょうが無いのでメール問い合わせ。

少々時間かかりましたが、回答を頂く事が出来ました。

 

要約すると、こっちの問題ではなく、はてなの仕様で無理的な回答でした。

ま~忍者さんの問題では無いので、確認に時間かかってもしょうがないね~って思いながらその原因を確認すると・・・

 

platform.twitter.com/widgets.jsが問題になっているようですとの事

 

???リンクの文字列の中にtwitterの文字があります。

はてなと言うよりツイッターのスクリプトと相性が悪いようです。

ツイッターと言えば自分は更新通知用にサイドバーにタイムラインを埋め込んでいます。

とりあえずこれを外して試す事もありですが、重要度的にこっちを残したいので、残念ながら忍者画像rssはあきらめる事にしました。

 

※但し、原因は他にもあるかもしれませんし、使用しているテーマの可能性等もあると思いますのでそれぞれの環境でとりあえず試してみる事をお勧めします

 

とこれで終了なら問題ないのですが、これでトップページ本文に新着記事を表示する事が出来なくなってしまいました。

 

という事で再検討してみます・・・

 

「続きを読む」にして新着記事一覧をを表示させる。

 

なんだかんだと記事数も100を超えているので全てを編集する事が大変()

又、そんな事想定していなかったし、各記事ラフに作っているのでいい感じに続きを読むが挿入できない

 

 サイドバーに新着記事を表示する

 

ま~これでも悪く無いですが、レスポンシブデザインのスマホページではまず見てもらえない。トップに戻った時に新着記事ではどうも落ち着かない。

という事で決定では無いですが、とりあえず次の形で運用しています・・・

 

トップページを記事一覧にする

 

はてなブログ機能のアーカイブでページを表示する方法を使います。

参考というかそのままコピペさせてもらいました

 記事一覧は、はてな自体の機能で外部サービス使用時のような表示スピード等に関する不安も無くとりあえず問題は無いですが、1ページの表示件数50件はちょっと多いです。これが変更できたら良かったと思います。

又スマホで50件表示はちょっと考えてしまいます。

それと1記事あたりの表示領域もちょっと大きめです。

PCならま~こんなものかなって感じですが、スマホで見るとかなり大きく感じてしまいます。

これを自分で制御できらよかったのにな~って思います。

 

ま~なんだかんだ、ぐだぐだと書いてしまいましたが、自分のページは検索からの記事リンクが殆どで、直帰率も中々のハイアベレージでトップに戻る人が殆どいないのであまり関係の無い話でした。。。

 

トッペページは関係ないと強がってみましたが、最適な画像RSSが見つかったので変更しました・・・

これで決まり!です

 

アコーディオンメニューを導入・・・したいです。。。

表題の通りこのブログではないのですが、アコーディオンメニューを導入しようと思っているのですが、かなり苦戦しています。

 

とりあえず動いてはいるのですが、自分の期待する動作が出来ない状態です。

 

今の所こんな感じです

 

 

こんな感じです。

 

そして、とりあえずこの状態で使っているのですが、グーグル先生は閉じているコンテンツの中は見てくれないらしいので、不本意ですが今の所初期状態はオープンで使用しています。

これがメニュー程度なら見えなくてもかまわないのですが、本文で使用している為検索されないのは問題ですからね。。。

 

この問題を解消させる為にメニュー上部に独立した開閉ボタン。各コンテンツ下部に閉じるボタンを設置したいと思います。

このアコーディオンはcssのみで作成されていますが、java や jqueryを使っても良いのでなんとか実現したいと思っています。

 

ただし、ここが1番の問題なのですが、自分には知識が皆無。。。

そんな訳でひたすら検索、検索、検索・・・

 

サイトによってはサンプルも添付されいて試してみるのですが、条件がわなかったり、うまく動かなかったりです。

 

それでもなんとか今週くらいを目標に完成させたいと思います。