2014-01-30

ウィジット実験場オープンのお知らせ

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

新しい試みを

昨日の記事でも書きましたが、私のサブブログであるWeb言語のお勉強～ど素人が往く～を使って、はてなブログで使用可能なウィジットの公開テストを開始しました。

「あわせて読みたいウィジット」の画像プレビューなし版 - Web言語のお勉強～ど素人が往く～

当面ははてなブログの記事下に取り付ける各種ウィジットのテストを行い、どのウィジットが自分のブログに最適なのかを確認していこうと思っています。

その後は、サイドバーに取り付けるウィジットなども実験してみようと思っています。

昨日までに試した内容

現在、私のブログの記事下に取り付けているウィジットは「あわせて読みたい」ウィジットの派生版になります。
最初の開発者が作った物を、別のプログラマーさんが手を入れて公開してくれたものです。

この「あわせて読みたいウィジット派生版」を少しずつ手を入れてテストしてみました。

結果としては「プレビュー画像読み込みを外すと読み込みが早い！」と、なりました。
プレビュー画像読み込みがなければ１０件表示しても結構早いです。

詳細は各ページをご確認下さい。

このブログの有効活用方を思いついた！「はてなブログウィジットの実験場」 - Web言語のお勉強～ど素人が往く～

早速ですが、当ブログ記事下のあわせて読みたいウィジット派生版も画像読み込みを外して、表示件数を５→７件に増やしました！

今後の実験対象ウィジット

今後、Web言語のお勉強～ど素人が往く～で実験する予定のウィジットを載せておきましょう。

あわせて読みたいウィジット（初版）
Zenback
LinkWithin
livedoor相互RSS
カスタム相互RSS

きちんと読み込み開始から、終了までの時間も表示される様にしてみたいなー。
なんとか作ってみたいな、と。

あと、テスト希望のウィジットがあればお知らせ下さい。
Web言語のお勉強～ど素人が往く～の記事本文内で表示させ、実験しますので(^^)V
コメントやツイッターでお気軽にお申し付け下さい。

まとめ

新しい試みにチャレンジ
昨日は「あわせて読みたいウィジット派生版」を実験
今後の実験対象ウィジット一覧
実験希望ウィジット募集してまーす♪

2014-01-29

サブブログの有効活用法を閃いた！ウィジットのテスト希望者大募集♪

アクセスアップはてなブログカスタマイズ

「あわせて読みたい」ウィジット

って皆さん、ご存知ですか？

普通にはてなブログを使っていると、記事下スペースってスターボタンがあって、SNSボタンが並んでいて、後ははてなブックマークコメントを表示したりZenbackを表示したりになると思います。
Zenbackは華やかですし、ツイッターやブコメ、フェイスブックコメント等が見られて良いのですが、難点は

読み込みが遅い

事です。
スマホとかで記事を一通り読んで下までたどり着いても、まだ読み込み中だったりと結構ガッカリさせられます。
そんな記事下スペースをもっと有効活用できないかと、色々な方のブログや記事を読んでいたら良い物を見つけました。
それが「あわせて読みたい」ウィジットです。

早速一昨日の夜から「あわせて読みたいウィジット」を自分のブログの記事下に導入してみました。

直帰率がすぐに改善♪

当ブログの直帰率はヒドイ物があり８８％でした(;_;)
100人中88人の人が、1記事読んですぐにこのブログから立ち去っている事になります。
せ、切ない・・・。

この直帰率の改善を狙ってあわせて読みたいウィジットを導入したのですが、これが効果覿面！
一昨日夜に導入して昨日の日中に訪れてくれた人がすぐに、他の記事も読んでくれたりと、ブログ内で回遊してくれる現象が起きました！
アクセス解析でどこのページから来てくれたのかがわかるんですが、Google検索流入やはてブ、グノシー砲等が多かったのですが、そこに記事から記事へと移動して読んでくれている方がチラホラ見られる様になってきたんです♪

夜に楽しみにGoogleアナリティクスを見たら直帰率が

８４％

に改善！
４％も改善しました！

詳しくは昨日の記事に。

「あわせて読みたい」ウィジットを記事下に導入！直帰率がすぐに改善♪ - マネー報道 MoneyReport
今後のもっと良い使い方も思い付いた！この記事も参照されたし(^^)v

あわせて読みたいウィジットの気になる点

やっほーい♪という感じなのですが、ただ気になる点が・・・。

まだ読み込みが遅い

んです。
ソースコードを見る限り、はてなAPIを読み込み、ブログのRSSフィードを読み込み、ブログのキャプチャー画像を読み込み、ツイッター数も読み込みと４つも読み込みをやっている様に見えます。
これは遅くなってもやむを得ない感じです。

というか私のスマホのMVNOが遅いだけという噂もありますが(^^;

いずれにしても読み込み速度は早いに越した事はありません。

はてなブログのデザイン変更のプレビューは使い勝手が悪い

読み込み速度を上げるためには、上記の４つの読み込みの内、遅い物を切っていく必要があると思うのですが、いかんせん”はてなブログ”ではなかなか試しづらいものがあります。

それは、ブログデザインを変更して「保存する前にプレビュー」表示をする事が出来ますが、これの精度が悪い！

まず何かを変更しても１回では読み込まれないため、わざわざ意味のない改行を入れて「再度プレビューして」という無駄な作業が必要です。
これはプレビューのバグなんだと思います。

そして「デザイン変更をやってプレビュー」を何度か繰り返していると「読み込み中」となって画面が固まった様になってしまう事もあります。

とてもじゃないですが、こんな環境でウィジットの色んなパターンのテストなんて出来ません。

閃いた！

色々と試せる環境が欲しい訳ですよ。
しかもはてなブログ上に。

！

ここまで思考が及んで閃きました！
今年に入って新しいブログ「Web言語のお勉強～ど素人が往く～」を立ち上げたのですが、全く使っていませんでしたが、このブログを使えば簡単にウィジットのテストが出来ます！

「何をどうするの？」と言いますと、私ははてなブログを「はてな記法モード」で書いているんですが、このはてな記法モードは優れ物で「JavaScript」などのコードが動くんです。
ウィジットを記事下じゃなくて、はてな記法モードで書いている記事本文に張り付けてしまえば・・・

という訳で早速昨日久々にサブブログを開いてウィジットを載せてみました。

おぉ♪
動く動く♪

このブログの有効活用方を思いついた！「はてなブログウィジットの実験場」 - Web言語のお勉強～ど素人が往く～
サブブログの有効活用方を思いついた！色んなはてなブログ向けのウィジットをテストする場所にしちゃえばいいんだ！　まずは第一弾「あわせて読みたい」ウィジット。これから色々といじくってみるぞー！

ウィジットが記事本文の中できちんと動いて表示されました。
これは楽しい♪
このサブブログの記事本文の環境を使って、ウィジットのいじくったパターンをテストしてみようと思います。
放置していたサブブログがあったればこそ、という感じですかね～。

色々と読み込み速度が出るパターンを試してみて最適な物をメインブログの記事下に取り付けようと思います！

テストしたいウィジットを大募集！

今回は「あわせて読みたい」ウィジットをサブブログで試してみましたが、サブブログは色々なウィジットの実験場にもする事にしたので

「このウィジットを自分のブログに取り付けたいけど、どんな物なのか先に試してみたいな～」

と思っていたアナタ！

「前に一度、新しいウィジットを導入したらイマイチで元に戻そうと思ったら、もう戻せなかった(T_T)」

と、お嘆きのアナタ！！

「今使っているウィジットの速度を試したいけど、自分のブログでやってゴチャゴチャするのがイヤだな～」

と思っていた、そうそこのアナタ！！！

どうぞ声を掛けて下さい！
私のサブブログ「Web言語のお勉強～ど素人が往く～」の記事本文でテスト表示を出来る様に掲載します！
もちろんＲＳＳフィード等の情報もアナタのブログのままの情報でＯＫです。
ぜひテスト希望の方は、ブログコメントやTwitterのリプライ等でテスト希望の旨を教えて下さい。

お待ちしていま～す！

まとめ

あわせて読みたいウィジットを導入したら直帰率４％改善！
あわせて読みたいウィジットの読み込み速度は少々不満
ウィジットのテストがはてなブログのプレビューでは、やり辛い
はてな記法モードならウィジットを記事本文で試せる！
サブブログでウィジットのテスト引き受けます！テスト希望者大募集！

2014-01-28

「あわせて読みたい」ウィジットを記事下に導入！直帰率がすぐに改善♪

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

閑古鳥が鳴く

えぇと、土曜日にアップした記事以降、当ブログは閑古鳥が鳴く状態になっています。
あんな誤解を与える様な記事を書いてしまったので自業自得なのですが・・・。
しかも各方面に甚大な影響が波及し、多大なるご迷惑を掛けてしまったようです。
本当にごめんなさい。

現在村はてブの開店休業状態なので、暇です。
はてなブログのブロガーさん達と以前の様にコメントなどで交流したい所ですが、私が顔を出すとご迷惑ばかりが掛かるので、しばらくは１人黙々と記事をアップするだけの生活としようかと。

いやー、ブロガーさん達との交流がないと暇です。
はい。

ブログデザインのカスタマイズに最適時期♪

いや、ちょっと待った。
ブログを立ち上げてからこっち、年末年始以外はずっと暇なんてなく忙しく過ごしてきていたので、これは色々とやろうと思っていた事を試すチャンスなのでは！

前々からブログデザインの中で

「記事下なんとかならないのかな～」

と常々思っていました。
これまではZenback（ゼンバック）を使っていました。
はてブコメントは出るは、Twitterの書き込みは見れるはで便利で使っていましたが、気になる点が2点。

読み込みがとにかく遅い！
ブログの直帰率改善には役立っていない！

１の「読み込みがとにかく遅い！」はZenbackを使っている人なら頷いて頂けると思います。
PCで見ているとまぁ我慢できる水準ですが、スマホで見てると表示までが遅く、「コメント書こうかなー」と思ってコメントボタンを押そうとしたら、ようやく読み込まれたZenbackがググぐっと広がってきて、関係ないはてブやツイートをクリックした事は１度や２度じゃありません。
誤クリック誘発。いやですねー。
もっとスマートに使ってもらいたいです。

２の「ブログの直帰率改善には役立っていない！」は最近気付いた事なんですが、私のブログの直帰率（ちょっきりつ）は異常に高いんです。
これはGoogleアナリティクスを導入してわかった事なんですが、私のブログは

直帰率８８％

ほぼ９人に１人が、訪れたページだけを読んで、他のページには行かずに立ち去っている事になります。
これは頂けないですね～。
せっかくブログに来てくれたんですから、他の記事も色々と読んで欲しいじゃないですか。

他のブロガーさんも直帰率を気にされています。

直帰率の目安は何%なんだろう？ | siteFrameNote
ブログの直帰率の話題。直帰率が高くても、平均ページ滞在時間が長ければ良いとの事。

直帰率に関しては、Zenbackはほとんど役に立っていない事がわかります。
ブコメやツイートが見られるのは良かったんですが、結局それは自分のページからはてブやTwitterのサイトに行ってしまうだけで、ブログの直帰率の改善には寄与しません。

何か対応策はないものか？

と探していたら、あったあった良い物があった♪

あわせて読みたいプラグイン（？）がありました！

「あわせて読みたい」とは？

元々はid:bulldraさんが開発された物で、はてなブログの記事下に表示するウィジットになるそうです。
自分のブログのRSSフィードとはてなブックマークAPIを使って、自分のブログ内の最新記事やはてブで人気のあった記事がランダムに表示されるというもの。
しかもブログ記事の画像付き！
はてブ数も表示される優れ物！
表示速度も速いとのこと！

これだー！！！！

という訳で、もう少し調べると元のウィジットから派生して開発されたid:exfreeterさんの方のを使わせて頂くことにしました。

ブログに「あわせて読みたい」を実装した - exfreeterのブログ
Zenbackをやめて「あわせて読みたい」に切り替える！Zenbackよりも読み込みも早く快適に♪

自分のブログへの反映の仕方は、上記の記事内で紹介されていたコードの中の「ブログ毎に合わせて変更する部分」の2カ所を修正しただけで、簡単に設置できました！

表示すると

早速載せて表示させると、早い速い♪
Zenback時代の遅さが嘘の様に、快適な表示となりました。

しかも早速、直帰率の改善に役立っているみたいです！
昨晩「あわせて読みたいウィジット」を導入したばかりですが、今日のアクセス解析を見ると、記事から記事へと移動しながら読んでくれている人が明らかに増えてます！
っていうか、今まではアクセス解析を眺めていても「記事から記事へ」と移動して読む人なんて、ほぼいませんでした。
すごいぞあわせて読みたいウィジット！

はてなブログで「直帰率が高いんだよなー」とお悩みのブロガーさんは設置を検討されると良いと思いますよ♪

まとめ

せっかくできたお暇を有効活用しちゃおう！
Zenbackの問題点は「遅い」、「直帰率には役立たない」
あわせて読みたいウィジットは簡単設置可能
あわせて読みたいウィジットは、すぐに直帰率の改善に繋がる！

追記（2014/01/29）

Googleアナリティクスで確認したら、やっぱり直帰率が改善していました！
あわせて読みたいウィジットを導入して、まだ１日目ですが直帰率が

88％　→　84％　に改善しました！

４ポイントの改善です！すごい！

ちょっとわかりにくいですが、グラフは１日単位のもの。
一番右端が本日で、１つ左が昨日の点になっています。
右肩下がりになっているのがわかるかと思います。
直帰率は低い方が望ましいので、右肩下がりになるのは良いことなんですよー。

こんなにすぐに効果があるとは！
あわせて読みたいウィジットには、もうちょっと手を入れてみたいなー、と思っています♪

2013-12-23

ブログのヘッダーメニューの隙間を狭くしてみる！

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

昨日のＳＯＳは反応なし・・・

昨日の記事で

「誰か助けてください！」

等と書いて「①、ブログデザインヘッダー画像と、メニューバーの間の白い隙間をもっと狭くしたい！」のを教えて欲しい旨を書いてみたりしました。

・・・。

反応なし（泣）。

まぁ世の中は３連休の中日でクリスマス前休暇。
こんな自分で調べもしないで人に聞く様な人間に、教えるほど皆さん暇じゃない。

良いことです。
皆さん３連休を満喫して下さい！

私も普段よりも時間が取れるので、試行錯誤してみる事に！

ブログヘッダーの隙間を縮められた！

色んな方のブログを拝見しながら

「こうかなー？いや、こうじゃないか！？」

と色々とCSS（スタイルシート）をいじくります。
表示しているブログデザインを壊してしまい、訪問者にがっかりさせる訳にはいかないので、ブラウザから「ソースを表示」でhtmlを表示させ、全文コピーして「メモ帳」に貼り付けて保存します。

「新しいテキストドキュメント.txt」　→　「20131223.html」　にファイル名を変更し、まずは自分のパソコン内でグリグリいじってみます。

スタイルが崩壊してみたり、右側のサイドバーが記事本文の下に行っちゃったりと大変でしたが、色々やる中でなんとかブログデザインヘッダー画像とメニューバーの間の白い隙間を狭くする事に成功しました！

その設定をいざ、はてなブログのデザインのCSSに反映させ、見てみると・・・。

狭くなった！

え？ほとんどわからない？

そんな方のために、昨日の画像と今日の画像を貼っておきますので見比べてください！

①昨日までのヘッダー部分
f:id:MoneyReport:20131222101511p:plain

②本日のヘッダー部分
f:id:MoneyReport:20131223093950p:plain

ほうら狭くなったでしょう！
どうですかこの見栄え！

え？

あんまり変わんない？

そんなつれない事おっしゃらずに～。

まぁCSS初心者がやった中では胸を張ってよいかな、と。
そう自己満足です！

え？どれだけ時間がかかったかって？

・・・

えぇ、２時間ほど（＾＾；
（やっぱり誰か助けて下さい・・・）

2013-12-22

ブログヘッダーにメニューバーを付けてみました♪

アクセスアップブログ運営はてなブログカスタマイズ

ブログヘッダーにメニューバーを付けてみた

以前からブログのデザインを色々といじりたかったのですが、平日はなかなか時間が取れないためずっと後回しになっていました。
３連休ということもあり、ちょこちょこと手を入れています。

本日は

メニューバー

をヘッダーに付けてみました！

取り付け方などはこちらの記事を参考にさせていただきました！

はてなブログカスタマイズ!!メニューバーを表示させるメリットとは - はてブのまとめ

使うサイトはこちら。
CSS MENU MAKER
http://cssmenumaker.com/

実際にメニューバーを作る画面はこんな感じ。
英語なのでよくわかりませんが、感覚的に作る事が出来ました。

f:id:MoneyReport:20131222100726p:plain

一通りメニューを作り終わったら、下の方の「Download」ボタンを押下すれば、「html」と「css」の圧縮されたファイルがダウンロードできるので、解凍してデザインに反映すればOKです。
（小さめの画像も落ちましたが、うまく反映できませんでした(T_T)）

余白が・・・

実際にヘッダーに取り付けてみると・・・

f:id:MoneyReport:20131222101511p:plain

ん？
なんか変。

ブログデザインの黒いヘッダー画像と、メニューバーの間に結構な白い隙間があります。

また相互RSSがすぐ下にくっついてしまっていて落ち着きがありません。
適度に離したいものです。

ですが、当方そこまでデザインの知識がありません(T_T)

誰か助けてください！

解決したいのは
①、ブログデザインヘッダー画像と、メニューバーの間の白い隙間をもっと狭くしたい！

②、メニューバーと相互RSSの間を少し離したい！

上記２点、どなたかわかる方教えて頂けないでしょうか？
片方だけでも良いです！
コメントや、参考になるページなど教えて頂けると非常に嬉しいです。

よろしくお願いします！

2013-12-13

カスタム相互RSSのご紹介♪SEO的に悪化しない相互RSS導入手順。コードも公開

アクセスアップブログ運営はてなブログカスタマイズ

livedoor相互RSS以外の相互RSSを導入してみた！

アクセスアップのために、はてなブログでは相互RSSを導入する事を以前オススメさせて頂きました。
しかし、この時に紹介したlivedoor相互RSSだとスパムリンクと認定される恐れがある（まだ可能性の段階です）、との事を下の記事で紹介されていました。

SEOに影響の出ない相互RSSを設置する方法
livedoor相互RSSだとSEO的に悪影響がある可能性がある！こちらで紹介されている相互RSSの方が、対Google的には良いようですね。

Google検索への悪影響が懸念されるのを払拭する対策を打つ「rel=”nofollow”」を追加する方法を紹介してくれています。

ですので、こちらの新しい相互RSSを導入してみようと着手したのが3日前。
この相互RSS、設置はlivedoor相互RSSと比べると非常に大変です。
livedoor相互RSSならば、専用サイトに行ってRSSフィードさえ貼れば後は勝手に連動してくれますが、この相互RSS（・・・なんか名前が欲しいですね、私が作ったんじゃないですが便宜的に「カスタム相互RSS」と呼ばせて頂きます。以下本日紹介する相互RSSはカスタム相互RSSと表記します）はコードを自分でカスタマイズしつつ、RSSフィードも自分でコード上に直接記述する必要があり、一カ所でも記述を間違うと

「表示されなくなってる！なんで？」

となります。

当ブログのタイトル下部に表示されているのがカスタム相互RSSです。
こちらを使うことで、Googleからスパム認定されずに済み、今後もGoogleからの検索で訪れてくれる人を減らさずに済みます。

http://178.hatenablog.jp/entry/2013/12/01/120239
Google流入を減らさずに済む、相互RSS導入方法解説。使わせて頂きます。

2016/5/4現在元ネタとして使わせてもらった「http://178.hatenablog.jp/」のブログは閉鎖されているようです。

ちなみにカスタム相互RSSは、こちらのブログが大元で紹介してくれている所です。
私のブログでは左右に2つ並べたパターンを示しましたが、こちらのブログでは色んな表示パターン例を示してくれていますので、お気に入りのパターンを使わせていただきましょう！
（ただしこのブログのコードをそのまま貼ってもうまく動作させられませんでした。参考にするのはCSSの部分ですかね。）

この２記事を組み合わせて、私のブログにきれいに表示させるのに、ここ3日間くらい費やしてしまいました・・・。
大変でした。

カスタム相互RSS貼るだけ簡単ソースコード

うまくいかなくて困っている方向けに、私のブログで使ったソースコードをご紹介します！
皆さんも3日も掛かるなら取り付けたくないですもんね(^^;

ブログヘッダー下に左右に２つ表示させるパターンになります。
サンプルはこんな感じ
　　　↓↓↓
f:id:MoneyReport:20131213123843j:plain

ヘッダ　タイトル下

<!-- 相互RSS Start-->
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
var getRssFeeds = function (_id, _urls, _maxLength) {
    if(!_id || !_urls || (!(_urls instanceof Array)))    return;
    var entryNum = 1;//各RSSの読み込みエントリー数
    var maxLength = (_maxLength)?   _maxLength : 0 ;
    var entriesArray = new Array();
    var complete = 0;
    var init = function () {
        for(var i=0 ; i < _urls.length ; i++){
            var feed = new google.feeds.Feed(_urls[i]);
            feed.setNumEntries(entryNum);
            feed.load(function(result) {
                if (!result.error) {
                    for (var i = 0; i < result.feed.entries.length; i++) {
                        var entry = result.feed.entries[i];
                        entriesArray.push(entry);
                        var pdate = new Date(entry.publishedDate);
                        var arr = entriesArray[(entriesArray.length-1)];
                        arr.sortDate = pdate.getTime();
                        arr.siteTitle = result.feed.title;
                        arr.siteUrl = result.feed.link;
                    }
                }
                complete++;
                if(_urls.length == complete)    echo();
            });
        }
    };
    var echo = function () {
        entriesArray.sort (function (b1, b2) { return b1.sortDate < b2.sortDate ? 1 : -1; } );//降順ソート
        var feedLength = (_maxLength)? _maxLength : entriesArray.length;
        var container = document.getElementById(_id);
        var html='<ul>';
        for (var i = 0; i < feedLength; i++) {
            var entry = entriesArray[i];
            html += '<li>';
            html += '<img src="https://favicon.st-hatena.com/?url=' +entry.siteUrl + '" />';
            html += ' <a href="' + entry.link + '" title="' + entry.title + '" target="_blank"  rel="nofollow">' + entry.title + ' <img src="https://b.hatena.ne.jp/entry/image/' + entry.link + '"></a>';
        }
        html += '</ul>';
        container.innerHTML += html;
    };
    google.setOnLoadCallback(init);
};
//表示するRSSフィード
getRssFeeds("feed_1", [
	"http://earningmoney.hatenablog.com/feed",
	"https://moneyreport.hatenablog.com/feed",
	"http://dshocker.hatenablog.com/feed"
]);
getRssFeeds("feed_2", [
	"http://mizuka123.net/feed",
	"https://moneyreport.hatenablog.com/feed"
]);
</script>
<div class="multiFeed">
<div id="feed_1"></div>
<div id="feed_2"></div>
</div>
<!-- 相互RSS End-->

上のコードはヘッダ下に配置します。
「デザイン」→「カスタマイズ」→「ヘッダ」を表示し、下の方の「ＨＴＭＬを記述できます」の所をクリックし、大きくなった所に、上記コードを貼り付けます。

デザインCSS

/* ----- 相互RSS Start ----- */
.feedArea ul {
    margin: 0;
	padding: 0;
	font-size: 90%;
	line-height: 1.6;
	list-style: none;
}
.feedArea ul li a img {
	vertical-align: middle;
}
.multiFeed {
	overflow: hidden;
}
#feed_1 {
	float: left;
}
#feed_2 {
	float: right;
}
#feed_1,
#feed_2 {
	background: #FFF;
	width: 478px;
	height: 120px;
	padding: 0 10px 0 0;
	border: 1px solid #BBB;
	overflow-y: scroll;
	font-size: 13px;
}
#feed_1 ul,
#feed_2 ul {
	padding: 5px;
}
/* ----- 相互RSS End ----- */

スタイルシートは
「デザイン」→「カスタマイズ」→「デザインCSS」を選択し、出てきたテキストボックスに、上のCSSのコードを貼り付けます。

ブログ毎の調整部分

上記の「getRssFeeds("feed_1", [」と「getRssFeeds("feed_2", [」のRSSフィードを並べる所だけ自分のブログの相互RSSやっている相手のフィードを並べて書きます。

具体的には

//表示するRSSフィード　
getRssFeeds("feed_1", [
	"ここにRSSのURLを書く",
	"ここにRSSのURLを書く"
]);
getRssFeeds("feed_2", [
	"ここにRSSのURLを書く",
	"ここにRSSのURLを書く"
]);

と、なります。
今後相互RSS希望の方が増えたら、ここにRSSフィードを１つずつ追加していく感じです。
間に入れるものは後ろに「,（半角カンマ）」が必要で、最後の1行は後ろにカンマを付けませんので注意が必要です。

あと、表示するエントリー数も調整できます。
下記の部分の「1」と書かれている数字を、自分の好きな数字に書き換える事で反映できます。

    var entryNum = 1;//各RSSの読み込みエントリー数

ソースコードをはてなブログにきれいに貼り付けるには？

ブログにソースコードを貼り付けたらグチャグチャになって困ったのですが、下記ブログの記事を参考に書いたらきれいに表示できました！

はてなブログにソースコードを貼り付ける方法 - くりにっき
はてなブログでソースコードをきれいに表示する方法。普通に貼り付けたらひどい事になりました。ありがとうございます！助かりました！

まとめ

・相互RSSも「rel=”nofollow”」を入れないとSEO的に悪影響がある（かも）

・カスタム相互RSSの導入は結構大変

・カスタム相互RSS導入例として当ブログのコードを表示

・ソースコードをきれいに表示させるのにはテクニックが必要

興味のある方は、levedoor相互RSSからカスタム相互RSSに乗り換えてみるのも良いかもしれません。
Googleからの流入検索数がこれでアップしてくれると良いのですが。

追記

そうそう当ブログは随時相互RSS募集中です。はてなブログの方なら大歓迎♪
サイト名
マネー報道 MoneyReport

サイトフィード
https://moneyreport.hatenablog.com/feed

コメント、Twitter等でご連絡下さい。

追記　2014/3/23

すみませんが、相互RSSして頂ける方が増えてきて表示がきつくなってきてしまったので、今後は「はてなブログ」の方しか受け付けない事にさせて頂きます。
まとめサイトや他サービスのブログの方との相互RSSは今後出来ませんので、よろしくお願い致します。
はてなブログの方はこれまでどおり、受け付けていますのでご連絡下さい。

2013-12-11

ブログデザイン変更への挑戦！最新記事を画像付に、相互RSSもSEO悪影響なしに（したい）！

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

ブログデザイン変更の動機

11月中旬くらいから

「ブログのデザインを変更したい！」

とは常々思っていました。
ですが日々の記事更新に追われ、優先度の低い作業は後回し。
ブログデザインは変更せずともブログは続けられるので、どんどん後に後になっていました。

ですが最近読み始めたブログがデザインを一気に変更されて見栄え良くなっていたので

「これは俺もやってみよう！」

と一念発起するきっかけに。

このブログのサイドバーに、画像付きの「最新の記事一覧」を付けました。 - 趣味イラストレーターのオタク主婦のひっそりブログ。
写真素材を使わせてもらっている、素材屋さん「HP素材のおすそわけ。(id:k-h)」さんのブログ。こちらのブログが「ブログデザインを変えた」と聞き、触発されて少しだけデザイン変更！って言っても右のサイドバーの「最新記事」が画像付きになっただけですが。

ブログタイトルとかもイラストを描ける特技を活かして、イラストにされています。
こういうのは正直羨ましいですよね～。

「自分の特技をブログでも活かす！」

私の課題の１つです。

「最新記事」を画像付に

さてイラストを描く特技はない私は、とりあえずは自分の出来る事から１つ１つやってみようと思います。

【修正済】はてなブログの「最新記事」を画像付きにする方法。 - #ChiroruLab

こちらの記事を参考にサイドバーにある「最新記事」を画像付にする挑戦をします。
「デザイン」→「カスタマイズ」→「サイドバー」→「モジュールを追加」で出てくる画面の「HTML」を選択。出てきたテキストボックスに、上記サイトで公開してくれているHTMLとjavascriptをコピーして、貼り付けます。ブログのURLや記事に画像がない時に代わりに表示する画像のURLを書き換えて、表示件数を「5」から「10」に変えて「変更を保存」ボタンを押します。

これだけ！

うーん。便利なコードを公開してくれる人がいて、本当に助かります。
id:chiroruさん、どうもありがとうございます！使わせて頂きます！

これでサイドバーが少し華やかになりました♪

もっと大幅に変えたい！

本当は

「もっと大幅に変えたい！」

という願望があるのですが、いかんせんHPやブログのデザインをいじくるのは苦手であります。
divタグとかを使って自由自在に好きなところに、色んなパーツ等を貼っているブログの方を見ると

「すごい苦労をしてHPの編集スキルを上げたんだろうな・・・。ウッウッ」

と、もらい泣きしそうになります。

え、そんな苦労せずにデザイン変えたり出来る人もいる？

・・・

いいんです。得意な事もあれば苦手な事もあって、それでこそ人間なんです。
なんでも出来ちゃったらスーパーマンになっちゃいます。（←ひねくれ）

自分の身の丈に合わせて（スキルに合わせて）ちょっとずつデザインは変更していきたいと思います。
詳しい方達のアドバイスを頂ける機会があれば喜んで、聞きたい、そんな気持ちです。

SEO的に良い相互RSSがあるらしい

余談ですが、昨日見つけたブログで

「相互RSSはSEO的には良くない。Googleからスパムと判定されて検索からの流入落ちるよ」

と書かれていました。
その検索流入が落ちる筆頭に当ブログでも使っている「livedoor相互RSS」が挙げられているじゃないですか！？
相互RSSで人がきてくれるのは嬉しいですが、Googleからの検索流入が減るのも困ります。

「何か手はないか？」

と思ったら、その記事の中でオススメしてくれている方法を使うと、Googleからスパム認定されずに相互RSSを出来るそうです。

SEOに影響の出ない相互RSSを設置する方法
こちらの相互RSSの方が、対Google的には良いようですね。

早急に対応しようと思います。
はい。
まだ対応していません(T_T)

2013-12-07

相互RSSとは？はてなブログへの導入方法解説

アクセスアップブログ運営はてなブログカスタマイズ

ご質問を頂きました！「相互RSSについて教えて下さい」

当ブログの昨日の記事

アクセスアップ対策！記事アップ時間を変更するだけでＰＶが増加する？ - マネー報道 MoneyReport
お昼休みにアップ出来てなくても、優しく見守って頂けると嬉しいです(^-^;

でコメントでご質問を頂きました。

よしみっちゃん (id:tomohiko_yoshimizu)さんです。

RSSについてよろしければご教授いただきたいのですが、
もしRSS登録されたら連絡みたいなものが来るのでしょうか。
なぜアクセスアップにつながるのか調査してもはっきりとした答えがでなくて。。

ご質問ありがとうございます。
コメントで書いても良いのですが、長くなりそうなので記事にて回答を書かせて頂きます。
相互RSSってよくわからないですよね。

私も「相互RSSいいよいいよー。特にはてなブログの人は導入したほうが良いよー」とは時折、色んな方のブログでお見掛けはしていたのですが、なかなか踏ん切りがつかずというか、ブログの記事アップだけにしばらくは追われ続けていただので、そんなブログ周りの細かいところまでは手が回っていませんでした。
相互RSSをこのブログに導入したのは11/21。ブログを立ち上げて一ヶ月以上も経ってからでした。

相互RSSを導入してからは、相手先のブログのリンクから最新記事に飛んできてくれる人が増えて、有難い限りです。相互リンクして頂いている皆さん、ありがとうございます。

質問の回答に一部先に答えておくと「もし誰かにRSS登録されても何の連絡も来ません」、アクセス解析をしていると見たことのないURLから人が来ているので、辿って見るとそのURLのブログやHPで相互RSSしてくれていたと気付けるだけです。

相互RSSとは？

相互RSSは「そうごあーるえすえす」と読みます。
RSSは皆さんもよくご存知の、ブログの最新記事等をXML等の形式で出力してくれる機能です。
RSSリーダーと呼ばれるソフトウェアや、WebサービスのRSSを利用する事で自分のお気に入りのサイトやブログの更新情報がチェックでき、いちいちそのサイトを訪れなくても、アップされた記事が読めるという優れ物です。
難点は、記事を読んでくれても書いたこちらの方ではあまりチェックが（アクセス解析が）出来ないところ位でしょうか？

で、上記が普通のRSSで相互RSSは

あなたのブログのRSSをこちらで表示しますよ。なのであなたのブログでも私のRSSを表示して下さいね。

という取り決めの前提に立ち、お互いに相手のRSSフィードを取り込み合う行為を言います。

はてなブログに相互RSSがおススメな理由

はてなブログで相互RSSが非常に有用なのは、やはり「はてなブックマーク」との連動がある点が挙げられます。
皆さん、記事をアップしたら「誰かはてなブックマークしてくれないかなー？」と思うじゃないですか？
新しい記事をアップして、その記事がはてなブログのTOPページで紹介してもらえるのなんてわずかな時間です。それを過ぎたら自分の読者登録してくれている人以外ほとんど誰もその新記事なんか見てくれなくなります。
それがこの相互RSSを使えば、相手のブログにかなり長い時間最新記事をしょうかいしてもらえるので、記事を読みに来てくれる人が増えます。そうすれば当然、はてなブックマークをしてもらえるチャンスも増えるというもの。
だからこそ、はてなブログの人は相互RSSが非常におススメなんです。

手動で相手のRSSを自分のブログに表示するのは大変なので、幾つかのWebサービスが展開されています。
私のブログで使っているのは「livedoor相互RSS」です。
こちらは無料登録するだけで簡単に相互RSSを使うことが出来ます。
今回はlivedoor相互RSSの使い方を説明させて頂きます。

livedoor相互RSSの使い方

01、livedoorIDを取得する。

http://blogroll.livedoor.com/に移動して画面中央の「いますぐ使ってみる」からlivedoorIDを取得し、相互RSSサービスの登録準備をします。

02、新規チャンネル作成

相互RSSサービスが使えるようになったらまずは、新規作成チャンネルに「自分のブログ名」を入れて「作成する」ボタンを押します。
f:id:MoneyReport:20131207090205j:plain

03、フィードを追加する

まずは自分のブログのフィードを追加してみましょう。
はてなブログのRSSフィードは
　「ブログURL/feed」
で出てきます。
自分のTOPページに行って、そこのアドレスの後ろに「feed」と打ち込みEnterキーを押すとRSSフィードが見られます。
まずは自分のブログを登録します。
f:id:MoneyReport:20131207090019j:plain

後からはここに相互RSSをしてくれることになった相手のRSSフィードURLを貼り付けていけばOKです。
「まだ相互RSSしてくれる人がいないよー」
という方は、当ブログは「はてなブログの方は大歓迎！誰でもＯＫ！」なので下記のURLを登録してみて下さい。
私のブログ「マネー報道 MoneyReport」が登録できます。

https://moneyreport.hatenablog.com/feed

コメントやツイッターなどでお知らせ頂ければ、こちらからも相互RSSへのフィード追加させていただきますので、よろしくお願いします。

04、登録していくとこんな感じ

f:id:MoneyReport:20131207085947j:plain

はてなブログに相互RSSを組み込む方法

ここまでくれば後はもう一歩。
はてなブログに組み込めば終わりです。

相互RSSを組み込む位置でオススメなのはヘッダかサイドバーですね。

05、貼付けコードをコピー

livedoor相互RSSの「貼付けコード」タグに移動しまして、そこの「通常版」に書かれているコードをコピーします。
f:id:MoneyReport:20131207092633j:plain

06、ヘッダに組み込む場合

「デザイン」→「カスタマイズ」→「ヘッダ」を表示し下の方の「HTMLを記述できます」のところをクリックし、大きくなった所に手順05でコピーした貼付けコードを貼り付けます。
そして「変更を保存」ボタンを押します。
f:id:MoneyReport:20131207091833j:plain

07、サイドバーに組み込む場合

「デザイン」→「カスタマイズ」→「サイドバー」→「モジュールを追加」で出てくる画面の「HTML」を選択。出てきたテキストボックスに手順05でコピーした貼付けコードを貼り付けて、適用します。
そして「変更を保存」ボタンを押します。
f:id:MoneyReport:20131207091845j:plain

ちなみに、06と07はどちらかだけに貼り付けるだけにしてください。
両方に同じコードを貼ったら、動きませんでした。どちらかお好みで貼り付けてください。

08、相互RSSをしてくれそうな人を探してお願いする！

これが結構大変です。
私も全然見付けられてなくて、まだまだ相互RSSして頂いている方が少ないです（泣）。

相互RSS募集

当ブログも相互RSSして頂ける方を募集しています！
はてなブログの方なら大歓迎！
ぜひ相互RSSをしてアクセスアップを図りましょう！
サイト名
　マネー報道 MoneyReport
サイトフィード
　https://moneyreport.hatenablog.com/feed

（追記）
すみませんが、相互RSSして頂ける方が増えてきて表示がきつくなってきてしまったので、今後は「はてなブログ」の方しか受け付けない事にさせて頂きます。
まとめサイトや他サービスのブログの方との相互RSSは今後出来ませんので、よろしくお願い致します。
はてなブログの方はこれまでどおり、受け付けていますのでご連絡下さい。

コメントやツイッターなどでお知らせ頂ければと思います。
ぜひぜひよろしくお願いします！

まとめ

・コメントにて「相互RSSについて教えて下さい」との質問を頂く

・相互RSSの概要解説

・はてなブックマークのチャンスが増える理由

・livedoor相互RSSの使い方解説（画像付）

・はてなブログへの相互RSSの組み込み方解説

・当ブログの相互RSS募集お知らせ

「こんな事が知りたい！もっと詳しく教えて！」というご要望はコメントから頂ければ、私の知っている事なら記事にて回答させて頂きます。
いつもブログネタを毎朝頭をひねって考えていて、困ることも結構あるので、良い記事ネタとして使わせて頂ければ、なんて(^^;

あとぜひ回答の記事にはご質問者の方は、はてなブックマークなんかして頂けたら・・・ゲフンゴフン。

おまけ．．．
本日のセツヤクエスト：昨日のGoogleアドセンスはうまい棒3本でした。

2013-12-04

Googleアドセンスをはてなブログで使う時の3つの注意点

ブログ運営ビジネスとマネーはてなブログカスタマイズ

広告幅は300ピクセル以下

セツヤクエストの私のマネー術としてGoogleアドセンスを始めました。
f:id:MoneyReport:20131205003156j:plain
HP素材屋

初日はとりあえずGoogleアドセンス広告を貼って喜んでいたのですが、id:bulldraさんにご指摘頂きまして、よく見るとスマホ表示でサイトがガクガクになってしまっていました。（bulldraさん、教えて頂きましてありがとうございます！）

巷では「スマートフォン横スクロールガクガク問題」と呼ばれているようです。
これは「はてなブログ」側の仕様で、スマホ表示では横幅が320ピクセル程度に制限されているからです。
さらに左と右に余白もあるので、実際に記事や広告が表示出来るサイズというのは300ピクセルまでとなります。

Googleアドセンスのモバイル向けの広告サイズは横幅320が多いんです。
最初に私が貼り付けた広告もよく確認してみると横幅320でした。
その広告を貼ると、広告がハミ出してしまい、スマホで表示すると横スクロールが出てしまい、記事を読み進めるために「エイヤッ」と指で操作すると右にちょっとずれてしまったりして、非常に読み辛いです。
というか

「もうここのブログ変にずれて表示されるから読むのやめよう」

と思うレベルです。
これはマズイ。

広告幅300以下だとなかなか良い物がなく、一旦「レクタングル（320×250）」を使ったのですが、すぐに「ハーフバナー（234×60）」にしました。
これは横幅も小さく、縦にも場所を取らないので読む方にあまり迷惑じゃないかな、という事で採用してみました。

はてなブログに貼るGoogleアドセンス広告は「横幅300以下」を心掛けましょう。

あ、やってはいけない注意点として、Googleアドセンスの広告の320サイズとかを貼り付けて、そのコード部分に書いてある横幅320を300に書き換えるとかはやっちゃだめです！
ポリシー違反になり、最悪はGoogleアドセンスのアカウント停止になります。ご注意を。

スマホ向け広告はデザインの「記事」に

スマホ向け表示が普通にできた事を書いてますが、なかには「スマホに広告を表示出来ない！」とお困りの方もいるかと思います。
時々記事で見かけました。

そんな時は、はてなブログの「デザイン」に行き、「カスタマイズ」→「記事」を開きます。
記事の下の方にHTMLを貼り付けられるスペースの「記事下」があると思いますが、そのすぐ下にある

「スマートフォン版にも表示する」

にチェックを入れます。
これだけ！
これで記事下部分にGoogleアドセンスを表示出来る様になります。

1ページに広告は3つまで

はてなブログに限った事じゃないですが、

Googleアドセンスの広告は1ページ3個までしか配置してはいけない

というルールがあります。
4個以上貼っていてもすぐには怒られないそうですが、Googleに見つかると広告料がもらえなかったり、Googleアドセンスのアカウント停止等の措置対象になりかねないのでやめておきましょう。

まとめ

本日の記事、Googleアドセンスをはてなブログで使う時の3つの注意点のまとめです。

・スマホ向け広告幅は300ピクセル以下

・スマホ向け広告はデザインの「記事下」に表示させる、チェック付ける

・1ページに広告は3つまでしか貼らない

はてなブログでもGoogleアドセンスを上手に使って、セツヤクエストしましょう！

・・・
ちなみに昨日初めて1クリックされていましたが、うまい棒が1本買える位の金額でした。
12/1導入で3日目で1クリック。3日で1クリックで1クリックうまい棒の値段として、見通しを立てると
1ヶ月　10クリック　＝　うまい棒10本
1年　　120クリック　＝　うまい棒120本
なんか絶望的なセツヤクエストな気が・・・

ライフネット生命×マネーフォワード×はてな節約の旅「セツヤクエスト」に参加中!!

追記

id:omfさんからブコメでご指摘を頂きました。

あれ？右下のAds by Googleが説明文にかかってしまって、それこそポリシー違反になってる気が、、、スマホ表示です。

えーと、スマホで確認すると・・・
↓↓↓これですね！
f:id:MoneyReport:20131205010044j:plain
この右下の「Ads by Google」が広告本文に、確かにかかっていますね。
でもGoogleアドセンスのソースコードのまま貼り付けたんですけどねぇ・・・。
でも確かに広告文に掛かっていて、広告文が欠けて表示されているのはなんか変な感じ。
Googleアドセンスヘルプの検索でポリシーを調べてみましたけど、ちょっとわかりませんでした。
でも怖いので、一度元の「レクタングル（中）300×250」に戻しました。
もうちょっと調べて見ます。