Tumblrで 忍者AdMax と AdSense を使い分ける

忍者AdMax を導入することにした。

ずいぶん前からAdSenseを導入していたが、表示するコンテンツには非常に厳しい制限があり、筆者も過去に2回ほど警告を受けたことがある。このブログはTumblrで運用しているが、手軽に動画を共有できるしくみがあるので大いに利用している。しかしながら、共有した動画記事についてはAdSenseは表示していない。一般にYouTube公式チャンネルの動画であれば問題なしと云われているが、心配は尽きないからだ。

そこで、一般のテキスト記事に関してはAdSenseを表示、それ以外の動画記事に関しては忍者AdMaxを表示、と云った具合に使い分けることにした。設定方法は簡単である。

HTMLの事例 (タグなしの静的ページは広告非表示)

{block:PermalinkPage}  
{block:Posts}
    ...
    ...
{block:Text}
{block:HasTags}

<!-- アドセンス レスポンシブ 開始 -->
<div style='margin:2.5em 0 0;'>
<div style='max-width:728px;'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4276491656474968"
     data-ad-slot="5274038185"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<!-- アドセンス レスポンシブ 終了 -->

{/block:HasTags} 
{/block:Text}


{block:Video}
{block:HasTags}

<!-- admax 開始 -->
<div style='margin:2.5em 0 0;'>
<script src="http://adm.shinobi.jp/s/8dfa7a840e09757174e21f1516e433a3"></script>
</div>
<!-- admax 終了 -->

{/block:HasTags}
{/block:Video}
    ...
    ...
{/block:Posts}
{/block:PermalinkPage}

当ブログはレスポンシブ対応なので、AdSenseもレスポンシブ対応にしているが、忍者AdMaxではそうもいかない。よって、300x250サイズでパソコン・スマホ双方に対応できるようにした。因みに、オーバーレイ広告は好みではないので非表示にしている。

16728063835_304006177f_o.png

忍者AdMaxは初めてなので、暫く様子を見るつもりである。

admin
カテゴリ:ブログサービス
2015/03/05 23:03 | コメント (0)

Tumblr サムネイル付最近の記事を表示する

Tumblrでサムネイル付最近の記事を表示する方法を紹介する。

これを実現するためには、忍者レコメンドと云うサービスを利用すればよい。強力なカスタマイズ機能が用意されており、様々なレイアウトで表示することが可能である。表示速度も全く問題はない。勿論、レスポンシブ対応である。 (Tumblr限定サービスではありません・・・)

表示例 - パソコンの場合
116657731912_2dee896a37_o.png

表示例 - スマホの場合
216472598059_c267b530cc_o.png

設置コード (事例)

{block:PermalinkPage}

<!-- 最近の記事 開始 -->

<h3 style='margin:1.5em 0 1em;'>最近の記事</h3>

<div class="ninja-recommend-block" id="4504182a5c883fad4fc026650aaa4f19">
  <script type="text/javascript" src="http://rcm.shinobi.jp/js/imp.js"></script>
  <script type="text/javascript" src="http://rcm.shinobi.jp/r/4504182a5c883fad4fc026650aaa4f19"></script>
</div>

<!-- 最近の記事 終了 -->

{/block:PermalinkPage}

見栄えはよくなるが、当然のことながらサムネイル画像は単に縮小して表示しているだけなので、そのへんは頭に入れておいたほうがよいだろう。

忍者サービスには便利なツールがたくさんあり、”忍者おまとめボタン”も利用している。いずれのツールも一旦コードを設置すれば、管理画面でいつでもカスタマイズを含む管理が可能なのでたいへん重宝する。

admin
カテゴリ:ブログサービス
タグ:忍者 tumblr
2015/02/27 02:02 | コメント (0)

Tumblr サムネイル付関連記事を表示する その2

Tumblrでサムネイル付関連記事を表示する方法を紹介する。

Install - tumblr-in-link - How to install In-Link - In-Link: Display Your Tumblr Related Posts - Google Project Hosting

Tumblrユーザーではお馴染みの関連記事を表示するサービスであるが、「version 2.0」を利用することで、サムネイル付で表示することが可能になる。勿論、レスポンシブ対応である。

表示例 - パソコンの場合
116038262453_02665e3048_o.png

表示例 - スマホの場合
216036316564_2281262545_o.png

設置コード (事例)

{block:PermalinkPage}

<!-- 関連記事 開始 -->
{block:HasTags}
<h3 style='margin:1.5em 0 1em;'>関連する記事</h3>
<!− Start In-Link widget −>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="http://tumblr-in-link.googlecode.com/svn/branches/Version 2.0/js/tumblr-in-link.2.0.js?num=10&len=60&css=dark&title=&tags={block:Tags}{Tag},{/block:Tags}" type="text/javascript"></script>
<!− End In-Link widget −>
{/block:HasTags} 
<!-- 関連記事 終了 -->

{/block:PermalinkPage}

レイアウトのカスタマイズはCSSで行う。今回は、150x250枠に150x150のサムネイルを表示する。当ブログでは、”text”と”video”しか利用していないが、videoのサムネイルが150x150に対応していないので別途独自にサムネイルを用意した。 (←文中の数値の単位はピクセル)

CSS (事例)

#tumblrinlink {
    border-top: none !important;
    padding: 0 !important;
}
#tumblrinlink #inlink-title {
    visibility: hidden !important;
    display: none !important;
}
#tumblrinlink ul#inlink-list {
    margin: 0 !important;
    padding: 0 !important;
}
#tumblrinlink #inlink-logo {
    clear: both !important;
    padding-top: 5px !important;
}
#tumblrinlink li.inlink-item p {
    height: 90px !important;
    font-size: 95% !important;
    font-weight: normal !important;
    line-height: 1.4em !important;
}
li.inlink-item {
    display: block !important;
    float: left !important;
    margin-right: 10px !important;
    margin-bottom: 10px !important;
    height: 250px !important;
    border: none !important;
    padding: 0px !important;
    width: 150px !important;
    position: relative !important;
    overflow: hidden !important;
}
li#text.inlink-item img {
    height: 150px !important;
    width: auto !important;
    max-height: 150px !important;
    max-width: 800px !important;
}
li#text.inlink-item a:hover img {
    opacity: 0.75 !important;
}
#tumblrinlink a, .ninja-recommend-block a, #tagCloud a {
    color: #222 !important;
}
#tumblrinlink a:hover, .ninja-recommend-block a:hover, #tagCloud a:hover {
    color: #2a8998 !important;
}
li#video.inlink-item {
    background: url("http://static.tumblr.com/k7wp1u5/us8nkeh9u/film.png") no-repeat 0 0 transparent !important;
}
li#text.inlink-item {
    background: none !important;
}

見栄えはよくなるが、当然のことながらサムネイル画像は単に縮小して表示しているだけなので、そのへんは頭に入れておいたほうがよいだろう。

Tumblr サムネイル付関連記事を表示する その1: Jkun Blog
Tumblr サムネイル付関連記事を表示する その2: Jkun Blog

admin
カテゴリ:ブログサービス
タグ:tumblr
2015/02/27 01:02 | コメント (0)

TumblrにFacebookコメント欄を設置する方法

Tumblrでは、何故か?DISQUSを導入するのが一般的ではあるが、ここではFacebookのコメント欄を設置する方法を紹介する。

Facebook Developers

116473422810_7a490b0703_o.png

上メニューの「My Apps」→「Add a New App」でアプリを追加する。ここでは、アプリケーションIDを取得するだけでよい。

次に、ソーシャルプラグイン - Comments でコメント欄を生成するコードを取得する。

216464903099_3417c356dc_o.png

  • ”URL to comment on” : ブログのURLを指定する。 (後でパーマリンクに置き換える)
  • ”Width” : 横幅をピクセル値か%で指定する。ピクセル値の場合は数字(ex.600)で、%の場合は数字+%(ex.100%)で指定する。ここでは、レスポンシブテーマを前提に、100%と指定する。
  • ”Number of Posts” : 初期表示コメント件数を指定する。
  • ”Color Scheme” : ブログのテーマが明るい系か暗い系か指定する。

「Get Code」でコードを取得する。

317846434895_d171ac713f_o.png

<body class="{block:IndexPage}page-index{/block:IndexPage}{block:PermalinkPage}page-permalink page-{PostID}{/block:PermalinkPage}">

<!-- Facebookスクリプト 開始 -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=xxxxxxxxxxxxxxxx&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Facebookスクリプト 終了 -->

TumblrのHTML編集で・・・
取得した上のコードは、”body”タグの直後に挿入する。(↑ 事例)

{block:PermalinkPage}

<!-- Facebookコメント 開始 -->
<div style='max-width:600px;margin:1.5em 0 1em;'>

<div class="fb-comments" data-href="{Permalink}" data-width="100%" data-numposts="5" data-colorscheme="light"></div>

</div>
<!-- Facebookコメント 終了 -->

<style>iframe.fb_ltr {width: 100% !important;}</style>

{/block:PermalinkPage}

取得した下のコードはコメントを表示する場所に挿入する。(↑ 事例)

  • ”max-width:600px” : 横幅いっぱいに表示するが、最大600ピクセルに制限する。
  • ”{Permalink}” : URLはパーマリンクに置き換える。
  • ”<style>iframe.fb_ltr {width: 100% !important;}</style>” : IEで表示した際に横幅が限定されてしまうのを回避する。

パソコンの場合
416686919502_007ffb5695_o.png

スマホの場合
516500532690_39eceb3a44_o.png

こんな感じで表示される。

※コメント投稿通知が必要であれば、Comment Moderation Tool → [Settings] のモデレータに自分を追加すればよい。 ↓

616047829784_8ce32d127b_o.png

※正常に動作しない場合の対処方法
以下のコードを追加する。

<head>
・・・
<meta name="text:OGP Facebook Admin Number" content="" />
<meta name="text:OGP Facebook App Number" content="" />

<meta property="fb:admins" content="{text:OGP Facebook Admin Number}" />
<meta property="fb:app_id" content="{text:OGP Facebook App Number}" />
・・・
</head>

↓ テーマ編集画面で ”admins” と ”app_id” を設定する。

716668658661_8249a3f0e5_o.png

”admins”はアドレス欄に・・・

http://graph.facebook.com/xxxxxx (xxxxxx:ユーザーID)

と打ち込めば表示される。”app_id”は、アプリケーションIDのこと。

Comment Moderation Tool では、一括でコメントの管理が行える。

admin
カテゴリ:ブログサービス
タグ:Facebook tumblr
2015/02/26 07:02 | コメント (0)

TumblrにGoogle+コメント欄を設置する方法

Tumblrでは、何故か?DISQUSを導入するのが一般的ではあるが、ここではGoogle+のコメント欄を設置する方法を紹介する。

コメント欄を設置したい場所に以下のコードを埋め込むだけ。

{block:PermalinkPage}

<!-- Google+コメント 開始 -->
<h3 style='margin-top:1.5em;'>コメント</h3>
<div style='margin:1em 0 1em;'>
※モバイル端末でコメント欄がはみ出している場合は、一旦デバイスを傾けてください。最適なサイズに自動調整されます。
</div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div class='g-comments' 
data-first_party_property='BLOGGER' 
data-view_type='FILTERED_POSTMOD' 
data-width='600' 
data-href='{Permalink}'>
</div>
<!-- Google+コメント 終了 -->
<div style="clear: both;"></div>

{/block:PermalinkPage}

メモ

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

↑ Google+のスクリプトが既に定義されている場合は不要。

data-width='600'

↑ 横幅の初期値。 (ピクセル)

パソコンの場合
116433677457_7b803b2e4a_o.png

スマホの場合
216640994815_4c14b1789e_o.png

横幅の初期値は600ピクセルとなり、表示領域のサイズが変わると、ピッタリサイズに自動調整される。なお、コメントがない場合に、下の余白が少々目立つが回避策はない。

admin
カテゴリ:ブログサービス
タグ:Google+ tumblr
2015/02/25 04:02 | コメント (0)

Tumblrでタグが反映されない場合の対処方法

Tumblrでタグを追加したのに、反映されていない場合がある。この現象にTumblrをはじめた当初から悩まされている。解決策を検索するも出てこない。筆者だけの問題なのか?

現象を具体的に説明すると・・・ダッシュボードやブログ表示ではタグは表示されているが、タグ検索で表示すると一部記事が抜けることがある。

mega-editor 編集ツールで、表示が抜ける記事にチェックを入れて”タグを編集”をクリックすると、「1タグ」と表示されているにも関わらず、「表示できるタグはありません」と表示される。

16617897815_61c9df8830_o.png

時間が経過すれば反映されるだろう!なんて思っていたが、いつまで経っても反映されないので、解決策を試行錯誤して調べてみた。解決策は、以下のとおり。

  • 該当する記事を選択する。
  • ”タグを追加”をクリックする。
  • 使用していないダミーのタグを追加する。
  • ”タグを編集”をクリックする。
  • すると、元々あったタグが現れる。勿論、追加したダミータグも表示される。
  • ダミータグにチェックを入れて”タグを削除”をクリックする。

この一連の作業でタグが反映される。ただ、問題の記事が多くある場合や、どの記事に問題があるか分からない場合には、まとめて一括で処理するとよいだろう。上記操作は、正常な記事を対象に実行しても問題はないので、一括で複数(最大100)記事を選択して処理すればよい。記事が100を超える場合は、何回かに分けて操作する。すべての記事を対象に処理すれば確実だろう。

筆者の場合、タグの追加には、mega-editor 編集ツールを利用して、その際に確実にタグが反映されたか確認をすることにしている。もし、反映されていない場合には、今回紹介した操作を行うと云うことだ。

admin
カテゴリ:ブログサービス
タグ:tumblr
2015/02/23 00:02 | コメント (4)

Tumblrでリダイレクトが利用できるまでの道のり(条件)

Tumblrのページ編集では”リダイレクト”機能が提供されているが、アカウント取得直後のユーザーは利用することができない(表示自体されない)。投稿したりフォローしたりと、ある程度活動をしないと表示されないのである。筆者の場合は、約3週間で利用できるようになった。毎日確認しているワケではないので、もう少し前から利用できたかもしれないが。

16165323328_484482447b_o.png

とりあえず、現状での活動状況は以下のとおり。

投稿数:56 (テキスト45/動画11)
ファン:2
つけたスキの数:24
フォロー中のブログ:5
テーマの編集:はじめの2週間程度は頻繁に実施

プロフィールなどを他のサービスで一括管理している場合などには利用できそうだ。

admin
カテゴリ:ブログサービス
タグ:tumblr
2015/01/24 08:01 | コメント (0)

Tumblrで知っていると便利なツール5選

今年に入ってから、ブログをBloggerからTumblrに変更した。Tumblr初心者と云うことで、今日まで少しでも便利に運用できるようにと色々調べてきた。そのまとめと云うことで、今回はTumblrで知っていると便利なツールを紹介する。

タグ一括編集

アーカイブで記事を複数選択して、一括で記事削除、一括でタグの追加・削除が行える。

一括編集ツール

116159825500_e2a8840442_o.png

個別記事編集ブックマークレット

表示している自分の記事の編集画面を呼び出すブックマークレット。

閲覧している Tumblr のエントリーを編集ページで開くブックマークレット - 何にしても生っかじりの朴念仁

Markdownページリンク作成ブックマークレット

閲覧中のページの”タイトル+URL”をMarkdownで取得するブックマークレット。

JavaScript - Markdown用のリンクを作るブックマークレット - Qiita

HTML→Markdown変換

Flickrから取得したHTMLコードをMarkdownに変換する際に利用している。

HTML を Markdown へ変換

テーマのバックアップと復元

Tumblrでは、テーマを編集すると、自動で編集履歴が20世代保存される。ボタン一発で20世代前まで戻せると云うワケである。

カスタムテーマを復元

216159825470_72588c7167_o.png

とりあえず、今日まで調べた便利なツールと云うことで、簡単に紹介まで。

admin
カテゴリ:ブログサービス
タグ:まとめ tumblr
2015/01/23 12:01 | コメント (0)

Tumblr サムネイル付関連記事を表示する その1

Tumblrで関連記事をサムネイル付きで表示することにした。

Install - tumblr-in-link - How to install In-Link - In-Link: Display Your Tumblr Related Posts - Google Project Hosting

↑ここに設置方法が書いてある。サムネイル付きは、”version 2.0”を利用すればよい。当ブログの実際の設置例は以下のとおり。

表示例
16133903668_43b4d4c123_o.png

HTML編集で貼り付けたコード

{block:PermalinkPage}

<!-- 関連記事 開始 -->
{block:HasTags}
<h3 style='margin:1.5em 0 1em;'>関連する記事</h3>
<!− Start In-Link widget −>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="http://tumblr-in-link.googlecode.com/svn/branches/Version 2.0/js/tumblr-in-link.2.0.js?num=5&len=60&css=dark&title=&tags={block:Tags}{Tag},{/block:Tags}" type="text/javascript"></script>
<!− End In-Link widget −>
{/block:HasTags} 
<!-- 関連記事 終了 -->

{/block:PermalinkPage}

カスタムCSSで表示の調整

#tumblrinlink {
    border-top: none !important;
    padding: 0 !important;
}
#tumblrinlink #inlink-title {
    visibility: hidden !important;
    display: none !important;
}
#tumblrinlink ul#inlink-list {
    margin: 0 !important;
    padding: 0 !important;
}
#tumblrinlink #inlink-logo {
    clear: both !important;
    padding-top: 5px !important;
}
#tumblrinlink li.inlink-item {
    margin-right: 10px !important;
    margin-bottom: 10px !important;
}
#tumblrinlink li.inlink-item p {
    height: 70px !important;
}

表題を日本語にすると文字化けするため別途個別に表示してオリジナルは非表示にする。
タイトルが尻切れにならないように調整する。
ロゴが回りこむのを禁止する。

スクリプトのパラメータはInstall - tumblr-in-linkの”Options”を参考にされたし。

Tumblr サムネイル付関連記事を表示する その1: Jkun Blog
Tumblr サムネイル付関連記事を表示する その2: Jkun Blog

admin
カテゴリ:ブログサービス
タグ:tumblr
2015/01/19 05:01 | コメント (0)
このブログについて
jkun-400x400.jpg インターネット, パソコン, スマホ, Windows, Linux, Android, 各種アプリ, ブラウザ, ブラウザ拡張機能, 携帯電話, 社会情勢, 韓ドラ, K-POP 関連の話題を取り上げます。ジャンルとしては幅広く、特定のカテゴリに特化したブログではありません。お時間がありましたら、どうぞお立ち寄りくださいませ。
プロフィール
カテゴリ
ブログ内検索
Powered by さくらのブログ