もう一人のY君

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

もう一人のY君

iPhoneアプリのレビューやアップデートレビューなどを書いています. たまに数学の記事も書きます.

もう一人のY君 MENU

はてなブログをレスポンシブデザインにしました

スポンサーリンク


 160129_30

 こんなあっさり出来るなら早いうちにやっておけばよかった…

 

[Contents]
 

 

参考記事

mudaide.hatenablog.com

 こちらのエントリーでレスポンシブに触れられていたのを見て不意にやってみました.

 

 

自分のテーマが対応してるか確認する

 既に使用しているテーマがレスポンシブに対応してるならそのままにしておくに越したことはありません.

 人によってはテーマが気に入っててヘタに変えたくないとか, 仕様が変わるのはイヤとかありますからね…

 

160129_30a

 設定かデザイン画面で確認できるものかと思ったんですが見当たらないので, テーマ ストアにアクセスして確認します.

 ページ右上に「インストールしたテーマ」があるのでこれをクリック.

 

160129_30b

 「使用中」のタグがついているものが現在使用中のテーマです.

 テーマをクリックして説明にレスポンシブ対応の記述があれば現在のままでOK.

 そうでなければストアからレスポンシブ対応のテーマを探してそちらに差し替えます.

 

 見てみたら自分が使ってるWrittenというテーマはレスポンシブ対応してました…なぜやってなかった…

 インストール日がおかしいけど気にしないことにします.

 

happylife-tsubuyaki.hatenablog.com

 実際にレスポンシブにする方法はたとえばこちらの記事を参考にしてください.

 id:setuyakuhappylifeさんが指摘されているように, テーマを変えるとデザインcssなどがリセットされる場合があるので, 各種タグを予めメモなどにコピーしてから変更しましょう.

 

簡単な比較

 前後でデザインがどう変わってるかざっくり比較してみました.

 なお前後で弄ってるのはレスポンシブのオンオフのみです.

 また使用するテーマによっては変化が異なることがあるかもしれません, 以下で紹介するのはあくまでもWrittenというテーマについてです.

 

160129_31

 ページ最上部です.

 レスポンシブをオンにすることで画面上部の固定バーが無くなり, ヘッダ背景が拡大されています.

 タイトルのフォントが大きくなり, はてなブログ側の広告が無くなり, ソーシャルボタンが本文上部にも表示されています.

 記事の日付は画像では見えませんがソーシャルボタンの下に移動しています.

 

160129_32

 添付画像は, 横長だと歪んでしまうみたいですね…

 正方形か縦長に近い場合はこのようなことは起きないようです.

 記事本文のテキストも大きくなって読みやすいです.

 

160129_33

 箇条書きや見出しのデザインがPCと同じになりました, これは嬉しい.

 

160129_34

 記事下部の後ろもPC版と同じように続きます.

 「あわせて読みたい」もちゃんと表示されます.

 

160129_35

 DISQUSもちゃんと開きます.

 その後ろにはサイドバーが続きます.

 

 

 画像の扱いがちょっと気になりますが, レスポンシブ対応にする方がよっぽどメリットがあるのでこのままやっていこうかと思います.