太陽がまぶしかったから

C'etait a cause du soleil.

はてなブログカスタマイズ公式コピペ設置方法まとめ

photo by P4BLoX

公式コピペ設置方法をまとめておきます

 はてなブログのカスタマイズ記事が季節ごとに新規ユーザー同士で流行るのは風物詩なのですが、http://bulldra.github.io ドメインから配布している自作のブログパーツを直接的に呼び出すコードが別の人からのコピペで紹介されているのを何度か見かけました。

 (フィッティングした上での)転載自体は仕方ないのですが、孫引きされて元記事へのリンクや著作物者の情報が消えた状態で紹介されるのはバイラルメディアの直リンク画像問題に近しいものを感じます。

 とはいえ利用者からの視点で見ればこちらの解説記事にも問題があったので、能書きはさておいてコピペで簡単に設置できるように公式でまとめておきますね。なお自分のブログにソースコードの転載する場合には必ず著作者を明記し、全文転載はご遠慮ください。孫引きは禁止します。

パンくずリストをコピペで簡単設置

f:id:bulldra:20150627113323j:plain

 「パンくずリスト」とはGoogleからカテゴリ構造を認識してもらうためのマークアップ方法です。以下のコードを設置することで、検索結果にカテゴリが表示されるようになります。

 デザイン画面における「フッタ」に以下のコードをコピペ。

<!-- CopyRight http://bulldra.http://bulldra.hatenablog.com -->
<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/breadcrumb.js" charset="utf-8"></script>

 パンくずリストを表示さる場所(記事上 or 記事下)に以下のコードをコピペ。

<style>
div #breadcrumb div {
    display: inline;
    font-size: 13px;
}
</style>
<div id="breadcrumb"></div>

 カテゴリを「親カテゴリ」と「親カテゴリ-子カテゴリ」と作って、両方のカテゴリを記事に設定することでカテゴリ階層化が行えます。この記事では「プログラミング」と「プログラミング-はてなブログカスタマイズ」を設定することで「TOP > プログラミング > はてなブログカスタマイズ」に変換しています。サイドバーのカテゴリモジュールで親カテゴリのみを表示させる処理については標準で動かないようになっているので、動作させる場合には上記コードに以下のコードを追記。

<!-- CopyRight http://bulldra.http://bulldra.hatenablog.com -->
<script type="text/javascript">
google.setOnLoadCallback(categoryHierarchyModule);
</script>

あわせて読みたいGをコピペで簡単設置

f:id:bulldra:20150627113338j:plain

 表示している記事のカテゴリに関する記事をブログカード形式で表示します。

 デザイン画面における「記事下」に以下のコードをコピペ。

<!-- CopyRight http://bulldra.http://bulldra.hatenablog.com -->
<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/gatcha.js" charset="utf-8"></script>

<script type="text/javascript">
writeGatcha(3,'entryGatcha','category','あわせて読みたい' ,true);
google.setOnLoadCallback(function(){ writeGatchaCategory('entryGatcha') } );
</script>

アーカイブやプロフィールにアドセンス広告を表示

  • PCの場合はアーカイブ、カテゴリー(一覧表示時のみ)、またはaboutページの上部と下部にアドセンス広告を配置
  • スマートフォンの場合はトップやカテゴリーを含む一覧表示、またはaboutページの上部と下部にアドセンス広告を配置
  • レスポンシブで広告の大きさを調整

 デザイン画面における「フッタ」に以下のコードをコピペ。PROユーザー用。

<!-- CopyRight http://bulldra.http://bulldra.hatenablog.com -->
<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/adsensearchive.js" charset="utf-8"></script>
<style>
.archive_adslot { width: 320px; height: 100px; }
.archive_pr { font-size: 12px; }
@media(min-width: 800px) { 
  .archive_adslot { width: 728px; height: 90px; }
  .archive_pr { font-size: 13px;  margin-top:20px; }
}
</style>
<script type="text/javascript">
addAdsenseArchive(クライアントID,上部広告スロット,下部広告IDスロット,"スポンサーリンク");
</script>

 スクリプト内のクライアントIDや広告スロットはアドセンスコードの以下の部分です。上部と下部でふたつの広告スロットが必要となります。

<!-- CopyRight http://bulldra.http://bulldra.hatenablog.com -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="" /* ここがクライアントID */
     data-ad-slot="" /* ここが広告スロット*/
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

はてなブログのスマートフォン表示の追尾ヘッダーを消す

 デザイン設定画面のスマートフォンフッターに以下のCSSを追記。PROユーザー用。

<style>
/* ヘッダー表示有無 */
#globalheader-container {
    display:none;
}

/* 余白調整 */
#container {
    padding-top:20px;
}
</style>

使う側からすればノイズかもしれないけれど

 そんなわけで、こちらで作成したブログパーツをコピペで簡単に設置できる方法をまとめました。『プログラミング-はてなブログカスタマイズ カテゴリーの記事一覧 - 太陽がまぶしかったから』に過去の遺物が色々と残っています。作る側の苦労や思い入れは、使う側からすれば単なるノイズなのかもしれませんが「落ちてる」とか「拾った」みたいに言われると悲しくなりますし、コード自体をコピペや直リンクされると利用者から困ることも多いのです。

 例えば、この問題は元のソースコードを別の人がコピペで公開していて、元記事では直していたのに誤ったままのソースコードが別の人から広まってしまったのが問題を長期化させる要因となりました。未だに100%の解決はできていません。

 また、外部要因の変更による制限事項や修正などのアナウンスなども適宜でてきますので、なるべくであれば元の記事を読んで頂ければと思います。「コピペで簡単に設置できる」のは、コードが呼び出された先で「コピぺで簡単に設置できるように作られた」からだということも少しだけ想像してもらえると幸いです。なお、設置サポートや表示スタイル/アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。

Google AdSense 成功の法則 57

Google AdSense 成功の法則 57