Tumblrでテキスト記事のみアドセンスを表示する

Tumblrでは気軽に画像や動画を共有することができる。但し、アドセンスを導入している場合、YouTube動画を共有する際には注意が必要である。アドセンスのポリシーに抵触しないか細心の注意を払うことが要求される。しかしながら、これでは気軽に・・・と云う本来の考え方から逸脱してしまうことになる。

そこで、アドセンスを表示する記事は、テキスト記事だけとし、画像や動画その他の記事にはアドセンスを表示しないことにした。これをTumblrで実現するのは比較的簡単である。

{block:Posts}
{block:Text}
{block:PermalinkPage}

アドセンスコード

{/block:PermalinkPage}
{/block:Text}
{/block:Posts}

”パーマネントページ(個別記事)でテキストの場合のみアドセンスを表示する。”と云った具合になる。これで、動画の紹介でアドセンスの著作権問題でビクビクすることもなくなる。アドセンスチームによると、YouTube公式チャンネルにアップされてる動画は基本的にOKとされているが、本当に大丈夫か?不安は拭えないので、やはり↑のような処置は必要ではないかと思われる。

ヘッダー部分のアドセンス設置例

{block:Posts}
{block:Text}
{block:PermalinkPage}

<!-- アドセンス レスポンシブヘッダー広告 開始 -->
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:468px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:728px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<div class='adslot_1' style='margin:0 0 1.5em 0;'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ01 -->
<ins class="adsbygoogle  adslot_1"
     style="display:block"
     data-ad-client="ca-pub-4276491656474968"
     data-ad-slot="3158176581"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- アドセンス レスポンシブヘッダー広告 終了 -->

{/block:PermalinkPage}
{/block:Text}
{/block:Posts}
admin
カテゴリ:ブログサービス
2015/01/15 03:01 | コメント (0)

TumblrテーマApolloのカスタマイズ覚書

Tumblrのテーマは様々あるが、当ブログではレスポンシブに完全に対応しているApollo - 穏やかに日記を書きたい人のためのTumblrテーマを採用している。その上で、いろいろカスタマイズしたので、覚書として簡単にメモしておくことにした。

英語表記を日本語表記に

ナビゲーションなど英語表記の部分を日本語表記にする。HTMLを見れば改変箇所はすぐに分る。

Google アナリティクスの設置

設置方法は、Google アナリティクス公式サイト - ウェブ解析とレポート機能 ? Google アナリティクスをじっくり見れば理解できる。

コメントシステムにDisqusを採用

設置方法は、Disqus ? The Web’s Community of Communitiesをじっくり見れば理解できる。

はてなスタートークンの設定

「はてなスタートークン」を取得する: Jkun Blog

Google Authorの設定

Google+の自分のプロフィールにアクセスすればURL欄に表示される。

https://plus.google.com/113288816676366501699

Authorの設定

自分の名前を記入する。

関連する記事の表示

Tumblrで関連記事が表示されない場合の対処方法: Jkun Blog で取り上げた、Create Tumblr related posts script. - RAKUGAKI PROGRAMERSを採用する。

複数のタグがあった場合、一つ目のタグに関連する記事しか表示されないため、tumblr-in-link - In-Link: Display Your Tumblr Related Posts - Google Project Hostingに変更する。こちらは、複数のタグに対応して関連記事が表示される。

最近の記事の表示

テーマ既定の最近の記事はテキスト記事のみ表示?となっているので、RSSから最近の記事を引っぱってくるようにする。

Tumblrで最近の記事を表示する: Jkun Blog

タグクラウドの表示

Tumblr Tag Cloud Widget

以下、事例として実際の改変したHTMLコード(抜粋)

ヘッダー部分のアドセンス

    <div id="main" class="autopagerize_page_element" role="main">



{block:Posts}
{block:Text}
{block:PermalinkPage}

<!-- アドセンス レスポンシブヘッダー広告 開始 -->
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:468px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:728px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<div class='adslot_1' style='margin:0 0 1.5em 0;'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ01 -->
<ins class="adsbygoogle  adslot_1"
     style="display:block"
     data-ad-client="ca-pub-4276491656474968"
     data-ad-slot="3158176581"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- アドセンス レスポンシブヘッダー広告 終了 -->

{/block:PermalinkPage}
{/block:Text}
{/block:Posts}

記事下部分の諸々

{block:Text}
{block:PermalinkPage}

<!-- アドセンス レスポンシブ記事下広告 開始 -->
<div style='margin:1.5em 0;padding:1.5em 0;border-top:1px dashed #ddd;border-bottom:1px dashed #ddd;'>
<div style='max-width:336px;'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ02 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4276491656474968"
     data-ad-slot="7029972985"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<!-- アドセンス レスポンシブ記事下広告 終了 -->

{/block:PermalinkPage}
{/block:Text}



{block:PermalinkPage}

              {block:Date}
                <ul class="like_and_reblog_buttons">
                  <li>{ReblogButton size="18"}</li>
                  <li>{LikeButton size="18"}</li>
                </ul>
              {/block:Date}

              <div class="social-buttons">
                <span class="social-buttons-line1">
                  {block:IfEnableTweetButton}
                    <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical">ツイート</a>
                    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
                  {/block:IfEnableTweetButton}
                  {block:IfEnableLikeButton}
                    <div class="fb-like" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
                  {/block:IfEnableLikeButton}
                  {block:IfEnableHatenaBookmarkButton}
                    <a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
                  {/block:IfEnableHatenaBookmarkButton}
                </span>
                <span class="social-buttons-line2">
                  {block:IfEnablePlus1Button}
                    <div class="g-plusone" data-size="tall"></div>
                    <script type="text/javascript">
                      window.___gcfg = {lang: 'ja'};
                      (function() {
                        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                        po.src = 'https://apis.google.com/js/plusone.js';
                        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                      })();
                    </script>
                  {/block:IfEnablePlus1Button}
                  {block:IfEnablePocketButton}
                    <a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
                    <script type="text/javascript">!function(d,i){
                        if(!d.getElementById(i)){
                        var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);
                        }
                      }(document,"pocket-btn-js");
                    </script>
                  {/block:IfEnablePocketButton}
                </span>
              </div>

{/block:PermalinkPage}



{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/trunk/js/tumblr-in-link.1.0.js?num=10&len=60&css=complete&title=&tags={block:Tags}{Tag},{/block:Tags}" type="text/javascript"></script>
<!− End In-Link widget −>
{/block:HasTags} 
<!-- 関連記事 終了 -->

{/block:PermalinkPage}



{block:PermalinkPage}

<!-- 最近の記事 開始 -->
<div id="recent">
<h3 style='margin:1.5em 0 .5em;'>最近の記事</h3>

    <script src="http://feeds.feedburner.com/JkunBlog?format=sigpro" type="text/javascript" >
    </script>
    <noscript>
    <p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/JkunBlog"></a><br/>Powered by FeedBurner</p>
    </noscript>

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

{/block:PermalinkPage}



{block:Text}
{block:PermalinkPage}

<!-- アドセンス レスポンシブ記事下2広告 開始 -->
<div style='margin:1.5em 0 0;padding:1.5em 0;border-top:1px dashed #ddd;border-bottom:1px dashed #ddd;'>
<div style='max-width:728px;'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ03 -->
<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>
<!-- アドセンス レスポンシブ記事下2広告 終了 -->

{/block:PermalinkPage}
{/block:Text}



{block:PermalinkPage}

<!-- タグクラウド 開始 -->
<h3 style='margin:1.5em 0 .5em;'>タグクラウド</h3>
<div id="tagCloud"></div>
<script type="text/javascript" src="//post-theory.com/public/tagcloud/jkuntum?tn={Name}&sort=alphabetical&mincount=1&maxsize=150&math=modlog&fontsize=16px&pad=10&tagct=%20(%24)" async="async"></script>
<!-- タグクラウド 終了 -->

{/block:PermalinkPage}



{block:PermalinkPage}

<!-- Notes 開始 -->
{block:NoteCount}
<h3 class="notecount-header" style='margin:1.5em 0 .5em;'>{NoteCountWithLabel}</h3>
<div class="notecontainer">{PostNotes}</div>
{/block:NoteCount}
<!-- Notes 終了 -->

{/block:PermalinkPage}



{block:PermalinkPage}

<!-- Disqus コメント 開始 -->
{block:IfDisqusShortname}

<div id="disqus_thread" style='margin:2.5em 0 0;'></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'jkun-blog'; // Required - Replace <example> with your forum shortname
    var disqus_url = '{Permalink}'; 

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

{/block:IfDisqusShortname}
<!-- Disqus コメント 終了 -->

{/block:PermalinkPage}




          </footer>

        </article>

 

※今後のカスタマイズを考慮して、既定の外部cssファイルを別の外部cssファイルとして定義して改変することにした。

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

アドセンスのレスポンシブ広告の横幅を制限する

アドセンスのレスポンシブ広告を採用するにあたって、広告の横幅を制限したい場合がある。例えば、970px幅の広告が出現してしまうときに、最大728px幅の広告に抑えたいと云う場合である。

方法は極めて簡単だ。

<div style='max-width:728px;'>
   .
   .
</div>

このようなスタイルシートで最大幅を制限してやれば、広告はそれに従って表示される。ここでは、728pxにしているが、336pxにすれば最大幅は当然のことながら336px幅に制限される。

<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="7029972985"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
admin
カテゴリ:ブログサービス
タグ:アドセンス
2015/01/09 23:00 | コメント (0)

「はてなスタートークン」を取得する

筆者が利用しているTumblrのテーマには、”はてなスター”が予め設定されている。更に、「”はてなスタートークン”を取得すると、スターが押されたときに、はてなの”あなたへのお知らせ”に通知が届くようになる」とあったので、トークン取得までの手順を調べてみた。

とりあえず、はてなのアカウントは取得済みと云うことで話をすすめる。

http://s.hatena.ne.jp/TumblrのユーザーID/blogs

にアクセスして、外部のブログサイトとしてTumblrのブログを登録する。すると、↓にように”はてなスタートークン”が表示される。

16195187376_d7a47705a2_o.png

表示されたスクリプト中の

Hatena.Star.Token = '英数字の羅列';

この英数字の羅列がトークンとなる。

admin
カテゴリ:ブログサービス
タグ:はてな tumblr
2015/01/07 10:01 | コメント (0)

Tumblrで関連記事が表示されない場合の対処方法

Tumblrで関連記事(Related Posts)を表示するスクリプトを設置しても正常に表示されない。標準で提供されているテーマだと動作するのに・・・

tumblr-in-link - In-Link: Display Your Tumblr Related Posts - Google Project Hosting

↑とにかく反応なし。何も表示されない。

Create Tumblr related posts script. - RAKUGAKI PROGRAMERS

↑表示はされるが、表示される場所が問題。何故かフッターの後に追いやられる。

色々試行錯誤しながら調査した結果、所謂”あとで読む”の”Pocketボタン”を表示させると、関連記事の表示に影響を及ぼすことが分かった。利用したテーマが、たまたま”Pocketボタン”の表示機能をサポートしており、この機能をONにしていた。とりあえず、特に必要のない機能であったのでOFFにして事なきを得た。

もし、関連記事が正常に表示されいない方は、是非チェックしてみてください。

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

TumblrのテーマHTMLを自動でバックアップ(世代管理)

Tumblrのカスタマイズをするときには、頻繁にテーマのHTMLをコピペしてバックアップしていた。もしかの場合に元に戻せないと困るからである。しかしながら、色々調べてみると、TumblrにはもともとテーマのHTMLを自動で世代管理(20世代)してくれる機能があった。

カスタムテーマを復元 | Tumblr

16013448817_b58fc56b09_o.png

これは便利だ!

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

アドセンスのレスポンシブ広告を改変する

アドセンスのレスポンシブ広告は大変便利であり、筆者のようにパソコンもスマホも同一テーマで運用している場合には特に威力を発揮する。

但し、ここでひとつ問題が出てくる。スマホでのファーストビューで300x300の広告が出現するのである。考えてみれば当たり前のことではあるが、アドセンスではスマホでのファーストビューにおいて広告の影響でスクロールしないと記事が見えないような状況はNGとしている。もう少し簡単に云えば、ファーストビューに300x300の広告がドーンと出現するのはNGになる可能性が高いと云うことである。このことは、訪問者からしてもちょっと・・・と云う感じで引いてしまうので避けたほうがよいだろう。

そこで、レスポンシブ広告の広告コードを改変して対応する。

レスポンシブ広告ユニットを作成する - AdSense ヘルプ

↑ここに改変方法が記載されているが、筆者の場合は以下のように改変して対応した。

<!-- アドセンス レスポンシブヘッダー広告 開始 -->
<style type="text/css">
.adslot_1 { width: 320px; height: 50px; }
@media (min-width:468px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:728px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<div class='adslot_1' style='clear:both;margin:10px auto 0 auto;'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ01 -->
<ins class="adsbygoogle  adslot_1"
     style="display:block"
     data-ad-client="ca-pub-4276491656474968"
     data-ad-slot="3158176581"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- アドセンス レスポンシブヘッダー広告 終了 -->

実際にスマホで見てみると・・・

16180769581_08a5ca9ee3_o.png

↑こんな感じになる。如何でしょうか?いい感じで表示されていますね。パソコンで見た場合は、728x90 または 468x60 で表示されることになる。ファーストビューだけは、広告の高さに配慮したいものだ。

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

Tumblrで記事をバックアップする ~ Linux編 ~

Tumblrは標準では記事のバックアップ(エクスポート)機能を提供していない。そこで調べてみた。筆者の環境は、Linuxなので、以下のコマンドを端末から叩くだけでバックアップが取得できる。

curl http://xxxxxx.tumblr.com/api/read/json?debug=1 > tumble.bak

※ブログURL部分は適宜読み替えてください。

15995518417_3781c5d73c_o.png

筆者は画像のアップロードにはFlickrを利用しているので、画像のバックアップは不要。画像等のメディアファイルのバックアップが必要な場合は、以下のコメンドを端末から叩く。

wget -r -p ?no-parent http://xxxxxx.tumblr.com

※ブログURL部分は適宜読み替えてください。

たぶん頻繁にはバックアップはしないが、いざと云うときのためにメモしておくことにした。

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

Tumblrで最近の記事を表示する

Tumblrで所謂”最近の記事”を表示するには、ひと工夫が必要だ。とは云っても、Googleのサービスであるfeedburnerを利用すれば、Tumblrに限らずHTML編集ができるブログシステムならどこでも利用可能である。

feedburnerの登録手順は、ここでは省略する。フィードの登録が完了したものとして話をすすめる。

”Publicize” → ”BuzzBoost”

16170223302_baea2363f3_o.png

ここで、HTMLコードを取得して、ブログの”テーマの編集"→”HTMLを編集”で表示させたい場所にHTMLコード貼り付けるだけ。一旦コードを貼り付けてしまえば、カスタマイズした情報はHTMLコードの変更なしに反映される。カスタマイズ(表示件数、日付表示の有無など)は、”BuzzBoost”画面で簡単に行える。

是非利用されたし。

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

はじめてのTumblr覚書

最近まで、Bloggerを使用していたが、新しい年を迎えるにあたりブログシステムも新しく・・・と考え、Tumblrを使用することにした。TumblrもBlogger同様、HTMLを自由に編集することが可能であるため、カスタマイズには事欠かない。

今回、はじめてTumblrを使用するにあたり、導入事例としてメモを残すことにした。

コメントシステム

Tumblrには標準のコメントシステムが用意されていないので、Disqus ? The Web’s Community of Communitiesを使用することに。筆者が使用しているテーマは、”Optica”であるが、Disqusに対応しおり”Disqus shortname”を設定するだけで利用できる。

Googleアナリティクスとウェブマスターツール

ブロガーであれば誰しも導入している定番のツール。サイトマップは以下のとおり。

http://jkuntum.tumblr.com/sitemap1.xml
http://jkuntum.tumblr.com/sitemap-pages.xml
http://jkuntum.tumblr.com/rss

※サイトマップにアクセスする前に、必ず記事とページを一つ以上投稿しておく必要がある。そうでないとサイトマップが正常に作成されず、以降修復不可能になる。

ページタイトルのフォーマット変更

ブログ名+ページタイトル → ページタイトル+ブログ名

<title>{block:SearchPage} ({lang:Search results for SearchQuery}){/block:SearchPage}{block:PermalinkPage}{block:PostSummary}{PostSummary} − {/block:PostSummary}{/block:PermalinkPage}{Title}</title>

アドセンス

筆者の利用しているテーマ”Optica”は、モバイル端末にも対応しているため、パソコン・モバイル端末共通で同一アドセンスコードが利用できる。よって、アドセンスはレスポンシブを採用する。

タグクラウド

Tumblr Tag Cloud Widgetを使用。

関連記事

以下のコードを貼り付けるだけ。

<!-- 関連記事 開始 -->
{block:Permalink}
{block:HasTags}
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
    <script src="http://tumblr-in-link.googlecode.com/svn/trunk/js/tumblr-in-link.1.0.js?num=5&len=60&css=simple&title=Related Posts&tags={block:Tags}{Tag},{/block:Tags}" type="text/javascript"></script>
{/block:HasTags}
{/block:Permalink}
<!-- 関連記事 終了 -->

Markdownエディタ

TumblrはMarkdownに対応しているので、Markdownエディタで記事を書くことに。また、画像はFlickrを利用している関係で、HTML→Markdown変換にHTML を Markdown へ変換を利用することにした。

15540015674_7f759a5408_o.png

共有ボタン

Twitter・Facebook・Google+などの共有ボタンは、忍者おまとめボタンを使用することにした。

以上、簡単ではあるがメモまで。まだ記事数が少ないため、検証できない項目もあるが、追ってチェックしたいと考えている。

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