スマホ表示が変更された！はてなブログの最新デザインに合わせたカスタマイズ方法を大公開！

デザイン変更は突然に

昨日（2014/06/26）の夕方スマホでブログをチェックして驚いた！
何かが違う！
お昼休みにチェックした時はまだ旧来のスマホデザインで表示されていたので、昨日の午後にデザイン変更を行ったのでしょう。
私のサイトはまだアイコン周りに色を塗っていたからまだ良いのですが、他の方のブログを読みに行ったら真っ白ケッケで更にビックリ。

私のブログはこんな感じに変わっていた。

大きな違いとしては記事左右に表示されていたグレーの余白（？）が、きれいさっぱり無くなった！
これによりiPhone等の横幅の狭い画面のスマホには非常に助かるようになります。
Googleアドセンスの広告をこのグレーの余白分（-14px）、ずらして表示していたので、このグレー余白がなくなると画面左側に埋まってしまった(--;
これはマズイ！とすぐに直しました。
グレーは見えませんが白い余白が10px分だけ残っているので-10px左にズラして表示するように調整しました。

他にもタイトル下の右側に「編集」ボタンがやってきました。
以前は記事下にあったのでかなりスクロールしないと押せなくて苦労したので、タイトル下に持ってきてくれたのは非常に押しやすく使い勝手が向上しました！

はてなブログ開発ブログをチェック

スマホデザインの変更がアナウンスされているかな～、と思って「はてなブログ開発ブログ」を見に行きましたが背景画像を27個追加したという話が載っているだけ。

デザイン設定に、27種類の新しい背景画像を追加しました - はてなブログ開発ブログ
スマホページのデザインがガラッと変わって左右のグレー余白が急に無くなってますけど、そのアナウンスはまだですか？色々とデザイン調整し直さないと(ｰ ｰ;)

ブコメにて他にも困っている方がいらっしゃいました。

id:kyokucho1989

そんなことより、スマホから見たらブログが真っ白白のデザインになってたよ。見づらいよ

との局長さんのストレートがご意見が載っていました。
私も同意です。

局長さんのブログを見に行ってみると・・・

確かに真っ白白。
これは言いたくなりますねー(^^;
これなら以前のタイトル周りにグレーの枠がある方が良かったかも。

最新スマホデザインを調整する！

チャレンジした内容は以下のとおり。

【2014/06/26適用スマホデザインを調整した内容】

1. タイトル周りの色付け
2. ヘッダーの「ダッシュボード」を非表示に変更
3. Googleアドセンス広告の横位置調整

１つ１つ見て行きましょう。

１．タイトル周りの色付け

「ダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」

<style>
#header {
  background: #aa00aa;
}
</style>

上記のコードを「headに要素を追加」欄に貼り付けて保存する。
上記コードは色が「#aa00aa（濃い目の紫色）」になってしまいます。
ご自身のブログに合うイメージカラーを指定して下さい。

２．ヘッダーの「ダッシュボード」を非表示に変更

「ダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」
を開き下記コードを貼り付ける。

<style>
#globalheader-container {
  display:none;
}
</style>

下の画像は上記の１と２の両方を書いたもの。色はオレンジ色を指定していますが。

３．Googleアドセンス広告の横位置調整

「ダッシュボード」→「デザイン」→「カスタマイズ」→「記事」→「記事上下のカスタマイズ」→「記事上」

<br />
<!-- Google Ad Start -->
<script type="text/javascript"><!--
document.open();
google_ad_client = "ca-pub-7454108883909999";
var show_width = document.documentElement.clientWidth;
if (show_width < 728) {
    /* ヘッダースマホ用 */
    document.write("<div style='margin:0 0 0 -10px;'>");
    google_ad_slot = "6822889999";
    google_ad_width = 320;
    google_ad_height = 100;
}
else {
    /* ヘッダーパソコン用 */
    document.write("<div>");
    google_ad_slot = "6632072888";
    google_ad_width = 728;
    google_ad_height = 90;
}
document.close();
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<!-- Google Ad End -->

これできれいにスマホの左端とアドセンス広告の左端がピタッと一致します！
お試しあれ。

最終的に出来上がるのはこんなイメージ。

紫色は目に優しくない色ですね〜(^_^;)

追記

Googleアドセンス広告についての詳細が不足し過ぎていたので過去記事へのリンクを貼っておきます。
過去記事をベースに複数の広告枠を作って、今回のソースコードの横幅調整を使って頂ければと思います。

はてなブログ記事上にAdsenseをPC・スマホ切り替えて表示させる方法 - マネー報道 MoneyReport

2014/06/28追記

こちらの記事の設定のままだとスマホだけではなくパソコンの「ヘッダーのダッシュボード」も非表示になってしまう事が判明しました！
早速対応しましたので、もしこの記事のソースコードをそのまま適用することを考えている場合は、次の記事も参考にして下さい。
よろしくお願いします。

スマホ表示の変更ミスを修正し、追加でグレードアップをば(^^;