photo by P4BLoX

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

　はてなブログのカスタマイズ記事が流行るのは季節行事的な風物詩なのですが、http://bulldra.github.io ドメインから配布しているブログパーツを直接的に呼び出すコードが別の人からのコピペで紹介されることも増えました。

　それ自体はよいのですが、元記事へのリンクや僕の著作物であることまで消えて紹介されるのはバイラルメディアの直リンク画像や転載問題に近しいものを感じてしまいます。とはいえ利用者の視点から見ればこちらの解説記事にも問題があったので、能書きはさておいてコピペで簡単に設置できるように公式でまとめておきますね。

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

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

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

<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 > プログラミング > はてなブログカスタマイズ」に変換しています。

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

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

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

<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ページの上部と下部にアドセンス広告を配置
• レスポンシブで広告の大きさを調整

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

<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や広告スロットはアドセンスコードの以下の部分です。上部と下部でふたつの広告スロットが必要となります。

<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を追記。

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

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

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

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

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

　また、外部要因の変更による制限事項や修正などのアナウンスなども適宜でてきますので、なるべくであれば元の記事を読んで頂ければと思いますし、「コピペで簡単に設置できる」ようになったのは、コードが呼び出された先で「コピぺで簡単に設置できるのうにする」ための試行錯誤があるからだということを少しだけ想像してもらえると嬉しいです。

関連記事