さくらのブログ (Seesaaブログ) に設置 人気の記事ブログパーツ「i2i サイト内ランキング」

さくらのブログ (Seesaaブログ) に、人気の記事ブログパーツ サイト内ランキング -スマホ完全対応の人気ランキング- | i2i 無料Webパーツ を設置してみた。

当ブログでは、右サイドバー下に設置。 (スマホはログの記録のみ)

2016-10-19_08h27_43.png

とにかく強力なカスタマイズが魅力である。広告も小さめであり目立たない。デザインの自由度が高く、表示条件の設定やログ記録条件の設定も可能。例えば、タイトル文字列の一部を削除したり置換したり、記録するURLの一部を削除したり置換したり、或いは、タイトルまたはURLの一部をキーとして非表示にすることもできる。

さくらのブログでは、スマホ表示の場合のURLは、「http://s.jkunblog.com/s/article/.........」となるが、「s.jkunblog.com/s/ → s.jkunblog.com/」とすることで、パソコン表示のURLと統合することが可能になる。また、プレビューの「s.jkunblog.com/auth/article_preview/」を非表示にしたり、ブログ名を削除したり・・・様々な自動編集が簡単に設定できる。

集計条件は、指定した日数分遡って集計したり、一定期間でリセットして集計したり、と自由度は高い。手動で更新集計して即反映させることも可能だ。

次に実際にさくらのブログに設定してみる。

デザイン> PC> コンテンツ

2016-10-19_08h52_20.png

↑ 表示タグと取得タグ (ログの記録) が分かれているので、取得タグを所謂「記事のみ」に設定する。これでトップページなどを簡単に排除できる。

デザイン> スマートフォン> コンテンツ

2016-10-19_08h55_11.png

↑ スマホの場合も、取得タグを所謂「記事のみ」に設定する。なお、筆者の場合はスマホでは人気の記事は表示していない。表示する場合は、スマホ用のデザインのカスタマイズにも対応しているので利用されたし。

とにかく、カスタマイズが強力であり、何でも自由自在に設定できるのが嬉しい。ブログにマッチしたデザインで ”人気の記事” を表示することが簡単にできる。

2016-10-20: スマホでオーバーレイ広告が表示されるので、スマホのログ記録タグは削除した。

admin
カテゴリ:ブログサービス
2016/10/19 09:27 | Comment(0)

さくらのブログで「リクエストされたページは表示できません。サーバのアクセス権限がありません。」と表示される

本日、7:40から数十分程度、さくらのブログにおいて「リクエストされたページは表示できません。サーバのアクセス権限がありません。」と表示され、ブログが表示されなくなった。

2016060907:51:08_001.png

独自ドメインに問題があるのかと考え、さくらのブログの本来のドメインで表示されるか? (NGであった) 調査したり、さくらのブログの管理画面・コントロールパネル 他で、あれこれ調べてみたりと・・・。結局のところ原因不明で、数十分後には自動復旧した。

一切の設定を変えていなかったので、ユーザー側の問題ではないと考えていたが、このような現象は さくらのブログでは初めて だったので少々困惑した次第である。

いずれにしても、しばらく放置しておけば自動復旧すると云うことだ。

admin
カテゴリ:ブログサービス
2016/06/09 08:28 | Comment(0)

特定の記事だけアドセンスを非表示にする

特定の記事だけアドセンスを非表示にする方法の覚書。

方法は簡単で、アドセンスコードを [div] で括り、記事中にスタイルシートを定義 [display:none] して非表示にするだけ。

↓ アドセンスコードを [div] で括る。

<div class='non-ads'>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レクタングル中01 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-4276491656474968"
     data-ad-slot="0612492734"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>

↓ 括った [div] のクラス名に対して非表示になるように、記事中に以下のスタイルシートを埋め込む。

<style type="text/css">.non-ads {display:none;}</style>

当ブログ、さくらのブログでは・・・ ↓

2016052417:20:11_001.png

記事はHTMLコードが有効になるモードで投稿する必要があるので要注意。

admin
カテゴリ:ブログサービス
2016/05/24 17:24 | Comment(0)

アドセンス「ページ単位の広告」を導入してみた ~ さくらのブログ (Seesaaブログ) ~

アドセンス「ページ単位の広告」と云うものが新しく登場した。高い収益が期待されると AdSense が判断した場合のみページに広告が表示される。

広告の設定 - ページ単位の広告 : Google AdSense

これはモバイル端末のみ有効になるアドセンスで、所謂アンカー広告と呼ばれる下の方にオーバーレイ表示される広告、そしてサイト内でページ移動があった場合に全画面で表示される広告、この2つを指す。訪問者は、どちらも簡単に非表示にできると云う。なお、この広告は、従来型アドセンスの ”数” の上限に影響を与えない。

↓ アドセンスのコードを貼り付けておけば、 [on/off] は ”右側ステータスのスイッチ” で簡単に行える。

2016050606:57:46_001.png

アドセンスのコードは・・・

広告を表示するページの <head> タグ(または、<body> の最上部)に広告コードを配置します。すべてのページとサイトに同じコードが使用されます。ページ単位の広告の設定を変更した場合でもこのコードを変更する必要はありません。

とあるが、当ブログの ”さくらのブログ” では、スマホ表示のHTMLの編集はできないので、ヘッダー部に [自由形式コンテンツ] を追加して対応する。 ↓

2016050606:53:56_001.png

↓ <body> の直後と云うワケにはいかないが、特に問題はないようである。

<body>

<div id="iphone-container">

<header id="banner" class="clearfix">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-4276491656474968",
    enable_page_level_ads: true
  });
</script>

  <h1 class="blogTitle"><a href="http://s.jkunblog.com/s/">Jkun Blog</a></h1>

↓ テストはモバイル端末でしか行えない。URLの末尾に [#googleads] を追加してアクセスする。すると、以下のような画面が現れる。上の画面の説明が日本語でない場合は、右上の言語選択で日本語を選択する。ここで、とりあえずアンカー広告の確認が行える。

Screenshot_2016-05-05-19-15-06.png

↓ [モバイル全画面広告] をタップして、ハイライトされたリンクをクリックすれば・・・

Screenshot_2016-05-05-19-27-43.png

↓ 全画面広告の確認が行える。

Screenshot_2016-05-05-19-27-54.png

しばらく様子を見て、効果の程を見極めたいと思っている。

2016-5-7: レポートを見て、効果なしと判断して撤去した。”目に留まりやすい” と ”邪魔になる” とは別だと云うことだろう。

2017-6-16: 全画面広告のみ有効として様子を見ることにした。

admin
カテゴリ:ブログサービス
2016/05/05 20:34 | Comment(0)

さくらのブログ (Seesaaブログ) に「いいね!ボタン」を設置する方法

さくらのブログは、Seesaaブログをベースにしているので、Seesaaブログベースのブログシステムであれば、同様の方法で設置できる。

設置には、「いいね!ボタン - ソーシャルプラグイン」を使用する。なお、使用にはアプリIDが必要になるので、事前に取得しておく。Facebook開発者 - 開発者向けFacebook の「新しいアプリを追加」で取得できる。

2016041514:21:05_001.png

次に、いいね!ボタン - ソーシャルプラグイン で設置タグを取得する。

2016041514:01:41_001.png

ステップ 1: アプリIDと言語を選択する。
ステップ 2: コードを ”<body> タグ” の直後に配置する。
ステップ 3: コードを ”表示したい場所” に配置する。但し、コードを改変する必要がある。

<div class="fb-like" data-href="<% article.page_url %>" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>

※URLの部分を、個別記事URL「<% article.page_url %>」に置き換える。

実際の設置コードは、↓ のようになる。ここでは、個別記事のときだけボタンを表示する。

<!-- 個別記事のときだけ Facebook の いいね!ボタン を設置 -->

<% if:page_name eq 'article' -%>

<div class="fb-like" data-href="<% article.page_url %>" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>

<% else -%>
<% /if -%>

さくらのブログでの具体的な設置方法に関し、「ステップ 2」は [デザイン> PC> HTML] から、「ステップ 3」は [デザイン> PC> コンテンツ の ”記事” → ”コンテンツHTML編集”] から編集する。 ↓

2016041515:40:39_001.png

スマホの場合はHTML編集ができないので、自由形式コンテンツ (ボタンは ”インラインフレーム” で設置) を追加して対応することになる。

admin
カテゴリ:ブログサービス
2016/04/15 15:29 | Comment(0)

AdSenseの「関連コンテンツ機能」を導入してみた

今朝メールを確認してみると・・・「[再送] AdSense の関連コンテンツ機能でサイトを成長させましょう」と云うメールが届いていた。見てみると、アドセンスが所謂 ”関連する記事” を表示してくれると云った内容だった。 (確認したら既に同様のメールを受け取っていた。)

関連コンテンツ機能について - AdSense ヘルプ

簡単に説明すると・・・ 関連コンテンツには広告を含めることができる。広告の有無は選択できる。また、1ページあたりのアドセンスの設置個数の制限には関係がない。つまり無制限に設置できる。

ところが、 [歯車アイコン] → [設定] → [アカウント] にある [サイト管理] をクリックすると・・・ ↓ 当ブログのサブドメインは ”利用できません” となっている。トップドメインは ”準備完了” となっているが、トップレベルドメインにはコンテンツは存在しない。

2016033109:46:15_001.png

どうしたものか・・・と思いながらも設置してみたら問題なく表示された。 (※設置コードを生成して15分程度は関連コンテンツは表示されず広告のみ表示される。)

2016-4-3: アカウント内のサイトのリストを管理する - AdSense ヘルプ によれば、トップレベルドメインを指定すればサブドメインも含まれるので、問題はないようである。

パソコンでは以下のようになる。 ↓

2016033109:43:24_001.png

スマホでは以下のようになる。 ↓

Screenshot_2016-03-31-09-48-09.png

パソコン・スマホ、いずれもレスポンシブ対応で設置したので、表示エリアのサイズに応じてレイアウトは変化する。

広告を含めなければ、アドセンスと云うよりも ”関連する記事” のブログパーツと云う感じで利用できるが、当然ながら訪問者が ”広告をブロック” していると表示されない。このへんは頭に入れておいたほうがよいだろう。

admin
カテゴリ:ブログサービス
2016/03/31 10:27 | Comment(0)

さくらのブログに「FancyZoom」を導入する

さくらのブログに所謂LightBox風の「FancyZoom」を導入してみた。LightBoxは過去のHTMLタグを改変する必要があり、非常に面倒であるが、「FancyZoom」は何ら変更の必要はない。この点が導入の決め手となった。なお、対象はデスクトップレイアウトのみ。

表示例

↓ さくらのブログの画像アップローダーを使用して画像を貼り付け。HTMLタグには何ら手を加えていない。

IMG_20160101_124035.jpg

導入手順

スクリプトのダウンロードと解凍
cabel.name: FancyZoom 1.1 からスクリプト (zipファイル) をダウンロードする。ダウンロードが終わったら解凍する。

ファイルの構成を確認する
FancyZoom 1.1
  + images-global
    + zoom
  + js-global
    - FancyZoom.js
    - FancyZoomHTML.js

FancyZoom.js の44行目を修正する
↓ 表示用部品画像ファイル群のディレクトリへのパスを通す。

var zoomImagesURI   = 'http://jkunblog.com/FancyZoom 1.1/images-global/zoom/'; // Location of the zoom and shadow images

FancyZoom 1.1 ディレクトリをアップロードする
FTPソフトを使用してサーバーへアップロードする。

デザイン> PC> HTML を編集する
さくらのブログの管理画面で、HTML編集を行う。
↓ jsファイル2個のロードと<body>タグ内からの関数呼び出しを追加する。

<!--FancyZoom-->
<script src="http://jkunblog.com/FancyZoom 1.1/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="http://jkunblog.com/FancyZoom 1.1/js-global/FancyZoomHTML.js" type="text/javascript"></script>
<!--/FancyZoom-->
</head>
<body onload="setupZoom()">

以上で作業は完了。過去の画像に関しても反映されるので、大いに助かるスクリプトである。

admin
カテゴリ:ブログサービス
2016/01/14 13:45 | Comment(0)

さくらのブログ (Seesaaブログ) でTwitterカードのサムネイル画像が表示されない場合の対処方法

さくらのブログ (Seesaaブログ) はTwitterカードに対応しているはずであるが、なぜか記事のサムネイル画像が表示されない。Twitterカードの検証 (Card Validator | Twitter Developers) 、及び、ブログ側の設定も確認済であるが・・・。

そこで、HTMLソースを確認してみると、OGPの記述が不足していることが分かった。 (3行目)

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" lang="ja" xml:lang="ja">
<head>

↑ 編集は・・・ デザイン> PC> HTML

この対応により、過去の”ツイート”に関してもサムネイル画像が表示されるようになった。

範囲を選択_002.png

サムネイル画像は、投稿後すぐには反映されないことも。少しばかりの時間を要する場合があるようだ。

今回の作業は同時に、Twitterカードの検証 (Card Validator | Twitter Developers) も行っているので、どちらが効いているのかは定かではない。いずれにしても、両方やっておけば無難である。

2016-1-9 追記:
新しく記事を書いて自動投稿しても、Twitterカードのサムネイル画像は、デフォルトの画像になってしまう。”Twitterカードの検証”を実行すれば、その記事の画像が表示されるようになる。これはいったいどう云うことであろうか?

気になる点がひとつある。”Twitterカードの検証”では、1回目では画像の検出に失敗している。 ↓

2016-01-09_14h02_07.png

2回目で画像の検出に成功している。 ↓

2016-01-09_14h02_31.png

つまり、一発で画像の検出ができないことが、影響しているのであろう。実際のHTMLソースを確認してみたが、問題はないように思える・・・。

もしかして、「<meta name="twitter:image" ・・・」がないのが影響しているのか? ↓

2016-01-09_14h47_46.png

いや、それはない。 スタートガイド | Twitter Developers には、「既にオープングラフプロトコルのマークアップが使われている場合、これを変更する必要はありません。」とある。

放置しておけば、そのうち解決する問題なのか?何らかの対応が必要なのか?さて、どうしたものか・・・。投稿する度に、”Twitterカードの検証”を行うのは面倒極まりない。

2016-1-16 追記:【解決】
従来は、さくらのブログの設定にあるTwitterとの連携を利用して自動投稿していたが、記事投稿と同時にTwitterに自動投稿するこに問題があると判断して、さくらのブログでの自動投稿を取りやめた。そして、タイミングをズラして自動投稿するために、IFTTT - Make Your Work Flow を利用することにした。そして・・・この対応が功を奏したようで問題は完全に解決した。よくよく考えると、元々このことが原因だったようである。

admin
カテゴリ:ブログサービス
2016/01/07 09:18 | Comment(0)

さくらのブログ (Seesaaブログ) に「忍者おまとめボタン」を設置する

さくらのブログ (Seesaaブログ) に 「忍者おまとめボタン」 を設置した。

さくらのブログでは、SNS共有ボタンを標準でサポートしているが、ちょっとイマイチと感じるユーザーも多いだろう。

そこで、「忍者おまとめボタン」の登場である。最近利用していなかったが、お洒落なデザインのボタンも用意されており気に入った。カウントを表示しないボタンを利用することで、各SNSとの通信が不要となり、表示が速くなるのも嬉しい。 (さくらのブログではカウント付き)

表示例
範囲を選択_004.png

設置コードは、”Seesaaブログ”のコードを使用すればよい。さくらのブログは、Seesaaブログと同じシステムなので、Seesaaブログの設置コードがそのまま利用できる。

↓ 当ブログの設置コード。具体的な設置方法は、さくらのブログにアドセンスを設置する方法: Jkun Blog を参考にしてほしい。

<% if:page_name eq 'article' -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.entire_body | bodyfilter(article_info,blog) %>


<!-- アドセンス記事下 -->
<div style="clear: both;padding-bottom:20px;"></div>

<div style='margin:0;padding:20px 0 20px 0;border-top:dotted 1px #333;border-bottom:dotted 1px #333;'>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レクタングル中05 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-4276491656474968"
     data-ad-slot="1279016184"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>


<!-- 共有ボタン -->
<div style='margin:20px 0 10px 0;' class="ninja_onebutton">
<script type="text/javascript">
//<![CDATA[
(function(d){
if(typeof(window.NINJA_CO_JP_ONETAG_BUTTON_3839b90a15eefffb1de232dd509f81ac)=='undefined'){
    document.write("<sc"+"ript type='text\/javascript' src='//omt.shinobi.jp\/b\/3839b90a15eefffb1de232dd509f81ac'><\/sc"+"ript>");
}else{
    window.NINJA_CO_JP_ONETAG_BUTTON_3839b90a15eefffb1de232dd509f81ac.ONETAGButton_Load();}
})(document);
//]]>
</script><span class="ninja_onebutton_hidden" style="display:none;"><% article.page_url %></span><span style="display:none;" class="ninja_onebutton_hidden"><% article.subject | html %></span>
</div>

レスポンシブ対応のボタンなので、当ブログにはもってこいである。

admin
カテゴリ:ブログサービス
2015/12/19 14:22 | Comment(0)

特定の文字列を含むURLのときに隠す方法

特定の文字列を含むURLのときに一部のコンテンツを隠す方法について。

↓ URLに文字列 [xxxxxxurl] が含まれるときに [隠したいコンテンツ] を隠す。URLに文字列 [xxxxxxurl] が含まれるとき [<div id='container'>] が [<div id='container' class='hide-mode'>] になる。

<html>

<style type="text/css">
.hide-mode .hide-cont {
        display: none !important;
        margin: 0 !important;
}
</style>


<body>
<div id='container'>


<div class='hide-cont'>
[隠したいコンテンツ]
</div>


<script type="text/javascript">
hideClass = location.href.indexOf("xxxxxxurl"); 
if ( hideClass !== -1 ) {
    document.getElementById("container").className = "hide-mode";
}
</script>


</div>

</body>
</html>

JavaScriptは後方に置くこと。

さくらのブログ スマホでのコメント欄のアドセンスを非表示にする: Jkun Blog
さくらのブログ タグページのアドセンスを非表示にする: Jkun Blog

admin
カテゴリ:ブログサービス
タグ:JavaScript
2015/12/11 13:54 | Comment(0)