読者です 読者をやめる 読者になる 読者になる

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

【はてなブログPro】レスポンシブとスマートフォンとグローバルヘッダの関係

はてなブログ

はてなブログPro のオプションに「ヘッダとフッタ」の非表示というものがあります。

f:id:ausnichts:20150807105310p:plain

 

これですね。はてなユーザにはあると便利ですが、ユーザでなければジャマなものです。

で、自作テーマをレスポンシブで作ろうとしていましたら、モバイルの詳細設定の「レスポンシブデザイン」にチェックするしない、との関係が分かりにくいですね。

「レスポンシブデザイン」チェックボックス

  • チェックなし
    UserAgent を読んで(
    詳しく調べていませんので多分)、スマートフォンの場合は、はてなオリジナルモバイルテーマに固定されます。必ずヘッダ&フッタがつきます。
    PC や UserAgent 指定のないタブレットなどは、指定テーマが有効になり、「ヘッダ&フッタ」オプションも有効になります。
  • チェックあり
    すべてのデバイスで指定テーマが有効になり、「ヘッダ&フッタ」オプションも有効になります。
    テーマに「 /* Responsive: yes */ 」のコメントを入れると、
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" / > が挿入され、デバイスの横幅に応じた表示になります。

ということのようです。

スマートフォン用ヘッダ&フッタ

スマートフォン用にアイコン化されたヘッダがあるようです。

オリジナルモバイルテーマの場合は当然ですが、「レスポンシブデザイン」にチェックした場合でもスマートフォン用になります。

上が実機のキャプチャで、下がエミュレーターです。UserAgent を読んでいるということですね。

f:id:ausnichts:20150807153452p:plain

f:id:ausnichts:20150807151423p:plain