はてなブログのスマートフォンテンプレートをカスタマイズする

このサービスはすでに停止しています。

本当は昨日中に公開しようとしていたのだが何点かうまくいかない部分があり公開出来ずにいた。その点は結局に解決方法が浮かばないためとりあえず実装しないことにした。そのうち考える。

先日からはてなブログに関するサービスを製作しているのだが、今日はスマートフォンのテンプレート表示を変更するスクリプトを書いた。

はてなブログのPC版テンプレートは「デザインのカスタマイズ」からテンプレートを適用できたりサイドバーを変更できたりするのだが、スマートフォンテンプレートはデザインの変更を行えない。だが先日ついに「カスタマイズ出来る可能性の機能」が公開された。ので、テンプレートのカスタマイザを作ってみた。

はてなブログ スマフォテンプレート カスタマイズ

「へんな会社」のつくり方 (NT2X)

現在は以下の機能を実装している。

検索ボックスの表示位置を変更

検索ボックスはデフォルトで記事一覧(個別記事)の下に表示されるが、スマートフォンテンプレートにはなぜかカテゴリ一覧がないので(よね?)検索で記事を探すことが多い。だが検索が記事の下にあるのでアクセスしづらい。ので、検索ボックスを記事一覧(個別記事)の上に表示できるようにした。

プロフィールリンクを表示しない

PC版テンプレートではサイドバーからプロフィールを削除できたりヘッダとフッタを非表示にして容易には著者ページにアクセスできないようにすることができるが、スマートフォンテンプレートではそのオプションがなく強制的にプロフィールへのリンクが表示されてしまう。

プロフィールリンクの表示を消した所でプロフィールにアクセスすることは出来るのだが、容易にアクセスできないようにしたいことがあるので非表示に出来るようにした。

「はじめよう広告」を表示しない

これはひどい。無料版のはてなブログならまだしも、はてなブログProでもこの広告が表示される。はてなブログProは「広告の非表示」が機能として提供されているはずなのだがこの「はてなの広告」は有料オプションの非表示対象外のようだ。閲覧者からすれば「ブログをはじめる」なんてことは関係ない。「ブログを作りたい」のではなく「ブログを読みたい」のでアクセスしてきているのだ。それなのにこの広告が表示されるのは不適切と考えられる。

なのでこの広告を非表示に出来るようにした。だがはてはもこれを非表示にすることは望んでいないのか「読者登録」とセットでiframeに落とし込んでいる。これは厄介だ。無料版や独自ドメインを利用していないはてなブログProでは問題ないかも知れないが、独自ドメインで運用しているとこのiframeへのアクセスはクロスドメインとなってしまう。

ので、このオプションを有効にすると現在は「読者になる」もセットで非表示になってしまう。これは解決したい問題であるが、すぐには解決策を思いつかなかったため現在は未対応としている。

はてなブログのリンクを表示しない

これもひどい。上の「はじめよう広告」と同じく「はてなブログ開発ブログ」、「週間はてなブログ」、「はてなブログトップ」への誘導リンクが強制的に表示されてしまう。日記のようなブログの利用者であれば問題ないかと思うが、アフィリエイトやアドセンスなどの広告で収益を上げている人からすれば他への流出は少しでも抑えたいはずである。

ので、この「はてなブログリンク集」を非表示に出来るようにした。

広告を挿入する

はてなブログのPC版テンプレートであれば広告は自由に設定でき、ヘッダやフッタ、個別記事等のある程度自由な位置に広告を挿入できるようになっているが、スマートフォンテンプレートではPC版の「デザイン変更」の「スマートフォン版でも表示する」で設定した内容しかコードを挿入することができない。私は記事一覧ページにも是非とも広告を表示したい。

ので、テンプレートに広告を挿入できるようにした。これは「広告」としているがHTMLであればどのようなコードでも挿入ができるので、画像や文章など自由に入力してもらえる。

記事個別ページにも表示する

記事一覧ページに広告を挿入することを前提にしているが、個別記事内に広告を設置するのではなく個別記事ページのヘッダやフッタにも広告を表示したい人はこのオプションを有効にすれば全てのページに広告が挿入される。

広告表示位置

広告をヘッダに表示するかフッタに表示するかを設定できる。

広告コード

ここに広告コードをコピーする。上にも書いたが広告以外でも自由にHTMLを書き込めるので自由に使って欲しい。シングルクォートを挿入すると多分問題が出るのでダブルクォートだけにして欲しい。AdSenseのコードにシングルクォートは含まれていないのでそのまま貼りつけるだけでいい。

私が確認している端末でははてなブログのスマートフォンテンプレートではカテゴリ一覧が表示されないのだが、これは全てのユーザがそうなのであろうか?これについては理由が全くわからないためなぜ表示されないのか疑問に思う。スマートフォンでカテゴリページにアクセスすれば問題なく記事一覧が表示されるのでカテゴリページの準備はされている。わからない。表示される環境があるのだろうか？わかる方がいれば教えて欲しい。

現在は実装していないがそのうち実装したいと考えているのは「カテゴリ一覧表示」と「始めよう広告のみの非表示」。これにつてもリクエストがあればコメントくださいませ。

ちなみに私が設定したビフォーアフターはこちら。

「へんな会社」のつくり方 (NT2X)

はてなダイアリーガイドブック―ウェブログでつながる新しいコミュニティ

スーパーマリオ ハテナブロック 小物入れ

赤ちゃん　はてな　赤ちゃんがわかる育ちのガイドブック はじめて出会う育児