はてなブログテーマ「Written」のviewportを設定してレスポンシブに対応しました。なっているはずです（追記あり）

当ブログ『ディスディスブログ』のテーマを「Written」に変更したわけですが、どうやら変更直後はレスポンシブになっていないみたいでした。大変ご迷惑をお掛けしました。

レスポンシブデザインとは、Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。

- レスポンシブデザインとは｜RWD｜responsive design - 意味/解説/説明/定義： IT用語辞典

レスポンシブとはこういう意味です。大まかに分けるとPCとタブレット、スマホの3つのデバイスで、それぞれのブラウザサイズに対応した見てくれに対応してくれるWebデザインということですか。

最初、はてなブログのテーマ「Written」に変更したときにしたことは、「ダッシュボード」→「デザイン」→「スマートフォン」→「詳細設定」の順に選択していき、「詳細設定」にある「レスポンシブ」にチェックを入れておきました。レスポンシブにチェックを入れておけば、自動でレスポンシブになってくれるものと思っていたんですね。しかしそうではありませんでした。少なくとも当ブログの場合は。

はてなブログのテーマ「Written」をレスポンシブにする方法

はてなブログのテーマ「Written」をレスポンシブにするにはどうすればいいのか、を検索しました。

written.hatenablog.com

テーマを反映した後に、管理メニュー＞設定＞詳細設定タブ＞下の方の「headに要素を追加」の欄に、以下のコードをコピペしてください。

<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:400,900|Economica:400,700|Open+Sans:400,700" rel="stylesheet" type="text/css">

「Written」の製作者さんのページでしょうか。そこに上記引用部のように書かれています。ダッシュボードの設定のうち詳細設定にある「headに要素を追加」にコードを入れないといけなかったようです。レスポンシブ関連で重要なのはmetaタグの「viewport」の部分でしょうか。

スマホを持っていなくてもスマホサイトをチェックする方法

スマホ、特にiPhoneで自分のブログがどのように映っているのかをPC画面で確認したいなぁと、以前から思っていまして、そのチェック方法はないものか検索をかけたところありました。私はスマホを持っていないので、スマホ表示をチェックできないと思い込んでいましたが……あるんですねぇ。

ferret-plus.com

ブラウザ「Google Chrome」のデベロッパーツールモードを使って、エミュレーション表示させることができるよ、ということです。任意のWebサイトを表示させた状態から、右クリックメニューの「検証」を選択、モード切替ができたら左上の「Device」から任意にデバイスの種類を選択するだけで確認することができます。当ブログもこの方法で確認したところ、PCでのデザインとは異なる表示がされていました。

他にもブラウザの「Safari」を使ってシミュレートできるみたいですね。簡単に書きますと、「Safari」をダウンロード→「Safari」を起動→画面上部のメニューバーからSafariの「環境設定」を選択→「環境設定」内の「詳細」を選択→「詳細」内の「メニューバーに“開発”メニューを表示」にチェック→メニューバー「開発」から「ユーザエージェント」の「SafariーiOS*.*ーiPhone」などを任意に選択→アドレス欄に自分のブログURLを入力。これでOKみたいです。