ディスディスブログ

気分変調症の男がテレビ番組の感想やカメラ、ファッションのことなどを書きます

ディスディスブログ

はてなブログテーマ「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みたいです。

 

おわりに

help.hatenablog.com

 

あとになって『はてなブログ ヘルプ』の「はてなブログテーマ製作の手引き」という記事にも色々と書かれていました。しっかり読んでおかないといけませんね……。

とりあえず今のところはしっかりレスポンシブになっているかと思います。たぶん。設定ができていないときは「単に画面サイズを縮小しただけのブログが表示される」状態になっていたのでしょう。そのときにスマホで当サイトをご覧になった方には大変ご迷惑をお掛けしました。

ちなみに下に貼った過去記事の「游ゴシック」のフォント指定は、今はブログタイトルにしか使っていません。というのもWindowsマシンで見るとあまり綺麗ではない、という意見を見たからです。私はMacを使っているので良くわからないのですが、綺麗ではないのなら止めておこうかなと。

 

追記

2016年3月現在、レスポンシブにはしていません。デザイン的な問題が発生したということではなく広告をPCとスマホとで分けたかったからです。レスポンシブを止めた後にこちらの記事をご覧になった方には大変申し訳ありません。

 

dysdis.hatenablog.com

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)