これで決まり!?の画像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でできるという事で使ってみました。
設定はこんな感じです
設定し直した部分は画像を縦並び、
記事表示件数を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番の問題なのですが、自分には知識が皆無。。。
そんな訳でひたすら検索、検索、検索・・・
サイトによってはサンプルも添付されいて試してみるのですが、条件がわなかったり、うまく動かなかったりです。
それでもなんとか今週くらいを目標に完成させたいと思います。
忍者Admax サイドバー編
前回の記事
では、はてなブログのスマホページに忍者Admaxのネイティブ広告を設定しましたが、今回はサイドバーに挿入します。
サイドバーに挿入という事で今回はレスポンシブデザインのページで使用します。
うまく馴染ませる為に人気記事の下に挿入します。
サイドバーのモジュールを追加から「HTML」を使用。
タイトルは空欄のままで忍者Admaxのコードを貼り付けます。
これでま~なんとなく表示されると思います。
参考までに自分の編集コードを張ります
<a href="${CLICK_URL}" target="_blank" style="box-sizing:border-box;display:table;table-layout:fixed;width:100%;padding:25px 0px 7px 0px;border-top: solid 0.5px #dddddd;">
<div style="display:table-cell;width:60px;height:60px; background-image:url('${IMAGE_URL}');background-repeat:no-repeat;background-position:50% 50%;background-size:cover;">
今回はpaddingで4方のスペースを調整、人気記事のサムネイルを60×60に設定しているのであわせています。そして今回も上方向だけボーダー。これでOKだと思います。後は自分の環境、設定であわせてください
但し、ここで問題がおきました。
ネイティブ広告はスマホ用の広告です。それでも、このままではPCページにも表示されます。
表示されるだけならある意味ラッキーなのですが、表示される広告はAdmaxの広告のみ。
どうやらPCページでは表示はされるけれど、報酬は発生しなっぽいです。
広告を使わせてもらっているので、それくらいはサービスしようと思う方もいる?かもしれませんが、やっぱり都合が悪いです。
という事でPCページには表示しないように設定
<style type="text/css"><!--
@media only screen and (min-width: 460px)
{
.none {display:none}
}
--></style>
<div class="none">忍者Admaxのコード
</div>
</div>
最小サイズ460以上のページでは表示しないように設定しています。
タブレットの扱いがよくわからないですが、ま~これで個人的には満足です。
ただ、こういう事は忍者側で対応してくれるか、PCページでも有効にしてくれるとありがたいですね。
忍者Admaxネイテイブ広告の編集
はてなブログのスマホページに忍者Admaxのネイテイブ広告を導入しました。(このブログではないです)
導入方法は多くの方が紹介していると思いますので省略。。。
初期設定でもそれなりに馴染んでいると思いますが、編集機能があるのでできるだけ違和感が無いように頑張ってカスタマイズしてみました・・・
参考にしたページはこちら
基本的な部分はそのまま使わせて頂いていますが、一部変更しています。
自分も注目記事の下に表示させたかったのでフッタにタグを挿入しています。
<a href="${CLICK_URL}" target="_blank" style="box-sizing:border-box;display:table;table-layout:fixed;width:100%;padding:10px 35px;border-top: solid 0.5px #dddddd;">
<div style="display:table-cell;width:70px;height:70px;background-
元のタグから修正したヶ所はpaddingで余白の調整。
border-topで上側だけボーダー。
画像サイズを注目記事の画像サイズに合わせています。
pxの指定で0.5が有効なのかどうかわかりませんが表示されているので良しとします。
自分のスマホで確認した限り(数字の調整は目視!)ではこれで良かったのですが、人によって違うのかは気になる所です。
注目記事の仕様が解っているなら悩む必要無いですが、自分にはこれが限界です。
本当は注目記事との余白を縮めるとさらに違和感が無くなるのですが、自分にはこれが限界。検索しようにもどう検索したら答えが見つかるのかがわからない始末です。
解る方がいらっしゃいましたら教えて欲しいです。
複数のはてなブログの管理の仕方?
そんな事当然と思う方も多いかもしれませんが個人的には気がついたときに嬉しかったので書いておきます。。。
はてなブログは無料でも3個PROなら10個も1つのアカウントで作成できます。
ま~出来るからと言ってもそれ程たくさん管理する事は無いと思いますが、3つや4つくらいなら管理している人もそこそこいるとか思います。
そんな複数ブログを書き分けする場合通常手順ならダッシュボードからマイブログで目的のブログを選択すると思いますが、はてなブログにはメインブログという概念があってあまり意識せずに記事を書き始めるとサブブログの記事を書きたかったのにメインブログで記事を書いていたなんて事がまれによくある?事があったりなかったり・・・
という事でそんな事態を回避する為にはそれぞれのブログの管理画面をブックマークする事。それだけです。
個人的にはブログの概要ページをブックマークする事をお勧めします。
こうするとブックマークをクリックする段階でどのブログに記事を書こうか意識するので間違いがまず起こりません。
さらにこのブックマークははてなカウンターやFotolifeにも使えます。
特にFotlifeは画像のアップロードをブログ毎に分けていると思うので間違って別ブログのフォルダにアップロードしてしまってめんどくさいからそのまま使うか、それとも本来のフォルダにアップロードし直すかなんて考える必要もなくなります。
複数ブログの管理なんて余裕で書き間違えた事なんて無いという方には必要無いですが、一度でも間違えて残念な思いをした事がある方は一度試してみると良いかと思います。
はてなブログのブログカード
前回の記事でも使っていますが、内部、外部問わずリンクを張る際になんだかおしゃれに見えるあれです。
リンクをコピーして張り付けるだけと非常に簡単で便利なのですが、使っていると、色々と改善したいと思う事も出てきます。
例えばデフオルトのまま使用すると
こんな感じです。悪くないです。でも、枠下のリンクは余計。
という事でリンクを削除。HTML編集から<cite>~</cite>の部分を削除
スマホで見ている方は変わらないと思いますがPCで見る場合はブログカードの幅が中途半端なのでmax-widthを100%に変更
簡単でおしゃれなリンクも結局自分が満足する為にはそこそこ手間がかかっています。
それとレイアウトを変更しようと数値を変更しようと(具体的にはもう少し高さを低くしたい)すると間単に表示が崩れます
という事で先人の皆様が上手にカスタマイズしていないか検索していたらChromeのプラグインで同等の機能が使える事がわかりました!
実際に参考にしたサイトを失念して()再度見つける事ができなかったのですが、こことほぼ内容は同じだったと思います
という事で早速試してみます
内部リンクの際の高さが低くなっている+枠下の余計!なリンクも無い。デフォルトでページ幅いっぱいに表示してくれると希望が全てかなったリンクが出来上がりました!
但し本当はもっと高さを低くしたくて少し編集を試したのですがやっぱりレイアウトは崩れてしまいます。
初期値を変更すればうまくいくかもしれないのでレイアウトを崩さず希望の値に変更する事が今の課題です