名誉社畜ブログ

けっこうな社畜ですが、いろんなことやってます

【HTML・CSS】 忍者画像RSSを使ってみた

スポンサードリンク

またブログを少し改造してみました。

よくある『あわせて読みたい』のデザインで気に入ったものが探せず、何かいいの無いかなーとずっと思っていたのですが、ちょっと目に付いたものを見つけたので早速導入してみました。

併せて小改造した際のHTML・CSSもご紹介いたします。

 

忍者画像RSS(旧:忍者レコメンド)

先週から忍者AdMaxのアドセンスをPCサイトのサイドバーに入れたりして、すこーしだけ収益アップをしていました。

↓これです。

忍者AdMax

 

忍者はアドセンスだけでなく他にも色んなブログパーツを用意していまして、 今回使用してみたのは『忍者画像RSS』です。

少し前までは『忍者レコメンド』という名称だったようです。

 

これがなかなか面白く、とりあえずPCサイトとスマホサイトで以下のようなカスタマイズをしてみました。

 

(PCサイト)

f:id:meiyoshachiku:20160211003118j:plain

 

(スマホサイト)

f:id:meiyoshachiku:20160211004842j:plain

 

いろんな種類の中から選ぶことができるのですが、PCサイトはぐりぐり勝手に動く面白いのにして、スマホサイトはシンプルなテキストにしてみました。

 

無料登録

まずは以下から忍者に登録する必要があります。

忍者AdMax

細かな登録手順は説明を省略しますが、GoogleAdSenseや nendなんかと比べても非常に簡単だったので問題ないはず。

ついでに忍者AdMaxの登録もオススメします。

PCサイトのサイドバーに貼るだけで、クリックが無くても少しは稼いでくれます。

何より審査が一切無く、登録した瞬間から即広告を配信できるのが嬉しいです。

nendは承認に時間がかかり、さらに広告を貼り付けた後、実際に配信されるまで数時間必要だったので。

設定方法

登録が完了したら忍者画像RSSを起動します。

 

f:id:meiyoshachiku:20160211010331j:plain

この空欄に、ブログのトップページURLを貼り付けて、追加ボタンを押してください。

 

次にデザインを設定。 

参考までに私は以下のように設定しています。

(PCサイト)

レイアウト ⇒ カルーセル

表示設定 ⇒ 記事取得件数:10件

       1列の表示件数:4件

       記事の大きさ横:2

       記事の大きさ縦:3

       画像の形縦:2

オプション ⇒ フォントサイズ:大

 

(スマホサイト)

レイアウト ⇒ 一行テキスト

表示設定 ⇒ 記事取得件数:10件

       記事の大きさ:自動

オプション ⇒ フォントサイズ:小

 

あとは出来たタグを、はてなブログのカスタマイズで好きなところにコピペするだけです。

私はPCもスマホも『記事下』に貼り付けました。

 

更にPCサイトでは 人気記事セレクション というタイトルバーをつけました。

これをさっき貼り付けたところのすぐ上に貼り付けます。

 

そして以下を『デザインCSS』に貼り付ければOK。

 

最後に要注意ポイント。

このままタグを貼り付けて更新すると、確かに上手く表示されるのですが、クリックすると直接自分のサイトのそのページに飛ばず、『忍者あんてな』というサイト経由でのジャンプとなります。

自分のブログの周遊率を上げるための施策なので、外部サイトに飛ぶのはNGです。

これを防ぐために、以下の方法をとってください。

 

f:id:meiyoshachiku:20160211011225j:plain

忍者画像RSSに戻り、こちらの画像で赤枠で囲った『基本設定』をクリックし、『チャンネル設定』を選択してください。

 

f:id:meiyoshachiku:20160211011425j:plain

そして『アンテナサイト設定』のチェックボックスを外します。

 

これでリンクをクリックすると、忍者あんてなを経由せずに直接自分のサイトにジャンプすることが出来ます。

 

おしまい 

いかがでしたでしょうか。

気になった方は是非お試しください。

忍者AdMax

 

忍者AdMaxの報告記事もまたどこかのタイミングで書いてみますね。

 

(追記:収益の報告記事を更新しました)